/* * DBTZ brand override for the Donat template's CSS custom properties. * Donat's style.css defines its palette entirely through these variables * (see :root in style.css), so redefining them here — loaded after * style.css — recolors the template without editing the 1.3MB vendor * file. Approximate brand colors sampled from the org's own logo * (public/images/brand/dbtz-logo-color.png); replace with exact brand-guide * hex values if DBTZ provides them. */ :root { --theme-color: #1B4F8C; /* DBTZ blue — primary */ --theme-color2: #E8A93A; /* DBTZ gold — secondary accent */ --theme-color3: #D6373C; /* DBTZ red — tertiary accent */ --title-color: #1B2430; --body-color: #5B6472; } /* * Accessibility: Donat's .th-btn.style3 (style.css:2430) pairs white text * with the --theme-color2 background — fine with Donat's original coral/ * orange, but DBTZ's gold (#E8A93A) is lighter, so white-on-gold measures * ~2.1:1, well under WCAG AA's 4.5:1 minimum for normal text. Dark text * measures ~7.6:1 on the same gold. On :hover the button's background * visually becomes --theme-color (blue) via an inset box-shadow wipe * (style.css:2436) while the underlying `background` stays gold — so the * text needs to flip to white at that point instead (blue is dark enough * for white text — the header's own Donate button proves this class is * the site's primary donate CTA, so this isn't a cosmetic nitpick). */ .th-btn.style3 { color: var(--title-color); } .th-btn.style3:hover { color: var(--white-color); } /* * Same gold-background contrast problem, same fix: .th-btn.style5 * (style.css:2452) also pairs white text with --theme-color2. Its :hover * already correctly switches to dark text on a white background * (style.css:2462) — only the default state needs overriding here. */ .th-btn.style5 { color: var(--title-color); } /* * Same gold-background contrast problem again: .service-card .th-btn * (style.css:16428, the Areas of Intervention "Learn More" button) keeps * the base .th-btn's white text (style.css:2390) while overriding only the * background to --theme-color2. No :hover override needed — this one has * no color-changing hover state to preserve. */ .service-card .th-btn { color: var(--title-color); } /* * Locale switcher (resources/views/components/locale-switcher.blade.php). * Lives here rather than a @push('styles') in the component itself: the * component is used from public/layout.blade.php's own -adjacent * markup, not from a child view that @extends it, so by the time Blade * reaches @stack('styles') in the component hasn't rendered yet and * its push arrives too late to be included — the stack only sees pushes * that happened earlier in the render pass. * * Sits in .header-button, which is a sibling of .menu-area-wrap (the * theme-colored pill) — not inside it — so its background is the plain * page background, not --theme-color. Text is dark-on-light accordingly. */ .locale-switcher-wrap { position: relative; } .locale-switcher-toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(27, 36, 48, 0.18); color: var(--title-color); border-radius: 30px; padding: 10px 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; transition: all 0.3s ease; } .locale-switcher-toggle:hover, .locale-switcher-toggle[aria-expanded="true"] { background: var(--theme-color); border-color: var(--theme-color); color: var(--white-color); } .locale-switcher-toggle i.fal { font-size: 15px; } .locale-switcher-toggle i.fas { font-size: 10px; } .locale-switcher-menu { min-width: 170px; border: none; border-radius: 8px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); padding: 8px; margin-top: 10px !important; } .locale-switcher-menu .dropdown-item { border-radius: 5px; padding: 8px 12px; font-size: 14px; color: var(--title-color); } .locale-switcher-menu .dropdown-item:hover, .locale-switcher-menu .dropdown-item:focus { background: rgba(27, 79, 140, 0.08); color: var(--theme-color); } .locale-switcher-menu .dropdown-item.active { background: var(--theme-color); color: var(--white-color); } @media (max-width: 1200px) { .header-button .locale-switcher-wrap { order: -1; } } /* * Thin utility strip above the address/phone/email row (public.layout's * .header-topbar) — dark ground, so the switcher needs its own light-on-dark * variant rather than the default dark-on-light one above. */ .header-topbar { background: var(--title-color); } .header-topbar .locale-switcher-toggle { border-color: rgba(255, 255, 255, 0.25); color: var(--white-color); } .header-topbar .locale-switcher-toggle:hover, .header-topbar .locale-switcher-toggle[aria-expanded="true"] { background: var(--theme-color); border-color: var(--theme-color); } /* * Bundled Font Awesome is 6.0.0-beta3, which predates the "X" (formerly * Twitter) brand glyph added in FA 6.3 — .fa-x-twitter isn't in this kit. * A plain bold "X" character stands in, sized to match the surrounding * .th-social icon glyphs. */ .th-social .icon-x { font-weight: 700; font-size: 15px; line-height: 1; } .th-social.style2 .icon-x { font-size: 17px; } /* * Donat's .brand-box grays out partner logos until hover (style.css:15482 * "filter: grayscale(9)"). DBTZ wants partner logos shown in full color * always, not just on hover. */ .brand-box img { filter: none; } /* * Same grayscale-until-hover pattern as .brand-box, on the News/blog card * thumbnails (style.css:15278 "filter: grayscale(9)"). Photos should read * in full color immediately, not only once hovered. */ .blog-card .blog-img img { filter: none; } /* * Header layout fix: .header-default .menu-area (style.css:6954) is a flex * row with no justify-content, and .menu-area-wrap's own width relies on * the non-standard `-webkit-fill-available` (style.css:6966) to push * .header-button to the right. That's unreliable on first paint — some * engines lay it out collapsed to content width, stacking .header-button * (locale switcher + Donate button) at the LEFT edge until something * forces a reflow (e.g. scrolling into the sticky state). Explicit flex * rules make the right-alignment deterministic instead of paint-order- * dependent. */ .header-default .menu-area { justify-content: space-between; } .header-default .menu-area-wrap { flex: 1 1 auto; min-width: 0; } /* * Equal-height project/donation cards. Bootstrap's row stretches each * .col-* to the tallest column, but .donation-card itself (style.css:19065) * has no height:100%, so it stays content-sized inside that taller column — * titles of very different lengths (a 4-word project vs. a 20-word one) * produce visibly mismatched card heights in the same row. Filling the * column and clamping the title to two lines keeps every card the same * size regardless of how long its title is. */ .donation-card { height: 100%; display: flex; flex-direction: column; } .donation-card .box-content { display: flex; flex-direction: column; flex: 1 1 auto; } .donation-card .box-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .donation-card .box-content > .th-btn { margin-top: auto; } /* * Donat's .testi-card (style.css:14440) reserves a huge 150-180px left * padding for a 2-up layout — fine at col-lg-5, but with exactly 3 * testimonials that only fits 2 per row (5+5=10 of 12 columns), pushing the * third onto its own row. Homepage now runs col-lg-4 (3-up) instead; this * gives the card symmetric, compact padding sized for a narrower column * rather than fighting the original wide-card spacing. */ .testi-card.testi-card--grid3 { padding: 40px 30px; } .testi-card.testi-card--grid3 .quote-icon { right: 30px; bottom: 30px; }