/* ================================================== 0) FONTS ================================================== */ /* Load Lato (you can also link this in ) */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap'); /* Museo Slab (self-hosted) */ @font-face { font-family: 'Museo Slab'; src: url('/fonts/MuseoSlab-500.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } /* Font tokens */ :root { --font-body: "Lato", Arial, sans-serif; --font-heading: "Museo Slab", "Times New Roman", Times, serif; } /* ================================================== 1) DESIGN TOKENS (default single/light mode) ================================================== */ :root { --bs-body-bg: #ffffff; --bs-body-color: #212529; --bs-primary: #AC1E2C; --bs-secondary: #5E2A2A; --bs-success: #4C9462; --bs-info: #0098CE; --bs-warning: #FFC52F; --bs-danger: #E12727; --bs-light: #F8F9FA; --bs-dark: #31251C; --bs-btn-primary-bg: #42738D; --bs-btn-primary-border-color: #42738D; --bs-btn-primary-hover-bg: #366075; --bs-btn-primary-hover-border-color: #2d4f61; --bs-btn-secondary-bg: #4C4F54; --bs-btn-secondary-border-color: #4C4F54; --bs-btn-secondary-hover-bg: #3b3d41; --bs-btn-secondary-hover-border-color: #2d2f32; --bs-btn-success-bg: #49783C; --bs-btn-success-border-color: #49783C; --bs-btn-success-hover-bg: #3a6230; --bs-btn-success-hover-border-color: #2e5025; --bs-btn-danger-bg: #AC1E2C; --bs-btn-danger-border-color: #AC1E2C; --bs-btn-danger-hover-bg: #911822; --bs-btn-danger-hover-border-color: #7A141D; --bs-btn-warning-bg: #FFC52F; --bs-btn-warning-border-color: #FFC52F; --bs-btn-warning-hover-bg: #e0ad27; --bs-btn-warning-hover-border-color: #c9971e; } /* ================================================== 2) BASE / GLOBAL ================================================== */ /* Headings use Museo Slab */ h1, h2, h3, h4, h5, h6, .header-sub-title { font-family: var(--font-heading); font-weight: 500; line-height: 1.2; margin: 0 0 1rem; } /* Everything else uses Lato */ html, body, button, input, select, textarea, p, a, small, strong, em, label, li, dt, dd, th, td, caption, blockquote, code, pre, span, div, nav, header, footer, section, article, aside { font-family: var(--font-body); } /* Skip to content */ #skiptocontent a { padding: 6px; position: absolute; left: -400px; color: #000; border-right: 1px solid #000; border-bottom: 1px solid #000; border-bottom-right-radius: 8px; background: #ffc52f; transition: top .5s ease-out; z-index: 100; } #skiptocontent a:focus { position: static; width: auto; height: auto; } /* System message ticker */ .system-message-bar { overflow: hidden; white-space: nowrap; } .system-message-bar .message-content { display: inline-block; padding-left: 45%; animation: system-message-scroll 15s linear infinite; } @keyframes system-message-scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* Interactive underline — NAV LINKS ONLY */ .nav-link { position: relative; transition: color 0.3s; } .nav-link::after { content: ""; display: block; height: 3px; width: 0; background-color: #FFC52F; transition: width 0.3s; position: absolute; left: 0; bottom: -3px; } .nav-link:hover::after, .nav-link:focus::after { width: 100%; } /* Remove caret/after on certain components */ .dropdown-item::after, .accordion-button::after, .dropdown-toggle::after, .fixed-table-toolbar .dropdown-toggle::after { content: none !important; display: none !important; } /* Checkboxes */ input[type="checkbox"].form-check-input { border-color: #495057; background-color: #fff; } input[type="checkbox"].form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; } /* Header band (if you use .text-bg-dark inside header) */ header .text-bg-dark { background-color: #42738D !important; } /* ================================================== 3) BRAND BAR (.joco-group) ================================================== */ /* Use on any container you want to brand with blue */ .joco-group { background-color: #42738D; } .joco-group a { color: #fff !important; text-decoration: none; } .joco-group a:hover, .joco-group a:focus { color: #fff !important; text-decoration: underline; text-decoration-color: #FFC52F; text-underline-offset: 3px; } /* ================================================== 4) NAVBAR (Bootstrap) — shorter, even spacing, brand look ================================================== */ /* Attach to: