/* * Terracotta theme — Cedar Hills Group house style on Bootstrap 5.3. * Loaded in right after Bootstrap so colors apply before first paint. * Code-block and nav component styles live in site.css. */ :root { --chg-terracotta: #b04e2b; --chg-terracotta-rgb: 176, 78, 43; --chg-terracotta-dark: #8c3c1f; --chg-olive: #5e7437; --chg-olive-rgb: 94, 116, 55; --chg-olive-dark: #4a5c2b; --chg-ink: #2b2622; --chg-sand: #f7f3ee; --chg-sand-2: #efe8df; --chg-line: #e2d8cc; --bs-primary: var(--chg-terracotta); --bs-primary-rgb: var(--chg-terracotta-rgb); --bs-primary-text-emphasis: var(--chg-terracotta-dark); --bs-primary-bg-subtle: #f6e6de; --bs-primary-border-subtle: #e6c1b1; --bs-success: var(--chg-olive); --bs-success-rgb: var(--chg-olive-rgb); --bs-body-color: var(--chg-ink); --bs-body-color-rgb: 43, 38, 34; --bs-emphasis-color: #1c1815; --bs-secondary-color: rgba(43, 38, 34, 0.72); --bs-light: var(--chg-sand); --bs-light-rgb: 247, 243, 238; --bs-tertiary-bg: var(--chg-sand); --bs-tertiary-bg-rgb: 247, 243, 238; --bs-border-color: var(--chg-line); --bs-link-color: var(--chg-terracotta); --bs-link-color-rgb: var(--chg-terracotta-rgb); --bs-link-hover-color: var(--chg-terracotta-dark); --bs-link-hover-color-rgb: 140, 60, 31; --bs-focus-ring-color: rgba(var(--chg-terracotta-rgb), 0.25); } /* Buttons keep their own local vars in Bootstrap, so they need explicit overrides. */ .btn-primary { --bs-btn-bg: var(--chg-terracotta); --bs-btn-border-color: var(--chg-terracotta); --bs-btn-hover-bg: var(--chg-terracotta-dark); --bs-btn-hover-border-color: var(--chg-terracotta-dark); --bs-btn-active-bg: var(--chg-terracotta-dark); --bs-btn-active-border-color: var(--chg-terracotta-dark); --bs-btn-focus-shadow-rgb: var(--chg-terracotta-rgb); } .btn-outline-primary { --bs-btn-color: var(--chg-terracotta); --bs-btn-border-color: var(--chg-terracotta); --bs-btn-hover-bg: var(--chg-terracotta); --bs-btn-hover-border-color: var(--chg-terracotta); --bs-btn-active-bg: var(--chg-terracotta-dark); --bs-btn-active-border-color: var(--chg-terracotta-dark); --bs-btn-focus-shadow-rgb: var(--chg-terracotta-rgb); } .btn-success { --bs-btn-bg: var(--chg-olive); --bs-btn-border-color: var(--chg-olive); --bs-btn-hover-bg: var(--chg-olive-dark); --bs-btn-hover-border-color: var(--chg-olive-dark); --bs-btn-active-bg: var(--chg-olive-dark); --bs-btn-active-border-color: var(--chg-olive-dark); --bs-btn-focus-shadow-rgb: var(--chg-olive-rgb); } .form-control:focus { border-color: #d9a48f; } /* Header and footer: warm neutral instead of Bootstrap's cool grey. */ .navbar.bg-body-tertiary, footer.bg-body-tertiary { background-color: #fffdfa !important; } .navbar-brand { color: var(--chg-ink) !important; min-width: 0; } .navbar-brand .fa-connectdevelop { color: var(--chg-terracotta); } /* Typography: clearer heading hierarchy in the article body. */ h1, h2, h3, h4, h5, h6 { color: var(--bs-emphasis-color); font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: calc(1.45rem + 1.2vw); } h2 { font-size: calc(1.3rem + 0.5vw); margin-top: 2.25rem; } h3 { font-size: 1.3rem; margin-top: 1.75rem; } h4 { font-size: 1.1rem; margin-top: 1.5rem; } @media (min-width: 1200px) { h1 { font-size: 2.35rem; } h2 { font-size: 1.75rem; } } /* Don't add top margin to headings inside cards and callouts. */ .card h1, .card h2, .card h3, .card h4, .card h5, .alert h1, .alert h2, .alert h3, .alert h4, .alert h5 { margin-top: 0; } /* Inline code: warm tone instead of Bootstrap pink. */ code { color: var(--chg-terracotta-dark); } /* Long nav labels (e.g. "Encoding/Decoding") wrap instead of forcing overflow. */ #sidebarMenu .nav-link { overflow-wrap: anywhere; } /* Sidebar: neutral ink for chapters, terracotta only for the active path and hover. */ #sidebarMenu .nav { --bs-nav-link-color: var(--chg-ink); --bs-nav-link-hover-color: var(--chg-terracotta); } #sidebarMenu .nav-link:hover { color: var(--chg-terracotta); }