/* * MBULI Microcrédito — Design System Override * Remaps Finlon template CSS variables to MBULI brand palette. * Load AFTER finlon.css to take precedence. */ /* ── Google Fonts are loaded in the via @import or ── */ :root { /* Fonts */ --thm-font: 'Inter', sans-serif; --heading-font: 'Montserrat', sans-serif; --special-font: 'Dancing Script', cursive; /* Primary (replaces Finlon red #e63a27) → MBULI Blue-500 */ --thm-base: #0F72C5; --thm-base-rgb: 15, 114, 197; /* Accent (replaces Finlon yellow #f7c35f) → MBULI Sky-300 */ --thm-primary: #56CCF2; --thm-primary-rgb: 86, 204, 242; /* Secondary (replaces Finlon red-alt #ed4b4b) → MBULI Blue-600 */ --thm-secondary: #0B5CA0; --thm-secondary-rgb: 11, 92, 160; /* Special (replaces Finlon indigo #5366c2) → MBULI Blue-300 */ --thm-special: #4EA8EC; --thm-special-rgb: 78, 168, 236; /* Dark / black tones → MBULI navy */ --thm-black: #042F55; --thm-black-rgb: 4, 47, 85; --thm-black2: #021830; --thm-black2-rgb: 2, 24, 48; /* Body text */ --thm-color: #475569; --thm-color-rgb: 71, 85, 105; /* Surface / gray (replaces warm beige #f2ede9) → cool slate */ --thm-gray: #F1F5F9; --thm-gray-rgb: 241, 245, 249; /* Borders */ --thm-border-color: #E2E8F0; --thm-border-color-rgb: 226, 232, 240; /* Dark text on dark bg */ --thm-text-dark: #94A3B8; --thm-text-dark-rgb: 148, 163, 184; } /* Flat brand buttons — solid MBULI blue, clean darken-on-hover (no gradients) */ .thm-btn, a.thm-btn, button.thm-btn { background-image: none; background-color: var(--thm-base); border: 1px solid rgba(var(--thm-base-rgb), 0.18); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; color: #fff; text-align: center; white-space: normal; line-height: 1.2; } .thm-btn:hover, a.thm-btn:hover, button.thm-btn:hover { background-image: none; background-color: var(--thm-secondary); color: #fff; box-shadow: none; } @media (max-width: 575px) { .thm-btn, a.thm-btn, button.thm-btn { width: 100%; padding-left: 24px; padding-right: 24px; } } .thm-btn--dark-hover:hover { background-color: var(--thm-black); color: #fff; } /* Main nav active/hover accent */ .main-menu .main-menu__list>li>a:hover, .main-menu .main-menu__list>li.current>a { color: #0F72C5; } /* Topbar background */ .topbar { background-color: #042F55; } /* Footer bg */ .site-footer { background-color: #042F55; } /* Section title underline accent */ .section-title__tagline::before, .section-title__tagline::after { background-color: #0F72C5; } /* Preloader */ .preloader { background-color: #042F55; } /* ── Nav: PT labels are longer than the English demo's — stop word-wrap ── Finlon's 375px padding-left cleared its absolutely-positioned logo box; ours now sits in normal flex flow ([[main-menu__logo position fix]]), so that padding only ate space the contact block needs — drop it. */ @media (min-width: 1200px) { .main-menu__nav { padding-left: 32px; } .main-menu .main-menu__list>li+li { margin-left: 22px; } .main-menu .main-menu__list>li>a { font-size: 14px; white-space: nowrap; } } @media (max-width: 1199px) { .main-menu .main-menu__list>li>a { white-space: normal; } } /* Phone block (icon + number): Finlon hides it below 1581px, so it vanishes on the most common laptop widths (1366–1536). The nav links + search + CTA + this block can't all fit below ~1400px without crowding (PT labels run wider than the English demo's), so 1400px is the lowest width that shows it without anything overlapping/wrapping. Finlon also only gives it breathing room (`.main-menu__btn` margin-right) past 1581px and lets the flex row shrink/wrap it — pin its width and stop "+244 900 000 000" wrapping across three lines. */ @media (min-width: 1400px) { .main-menu__contact { display: flex; flex-shrink: 0; margin-left: 24px; } .main-menu__contact__text, .main-menu__contact__text strong { white-space: nowrap; } } /* Logo image: fixed px (not %) — percentage height/max-height never resolves on an nested inside an inline , so the inline width="50%"/height="70%" it had before just stretched it out of proportion. width: auto + a fixed height keeps the mark's real aspect ratio and fits the badge at every breakpoint (120px badge desktop, 80px badge below 1200px) */ .main-menu__logo img { width: auto; height: 84px; } @media (max-width: 1199px) { .main-menu__logo img { height: 56px; } } /* Logo box: Finlon's `top: -40px` straddles the box across both bars (white box bleeding into the blue topbar). MBULI wants a clean split — topbar stays solid blue (location/contacts only), white bar holds the logo + menu — so pin the box inside the white bar instead. */ @media (min-width: 1200px) { .main-menu__logo { position: relative; top: auto; left: auto; } } /* Documentos e Formulários: present each file as a card — icon, title, optional description — with a clearly clickable download button on the right, instead of the plain text link that used to float and overlap wrapped PT labels */ .service-details__list .document-list__item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding: 18px 20px; background-color: var(--thm-gray); border-radius: 12px; font-weight: 400; line-height: 1.5; } .service-details__list .document-list__item+.document-list__item { margin-top: 14px; } .document-list__info { display: flex; align-items: center; gap: 14px; min-width: 0; } .document-list__icon { flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #fff; color: var(--thm-base); font-size: 18px; } .document-list__text { min-width: 0; } .document-list__name { display: block; font-size: 16px; font-weight: 600; color: var(--thm-black); } .document-list__desc { margin: 4px 0 0; font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--thm-color); } .document-list__download { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 30px; background-color: var(--thm-base); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; transition: all 300ms ease; } .document-list__download:hover { background-color: var(--thm-black); color: #fff; } /* Transparência/Governação service cards: corpo is raw rich-text rendered into a
(not the

the Finlon template expects for .service-card__text), so it carries no bottom margin and sits flush against the download button below it — text and card controls look glued together. Match the spacing its .service-card-two__text sibling already has. */ .service-card__text { display: block; margin: 0 0 19px; } /* News sidebar: article thumbnails are full-size (~600x400) images reused in a small-thumbnail slot — constrain so they stop overlapping the title text */ .blog-sidebar__post__image { flex-shrink: 0; } .blog-sidebar__post__image img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; } /* News grid: titles/summaries vary in length, so cards grow to different heights and the row breaks alignment — stretch every card to the column's height (Bootstrap rows already stretch columns per flex line) and pin the "Ler mais" link to the bottom so every row of cards lines up evenly */ .blog-card:not(.blog-card--details) { display: flex; flex-direction: column; height: 100%; } .blog-card:not(.blog-card--details) .blog-card__content { display: flex; flex-direction: column; flex: 1 1 auto; } .blog-card:not(.blog-card--details) .blog-card__text { flex: 1 1 auto; } .blog-card:not(.blog-card--details) .blog-card__link { margin-top: auto; }