after the badge and wraps the link in one of its own; neither should show up as spacing. */ .bi-card > p:empty { display: none; } .bi-card > p:last-child { margin: auto 0 0; } /* Cards are equal height, so the link sits on the card's bottom padding line even if one card ever carries an extra line of copy. */ .bi-card a.bi-card-link { color: #6d5cfc; font-weight: 600; text-decoration: none; font-size: 13.5px; line-height: normal; margin-top: auto; } .bi-card a.bi-card-link .bi-card-arrow { display: inline-block; margin-left: 8px; } .bi-card a.bi-card-link:hover { color: #ffffff; } .bi-card a.bi-card-link-green { color: #28c8b4; } .bi-card a.bi-card-link-green:hover { color: #ffffff; } @media (max-width: 980px) { .bi-cards-heading { font-size: 28px; margin-bottom: 40px; } } /* ---------- EXECUTIVE INTERIM MANAGEMENT PAGE ---------- Measured off the two Figma frames: the three cards span 832/1175 of the frame (= 1040px), each 330px wide with a 25px gutter. Cards keep their natural height in the design, so the row must not use make_equal. */ .bi-cm-hero h1 { margin: 0 0 21px; padding: 0; text-shadow: none; } .bi-exp-heading h2 { margin: 0 0 15px; padding: 0; text-shadow: none; } .bi-exp-card h3 { margin: 0 0 18px; padding: 0; text-shadow: none; } .bi-exp-card p { margin: 0; padding: 0; } /* The dot sits in its own Divi image module; Divi's default 7px bottom margin is far tighter than the reference. */ .bi-exp-row .et_pb_image, .bi-exp-row2 .et_pb_image { margin-bottom: 18px !important; } /* Keep the text measure that produces the reference line breaks even though the padding is 28px: the block overhangs the right gutter, which is invisible on ragged-right text, while the left edge stays where the design puts it. */ .bi-exp-card h3, .bi-exp-card p { width: 279px; max-width: none; } /* The Consulting card is the one measure that disagrees: 279px puts an extra word on line 2. Its reference wrap only exists at 277px. */ .bi-exp-card-narrow p { width: 277px; } /* make_equal stretches the column; let the card fill it. */ .bi-exp-row .et_pb_column, .bi-exp-row2 .et_pb_column { display: flex; flex-direction: column; } /* Divi's 1_3/1_2 presets carry a 3% gutter; the Figma gutter is a flat 25px. */ @media (min-width: 981px) { .bi-exp-row.et_pb_row > .et_pb_column { width: calc((100% - 50px) / 3); margin-right: 25px; } .bi-exp-row2.et_pb_row > .et_pb_column { width: calc((100% - 25px) / 2); margin-right: 25px; } .bi-exp-row.et_pb_row > .et_pb_column:last-child, .bi-exp-row2.et_pb_row > .et_pb_column:last-child { margin-right: 0; } } /* ---------- INNER PAGE HEROES ---------- Figma caps each hero paragraph independently of the H1 above it (the H1 is nowrap in the design), so the cap has to land on the
, not the module -
putting it on the module clips the heading. Widths per Figma:
3:19 = 620, 5:19 = 620, 8:46 = 680, 3:24 = 760. */
.bi-hero-copy .et_pb_text_inner > p {
margin-left: auto;
margin-right: auto;
}
.bi-hero-copy-620 .et_pb_text_inner > p { max-width: 620px; }
.bi-hero-copy-680 .et_pb_text_inner > p { max-width: 680px; }
.bi-hero-copy-760 .et_pb_text_inner > p { max-width: 760px; }
/* Figma 2:3: the heading block is 572 wide (h2 on one line) and only the
paragraph below it is capped at 520. */
.bi-cta-heading .et_pb_text_inner > p {
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
.bi-cta-eyebrow {
line-height: normal;
}
/* Contact section is styled entirely with native Divi module settings
(Row: background/border/radius/padding/box-shadow, Contact Form:
Fields + Inputs border + Button groups) so it stays editable in the
Divi Builder. Deliberately no CSS overrides here. */
/* ---------- GLOBAL HEADER / FOOTER (Figma 1:3, 2:18) ----------
The navbar is 88px tall around a 36px logo and the footer 100px around a
30px one; the site uses image logos that are taller than the Figma text
lockups, which is what was pushing both bars over height. */
.et-l--footer .et_pb_image img {
max-height: 30px;
width: auto;
}
/* Divi's dark background_layout hard-codes menu links to white, and paints the
current page's item differently again. Figma uses one flat colour per bar. */
body .et-l--footer .et_pb_menu a,
body .et-l--footer .et_pb_menu ul li.current-menu-item a {
color: #b3afdb !important;
}
/* Divi's 1.7em menu line-height made the footer row 40px tall against Figma's
30px logo lockup, pushing the bar to 112px. */
.et-l--footer .et_pb_menu .et-menu > li > a {
line-height: normal;
}
.et-l--header .et_pb_menu a,
.et-l--header .et_pb_menu ul li.current-menu-item a {
color: #161428 !important;
}
/* Social badges: 36px / radius 8 in the header (1:13), 32px / radius 6 in the
footer (2:28). The footer one was 40px, which is what still had that bar
over height after the logo was fixed. */
.et-l--header .et_pb_social_media_follow li a.icon,
.et-l--header .et_pb_social_media_follow li a.icon:before {
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 8px;
}
.et-l--footer .et_pb_social_media_follow li a.icon,
.et-l--footer .et_pb_social_media_follow li a.icon:before {
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 6px;
}
/* Divi adds an 8px bottom margin to each social item, which kept the footer
row at 40px even once the badge was 32px. */
.et-l--header .et_pb_social_media_follow li,
.et-l--footer .et_pb_social_media_follow li {
margin-bottom: 0;
}
/* Figma nav gaps: 40px in the header (1:7), 32px in the footer (2:22). */
.et-l--header .et_pb_menu .et-menu > li {
padding-left: 20px;
padding-right: 20px;
}
.et-l--footer .et_pb_menu .et-menu > li {
padding-left: 16px;
padding-right: 16px;
}
/* ---------- FROZEN LINE BREAKS ----------
Text shaping is not identical across renderers: Figma is ~2% tighter than
Chrome, and Chrome on one platform differs from Chrome on another. Tuning a
measure until it wrapped correctly here therefore produced DIFFERENT line
endings on another machine. So the desktop line breaks are explicit
s in
the content instead of being left to the wrapping algorithm.
`width: max-content` is what makes that reliable: each block becomes exactly
as wide as its longest frozen line, so a browser that renders the text a few
percent wider still cannot introduce an extra wrap. Below the desktop
breakpoint the
s are switched off and the copy reflows normally. */
@media (min-width: 981px) {
#main-content p:has(br) {
width: max-content;
max-width: none;
}
.et_pb_text_align_center p:has(br),
.bi-hero-copy p:has(br),
.bi-cta-heading p:has(br),
.bi-hero .et_pb_header_content_wrapper p:has(br) {
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 980px) {
#main-content p br {
display: none;
}
}
/* ---------- STICKY FOOTER ----------
Divi nests the footer INSIDE #et-main-area:
#et-boc > header + #et-main-area( #main-content + footer )
so #main-content is what must absorb the slack, not #et-main-area -
otherwise the empty space lands *below* the footer. */
#page-container #et-boc {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#et-boc > #et-main-area {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
#et-main-area > #main-content {
flex: 1 0 auto;
}
#et-main-area > .et-l--footer {
margin-top: auto;
flex: 0 0 auto;
}
/* Divi paints #main-content white by default - that was the white bar */
#main-content {
background-color: transparent;
}
/* ---------- CONTACT PAGE ----------
The sticky-footer rules make #main-content absorb the leftover viewport
height, which parked the (short) contact section against the header with
all the slack below it. Centre it in that space - a no-op on long pages. */
body.page-id-45 #main-content {
display: flex;
flex-direction: column;
justify-content: center;
}
/* Figma 7:2: the intro band is 1312 wide (1440 less 64px gutters) and splits
784 / 48 / 480, which puts the paragraph at 560. Divi's default 1080px row
with an even split was giving it 510. */
@media (min-width: 981px) {
.bi-ba-intro.et_pb_row {
/* Figma has this row at 1312 (1440 less 64px gutters) but the portfolio
row below it at 1386, which left the two 37px out of alignment on
screen. Matched to the portfolio row so the copy and the purple card
line up with the cards. The gutter is kept in the calc so that below
the design width the copy does not sit hard against the window edge. */
width: calc(100% - 54px);
max-width: 1386px;
display: flex;
align-items: flex-start;
}
/* Divi clearfixes rows with :before/:after; in a flex row those turn into
stray flex items. */
.bi-ba-intro.et_pb_row:before,
.bi-ba-intro.et_pb_row:after {
display: none;
}
/* This is a three-column Divi row and the third column is empty. It was
eating the `:last-child` sizing below (so the card never got its 480 and
kept Divi's 389), and an empty 480px float wrapped onto its own line,
which is the dead band under the row. */
.bi-ba-intro.et_pb_row > .et_pb_column_empty {
display: none;
}
.bi-ba-intro.et_pb_row > .et_pb_column:first-child {
/* Grows into whatever the card leaves, but never shrinks below the
frozen line breaks - so the card gives way first, not the copy. */
flex: 1 1 auto;
width: auto;
margin-right: 48px;
}
.bi-ba-intro.et_pb_row > .et_pb_column:nth-child(2) {
flex: 0 1 480px;
width: 480px;
min-width: 0;
margin-right: 0;
}
}
/* Figma 8:6 - the Business Angel CTA paragraph is 560 wide, not the 520 the
other pages use. */
.bi-cta-heading-560 .et_pb_text_inner > p {
max-width: 560px;
}
/* Divi rows are `width: 80%`, so a Divi `max_width` can only CAP a row - it can
never make one wider than 80% of the viewport. Both of these rows are wider
than that in the design, so the width has to be set here too. */
@media (min-width: 981px) {
.bi-testimonial-row.et_pb_row {
width: calc(100% - 144px);
max-width: 1296px;
}
.bi-portfolio.et_pb_row {
width: calc(100% - 54px);
max-width: 1386px;
}
}
/* ---------- PORTFOLIO ROW ----------
Figma puts the five cards at 18.45% with 1.93% gaps (a 9.6:1 card-to-gap
ratio). Divi's gutter presets only offer 17.6%/3% (5.9:1), so the gaps come
out ~55% too wide. Override just this row; mobile keeps Divi's stacking. */
@media (min-width: 981px) {
/* Figma 5:37: five 258px cards with flat 24px gaps in a 1386px row. */
.bi-portfolio.et_pb_row > .et_pb_column {
width: calc((100% - 96px) / 5);
margin-right: 24px;
}
/* Figma 4:6: three 416px testimonials with flat 24px gaps in a 1296px row. */
.bi-testimonial-row.et_pb_row > .et_pb_column {
width: calc((100% - 48px) / 3);
margin-right: 24px;
}
.bi-testimonial-row.et_pb_row > .et_pb_column:last-child {
margin-right: 0;
}
.bi-portfolio.et_pb_row > .et_pb_column:last-child {
margin-right: 0;
}
}
/* ---------- MOBILE: HEADER & FOOTER ----------
Keep Divi's own column layout (rewriting it with flex blew up the logo and
pushed the menu off-screen). Only correct the specific problems: an
oversized logo, the social icon not sitting at the right edge, and the
footer nav collapsing into a hamburger where plain links read better. */
@media (max-width: 980px) {
.et-l--header .et_pb_image img,
.et-l--footer .et_pb_image img {
max-width: 140px;
height: auto;
}
.et-l--header .et_pb_social_media_follow,
.et-l--footer .et_pb_social_media_follow {
text-align: right;
margin-bottom: 0;
}
/* footer navigation: wrapped links, not a hamburger */
.et-l--footer .et_pb_menu .et_mobile_nav_menu { display: none; }
.et-l--footer .et_pb_menu .et_pb_menu__menu { display: block !important; }
.et-l--footer .et_pb_menu__menu > nav > ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px 16px;
}
.et-l--footer .et_pb_menu__menu > nav > ul > li {
margin: 0;
float: none;
}
.et-l--footer .et_pb_menu__menu > nav > ul > li a { font-size: 13px; }
}
/* keep long content (e-mail addresses) inside its column on small screens */
@media (max-width: 980px) {
.et_pb_blurb_description,
.et_pb_blurb_description p {
overflow-wrap: anywhere;
}
}
/* Phones: stack the footer (logo / links / social) instead of squeezing the
nav into a ~210px middle column. */
@media (max-width: 767px) {
/* Divi renders this row as `display:flex`, so 100%-width children still sit
side by side - drop it back to block so they stack. */
.et-l--footer .et_pb_row--with-menu {
display: block !important;
}
.et-l--footer .et_pb_row--with-menu > .et_pb_column {
width: 100% !important;
margin: 0 0 16px !important;
float: none;
text-align: center;
}
.et-l--footer .et_pb_row--with-menu > .et_pb_column:last-child {
margin-bottom: 0 !important;
}
.et-l--footer .et_pb_image,
.et-l--footer .et_pb_social_media_follow {
text-align: center;
}
.et-l--footer .et_pb_image img { margin: 0 auto; }
.et-l--footer .et_pb_menu__menu > nav > ul { justify-content: center; }
}
/* Mobile header: Divi renders the row as flex with 20/60/20 columns and puts
the logo module at width:75%;text-align:center inside the narrow first
column, which squeezes the logo and strands the hamburger mid-row.
Size the three parts to their content instead: logo left, menu + social right. */
@media (max-width: 980px) {
.et-l--header .et_pb_row--with-menu > .et_pb_column {
width: auto !important;
margin: 0 !important;
}
.et-l--header .et_pb_row--with-menu > .et_pb_column:nth-child(1) { flex: 0 0 auto; }
.et-l--header .et_pb_row--with-menu > .et_pb_column:nth-child(2) { flex: 1 1 auto; }
.et-l--header .et_pb_row--with-menu > .et_pb_column:nth-child(3) { flex: 0 0 auto; }
.et-l--header .et_pb_image {
width: auto !important;
text-align: left;
margin-bottom: 0;
}
.et-l--header .et_pb_image img { max-width: 130px; }
/* hamburger hugs the right side of its column. The menu module is
menu_style="centered", so float loses - align the container instead. */
.et-l--header .et_pb_menu .et_pb_menu_inner_container,
.et-l--header .et_pb_menu .et_pb_menu__wrap {
text-align: right;
justify-content: flex-end;
}
.et-l--header .et_pb_menu .et_mobile_nav_menu {
float: none;
display: inline-block;
margin: 0;
}
.et-l--header .et_pb_menu,
.et-l--header .et_pb_menu .et_pb_menu_inner_container { margin-bottom: 0; }
.et-l--header .et_pb_social_media_follow { margin-left: 12px; }
.et-l--header .et_pb_social_media_follow li { margin-bottom: 0; }
}
/* ---------- HEADER SIZE (Blendi: header is taller than the design) ----------
The logo image was rendering ~45px tall and every header module carried
Divi's default bottom margin, pushing the bar to 116px vs the design's ~79px. */
.et-l--header .et_pb_image img {
/* Figma 1:3 puts a 36px logo in an 88px bar; this was 52px, which is what
made the header 104px tall. */
max-height: 36px;
width: auto;
}
/* Divi centres the logo inside its 20% column (width:75%;text-align:center),
which indented it; and the social module sat left inside the last column. */
@media (min-width: 981px) {
.et-l--header .et_pb_image {
width: auto !important;
text-align: left;
}
.et-l--header .et_pb_social_media_follow {
text-align: right;
}
}
.et-l--header .et_pb_image,
.et-l--header .et_pb_menu,
.et-l--header .et_pb_menu .et_pb_menu_inner_container,
.et-l--header .et_pb_social_media_follow,
.et-l--header .et_pb_social_media_follow li {
margin-bottom: 0 !important;
}
.et-l--header .et_pb_row {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/* ---------- CONTACT PAGE ----------
Blendi: "bane ma ne mes kontaktin se krejt nalt koka ngjit" - the block was
pinned to the top with all the slack below it. #main-content already grows
(sticky footer), so just centre its content. */
.page-id-45 #main-content {
display: flex;
flex-direction: column;
justify-content: center;
}