/* * OT Brand theming (#161). * * Each theme is a self-contained block scoped to [data-ot-theme=""] on the * element. To add a theme: add an entry to src/themes.ts and a block here. * No Nunjucks changes are needed — brand elements show/hide purely via CSS. * * The `default` theme has no overrides: the app renders exactly as vanilla * Bootstrap, so existing users are visually unaffected. */ /* Montserrat — vendored locally by scripts/download-assets.sh into public/fonts. Gotham is the preferred OT typeface; if licensed, swap the src below only. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/montserrat-400.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/montserrat-700.woff2') format('woff2'); } /* The OT wordmark image in the navbar brand is hidden by default; only the ot-brand theme reveals it (and hides the text app name). */ .navbar-brand .ot-wordmark { display: none; } /* ── OT Brand ────────────────────────────────────────────────────────────── Optimistic, fresh, inviting — light and open, grounded by the black logo. */ [data-ot-theme="ot-brand"] { /* Secondary palette (style guide, March 2017) for future component styling. */ --ot-yellow: #FFE384; /* Sun */ --ot-green: #8DCFAF; /* Eco */ --ot-tomato: #F47B6C; /* Earth */ --ot-plum: #BA81A8; --ot-sky: #A5D3EE; --ot-amber: #EDAF44; /* Eco Green fails contrast for white text (~2.3:1). A darkened variant is used for links/text so normal-text pairings clear WCAG AA (4.5:1). */ --ot-green-accessible: #1f7a52; --bs-primary: var(--ot-green); --bs-primary-rgb: 141, 207, 175; --bs-link-color: var(--ot-green-accessible); --bs-link-color-rgb: 31, 122, 82; --bs-link-hover-color: #155c3d; --bs-body-font-family: 'Montserrat', Arial, sans-serif; } /* Headings use the bold weight of the brand font. */ [data-ot-theme="ot-brand"] h1, [data-ot-theme="ot-brand"] h2, [data-ot-theme="ot-brand"] h3, [data-ot-theme="ot-brand"] h4, [data-ot-theme="ot-brand"] h5, [data-ot-theme="ot-brand"] h6, [data-ot-theme="ot-brand"] .navbar-brand { font-weight: 700; } /* Navbar: white background, black text and links, wordmark visible. Bootstrap doesn't expose a custom property for the navbar background, so it's overridden directly, scoped to the theme for specificity. */ [data-ot-theme="ot-brand"] .navbar.bg-dark { background-color: #ffffff !important; border-bottom: 1px solid #e0e0e0; } [data-ot-theme="ot-brand"] .navbar.navbar-dark .navbar-brand, [data-ot-theme="ot-brand"] .navbar.navbar-dark .nav-link, [data-ot-theme="ot-brand"] .navbar.navbar-dark .small, [data-ot-theme="ot-brand"] .navbar.navbar-dark { color: #000000 !important; } [data-ot-theme="ot-brand"] .navbar-brand .app-name { display: none; } [data-ot-theme="ot-brand"] .navbar-brand .ot-wordmark { display: inline-block; } /* Primary buttons: black text on Eco Green (~8.5:1, passes AA). */ [data-ot-theme="ot-brand"] .btn-primary { --bs-btn-bg: var(--ot-green); --bs-btn-border-color: var(--ot-green); --bs-btn-color: #000000; --bs-btn-hover-bg: #7bbf9d; --bs-btn-hover-border-color: #7bbf9d; --bs-btn-hover-color: #000000; --bs-btn-active-bg: #6aae8c; --bs-btn-active-border-color: #6aae8c; --bs-btn-active-color: #000000; } /* Outline buttons in the navbar inherit `btn-outline-light` (white text/border), which is invisible on the white navbar background. Override to dark outline. */ [data-ot-theme="ot-brand"] .btn-outline-light { --bs-btn-color: #212529; --bs-btn-border-color: #212529; --bs-btn-hover-bg: #212529; --bs-btn-hover-color: #ffffff; --bs-btn-active-bg: #000000; --bs-btn-active-color: #ffffff; } /* Active / highlight states use Sun Yellow with black text (decorative bg only). */ [data-ot-theme="ot-brand"] .nav-pills .nav-link.active, [data-ot-theme="ot-brand"] .list-group-item.active { background-color: var(--ot-yellow); border-color: var(--ot-yellow); color: #000000; }