/* ============================================================ HEADER / MAIN MENU — Home page design (Figma node 458:9513) Layout: Logo · [Products Solutions About Us] · Search · Contact · Lang Target: Betheme header template
Selectors prefixed with #mfn-header-template to beat builder CSS. TWO-STATE behaviour: • body.home AND NOT scrolled -> overlay: transparent header, LIGHT text • everything else (inner pages, or body.mfn-header-scrolled) -> solid white, DARK text ============================================================ */ :root{ --tr-pill: 50px; /* rounded-pill radius (Figma) */ --tr-ctl-h: 40px; /* search + button height (Figma) */ --tr-btn-bg: #3b9dc4; /* contact button fill (Figma home) */ --tr-btn-bg-h: #28609a; /* contact button hover */ --tr-search-bg: #ffffff; --tr-search-bd: #c8c7c9; /* Figma search stroke */ --tr-search-icon: #c8c7c9; --tr-nav-light: #f4f4f4; /* over dark hero (Figma header-menu) */ --tr-nav-dark: #3b3a3c; /* on white header (Figma dark-logo) */ --tr-nav-active: #3b9dc4; /* hover / current-page item (accent) */ } /* ------------------------------------------------------------------ */ /* 0. Logo — brand PRIMARY logo (from Figma brand book). */ /* Two-state for the overlay header: light variant over the dark */ /* hero (home, not scrolled), dark variant on white pages/scrolled. */ /* ------------------------------------------------------------------ */ #mfn-header-template .logo-wrapper{ display:inline-block; height:40px; width:192px; /* 1094:228 aspect @ 40px tall */ background:url("/wp-content/uploads/assets/logo-primary-dark.svg") left center / contain no-repeat; } #mfn-header-template .logo-wrapper img{ display:none !important; } /* hide builder logo; keep the link */ body.tr-hero-overlay:not(.mfn-header-scrolled) #mfn-header-template .logo-wrapper{ background-image:url("/wp-content/uploads/assets/logo-primary-light.svg"); } /* ------------------------------------------------------------------ */ /* 1. Nav links — Montserrat 16/600 UPPERCASE (Figma header-menu) */ /* DEFAULT : semibold, #3b3a3c on white / #f4f4f4 over hero (§6) */ /* HOVER / ACTIVE : text colour does NOT change — an accent #3b9dc4 */ /* underline (2px) grows in under the text, center-out (Figma */ /* footer-btn Default[1px] -> hover[full width], SMART_ANIMATE). */ /* ------------------------------------------------------------------ */ #mfn-header-template .mfn-header-menu{ align-items:center; } #mfn-header-template .mfn-header-menu > li.mfn-menu-li > a.mfn-menu-link{ position: relative; font-family: var(--tr-font); font-size: var(--tr-fs-nav); font-weight: 600; /* Figma: semibold */ text-transform: uppercase; /* Figma: textCase UPPER */ color: var(--tr-nav-dark); /* default = dark (inner pages) */ } /* growing accent underline — spans just the text (inset by the 7px link padding). Grows LEFT-to-RIGHT (transform-origin:left). EXCLUDES the language switcher trigger (.pll-parent-menu-item / .lang-item) — that ul also carries .mfn-header-menu, so it would otherwise inherit the underline. */ #mfn-header-template .mfn-header-menu > li.mfn-menu-li:not(.pll-parent-menu-item):not(.lang-item) > a.mfn-menu-link::after{ content:""; position:absolute; left:7px; right:7px; bottom:7px; height:2px; background: var(--tr-nav-active); /* Reveal left-to-right with clip-path (NOT transform:scaleX — scaling a 2px line resamples it on the GPU and makes it look thicker mid-animation). The line is always a true 2px; we just unclip it from the right. */ clip-path: inset(0 100% 0 0); transition: clip-path .35s cubic-bezier(.4,0,.2,1); } #mfn-header-template .mfn-header-menu > li.mfn-menu-li:not(.pll-parent-menu-item):not(.lang-item):hover > a.mfn-menu-link::after, #mfn-header-template .mfn-header-menu > li.mfn-menu-li:not(.pll-parent-menu-item):not(.lang-item).current-menu-item > a.mfn-menu-link::after, #mfn-header-template .mfn-header-menu > li.mfn-menu-li:not(.pll-parent-menu-item):not(.lang-item).current-menu-ancestor > a.mfn-menu-link::after{ clip-path: inset(0 0 0 0); } #mfn-header-template .mfn-header-menu > li.mfn-menu-li .mfn-menu-subicon{ color:currentColor; } /* ------------------------------------------------------------------ */ /* 2. Spacing — even gaps to match Figma (nav items + search/contact/lang)*/ /* ------------------------------------------------------------------ */ /* tighten nav item spacing (Betheme links carry wide padding) -> ~13px gaps */ #mfn-header-template ul.mfn-header-mainmenu > li.mfn-menu-li > a.mfn-menu-link{ padding-left: 7px; padding-right: 7px; } /* search sits last in the menu column */ #mfn-header-template .mfn-header-menu > li.trsys-search-li{ order:80; margin-left: 6px; } /* gaps between the separate header columns: …search | contact | language. Builder columns already have natural spacing; nudge to ~14px even. */ #mfn-header-template .mcb-column:has(a.title_link[href*="/contact"], a.title_link[href*="/kontakti"]){ margin-left: 4px !important; } #mfn-header-template .mcb-column:has(ul[id*="language_switcher"]){ margin-left: -2px !important; width: auto !important; /* fit content — longer BG label (Български) was clipped by the fixed custom width */ flex: 0 0 auto !important; overflow: visible !important; } #mfn-header-template ul[id*="language_switcher"] > li > a{ white-space: nowrap; } /* ------------------------------------------------------------------ */ /* 3. Search field — white rounded pill, magnifier icon */ /* ------------------------------------------------------------------ */ #mfn-header-template .trsys-search-li .trsys-search-form{ display:flex; align-items:center; height: var(--tr-ctl-h); width: 220px; padding: 0 16px; background: var(--tr-search-bg); border: 1px solid var(--tr-search-bd); border-radius: var(--tr-pill); box-sizing: border-box; transition: background-color .25s ease; } #mfn-header-template .trsys-search-li .trsys-search-btn{ background:none; border:0; padding:0; margin:0 8px 0 0; display:flex; align-items:center; align-self:center; cursor:pointer; color: var(--tr-search-icon); } /* Input: auto-height (just the text line), no padding/margin from Betheme, so the flex row vertically centers the text + caret. (Betheme forces padding:10px 0 + height:38px which pushed the text to the top.) */ #mfn-header-template .trsys-search-li .trsys-search-input{ border:0 !important; background:transparent !important; outline:none; box-shadow:none; width:100%; height:auto !important; min-height:0 !important; padding:0 !important; margin:0 !important; line-height:1.2 !important; align-self:center !important; font-family: var(--tr-font); font-size:15px; color: var(--tr-ink); } #mfn-header-template .trsys-search-li .trsys-search-input::placeholder{ color: var(--tr-search-icon); } /* ------------------------------------------------------------------ */ /* NOTE: matched by href because the builder gives the two language */ /* headers different element ids. BG and EN no longer share a stem */ /* (/en/contacts/ vs /kontakti/), so BOTH must be listed - matching */ /* only "/contact" silently drops the pill on the BG header. */ /* 4. CONTACT button — rounded #3b9dc4 pill */ /* IMPORTANT: the builder paints the blue background + 3px radius on */ /* the COLUMN WRAPPER (.mcb-column-inner), NOT the . So we round */ /* the wrapper that contains the /contact link (via :has()). */ /* ------------------------------------------------------------------ */ #mfn-header-template .mcb-column-inner:has(a.title_link[href*="/contact"], a.title_link[href*="/kontakti"]){ border-radius: var(--tr-pill) !important; background-color: var(--tr-btn-bg) !important; padding: 9px 30px !important; display: inline-flex !important; align-items: center; transition: background-color .2s ease; } /* Hover = Figma gradient (node 340:22892): horizontal, #0e2034 (left) -> #28609a (right) */ #mfn-header-template .mcb-column-inner:has(a.title_link[href*="/contact"], a.title_link[href*="/kontakti"]):hover{ background-image: linear-gradient(to right, #0e2034 0%, #28609a 100%) !important; } /* Clicked / active state = Figma primary-btn "Variant3" (node 1531:27803): same gradient + a soft blue glow (drop-shadow 0/0 blur 11, #1f5e81). Applies while pressed, AND when the contact page is the current page (page-id-130 = Contacts BG, page-id-19 = Contacts EN). */ #mfn-header-template .mcb-column-inner:has(a.title_link[href*="/contact"], a.title_link[href*="/kontakti"]):active, #mfn-header-template .mcb-column-inner:has(a.title_link[href*="/contact"]:active, a.title_link[href*="/kontakti"]:active), #mfn-header-template .mcb-column-inner:has(a.title_link[href*="/contact"]:focus, a.title_link[href*="/kontakti"]:focus), body.page-id-130 #mfn-header-template .mcb-column-inner:has(a.title_link[href*="/contact"], a.title_link[href*="/kontakti"]), body.page-id-19 #mfn-header-template .mcb-column-inner:has(a.title_link[href*="/contact"], a.title_link[href*="/kontakti"]){ background-image: linear-gradient(to right, #0e2034 0%, #28609a 100%) !important; box-shadow: 0 0 12px rgba(31,94,129,.85) !important; } #mfn-header-template .mcb-item-heading-inner h6.title{ margin:0; line-height:1.1; } #mfn-header-template a.title_link[href*="/contact"], #mfn-header-template a.title_link[href*="/kontakti"]{ color:#f4f4f4 !important; font-family: var(--tr-font); font-size: var(--tr-fs-nav); font-weight: 500; text-decoration: none !important; white-space: nowrap; background: none !important; } /* ------------------------------------------------------------------ */ /* 5. Language switcher */ /* ------------------------------------------------------------------ */ #mfn-header-template .mfn-header-menu > li.lang-item > a, #mfn-header-template .lang-item > a, #mfn-header-template ul[id*="language_switcher"] > li > a{ font-family: var(--tr-font); font-size: var(--tr-fs-nav); color: #6c6b6d; /* Figma component trigger grey */ text-transform: uppercase; /* ENGLISH / БЪЛГАРСКИ */ display:inline-flex; align-items:center; gap:0; } /* flag → text gap (Figma ~7px) */ #mfn-header-template .lang-item img, #mfn-header-template ul[id*="language_switcher"] img{ width:18px; height:auto; border-radius:2px; margin-right:7px; } /* ---- §5b. Submenu icon = Betheme's NATIVE "Submenu Icon" option ---- The element is already output (). Its configured glyph icon-down-open-1 (\f004) is missing from the mfn icon font (renders 0px), so remap it to a valid down-chevron from the SAME font. Then size/space/colour per Figma. Applies to EN + BG language buttons. */ #mfn-header-template ul[id*="language_switcher"] > li > a .mfn-menu-label-wrapper{ display:inline-flex; align-items:center; } #mfn-header-template ul[id*="language_switcher"] > li > a .mfn-menu-subicon{ display:inline-flex; align-items:center; margin-left:11px; line-height:1; } #mfn-header-template ul[id*="language_switcher"] > li > a .mfn-menu-subicon i{ font-size:13px; line-height:1; color:currentColor; } #mfn-header-template ul[id*="language_switcher"] > li > a .mfn-menu-subicon i:before{ content:'\e867'; /* icon-down-open — valid mfn glyph */ } /* chevron flips up when the dropdown is open (on hover) */ #mfn-header-template ul[id*="language_switcher"] > li:hover > a .mfn-menu-subicon i{ transform: rotate(180deg); } /* ---- §5c. Language DROPDOWN panel (Figma header-menu-language-component) ---- White rounded card + soft shadow; active language = bold blue, other = dark; uppercase labels with flag; inset divider between items. */ #mfn-header-template ul[id*="language_switcher"] ul.mfn-submenu{ background:#ffffff !important; border:0 !important; border-radius:5px !important; /* Figma: soft symmetric blue halo (#1f5e84, offset 0/0, blur 11) — NOT a downward navy shadow */ box-shadow:0 0 13px rgba(31,94,132,.28) !important; padding:4px 0 !important; min-width:163px !important; /* Figma card width */ width:max-content !important; /* fit content (was rendering ~220px too wide) */ left:0 !important; right:auto !important; /* Figma: dropdown sits under the trigger (left-aligned) */ } #mfn-header-template ul[id*="language_switcher"] ul.mfn-submenu > li.lang-item > a{ display:flex !important; align-items:center; padding:10px 14px !important; font-family:var(--tr-font); font-size:16px; font-weight:400; text-transform:uppercase; color:#3b3a3c !important; /* other language */ } #mfn-header-template ul[id*="language_switcher"] ul.mfn-submenu > li.lang-item.current-lang > a{ color:#1f5e84 !important; font-weight:600 !important; /* active language */ } #mfn-header-template ul[id*="language_switcher"] ul.mfn-submenu img{ width:18px; height:auto; margin-right:8px; border-radius:2px; } /* inset divider between items (Figma: 136px line in 163px card) */ #mfn-header-template ul[id*="language_switcher"] ul.mfn-submenu > li.lang-item:not(:last-child){ position:relative; } #mfn-header-template ul[id*="language_switcher"] ul.mfn-submenu > li.lang-item:not(:last-child)::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:1px; background:#ececec; } /* ================================================================== */ /* 6. STATE: Home + top of page -> overlay, LIGHT text */ /* ================================================================== */ body.tr-hero-overlay:not(.mfn-header-scrolled) #mfn-header-template{ background: transparent !important; box-shadow:none; } /* The builder paints the bar's background on inner elements — clear them so the hero shows through. NO scrim/veil: the menu sits directly on the hero (Figma). */ body.tr-hero-overlay:not(.mfn-header-scrolled) #mfn-header-template .mfn-header-tmpl-builder, body.tr-hero-overlay:not(.mfn-header-scrolled) #mfn-header-template [class*="mcb-section"], body.tr-hero-overlay:not(.mfn-header-scrolled) #mfn-header-template [class*="mcb-wrap"], body.tr-hero-overlay:not(.mfn-header-scrolled) #mfn-header-template .mcb-background-overlay, body.tr-hero-overlay:not(.mfn-header-scrolled) #mfn-header-template .mfn-header-overlay{ background: transparent !important; background-image: none !important; } body.tr-hero-overlay:not(.mfn-header-scrolled) #mfn-header-template .mfn-header-menu > li.mfn-menu-li > a.mfn-menu-link, body.tr-hero-overlay:not(.mfn-header-scrolled) #mfn-header-template .lang-item > a, body.tr-hero-overlay:not(.mfn-header-scrolled) #mfn-header-template ul[id*="language_switcher"] > li > a{ color: var(--tr-nav-light); } /* Search pill over the hero = white @ 20% opacity (Figma home instance override), frosted look. On hover/focus it fills to solid white. */ body.tr-hero-overlay:not(.mfn-header-scrolled) #mfn-header-template .trsys-search-li .trsys-search-form{ background: rgba(255,255,255,.2); } body.tr-hero-overlay:not(.mfn-header-scrolled) #mfn-header-template .trsys-search-li .trsys-search-form:hover, body.tr-hero-overlay:not(.mfn-header-scrolled) #mfn-header-template .trsys-search-li .trsys-search-form:focus-within{ background: #ffffff; } /* ================================================================== */ /* 7. STATE: inner pages, or scrolled -> solid white, DARK text */ /* ================================================================== */ body:not(.tr-hero-overlay) #mfn-header-template, body.mfn-header-scrolled #mfn-header-template{ background:#ffffff !important; box-shadow: 0 2px 16px rgba(37,60,84,.08); } /* (dark nav text is already the default in §1, so no extra rules needed) */ /* ================================================================== */ /* 8. MOBILE (≤959) — burger + slide-down panel (Figma node 1247:1232) */ /* Betheme hides the desktop nav/contact columns below tablet */ /* (hide-tablet + hide-mobile) but renders NO burger for a template */ /* header, so we inject our own (functions.php → wp_footer) and */ /* style the whole mobile menu here. Two screens: main + language. */ /* */ /* Figma spec: */ /* panel #f4f4f4 card, dropdown from top, r 0 0 14 14 */ /* head dark primary logo + X close, accent #3b9dc4 underline */ /* items Montserrat 600/24 #3b3a3c, 61px accent tick under each */ /* CTA brand gradient pill (#0e2034→#28609a), white, › */ /* lang ‹ НАЗАД (grey) + flag rows, active = #1f5e84 */ /* ================================================================== */ /* --- Collapse the (now-empty) menu/contact/language wrap on mobile. All three inner columns are hidden below tablet; the language column has no hide-* class, so kill the whole wrap by its content (:has). --- */ @media (max-width: 959px){ #mfn-header-template .mcb-wrap:has(ul[id*="language_switcher"]){ display:none !important; } /* Consistent header bar height + positioning context for the burger */ #mfn-header-template .mcb-header-section > .section_wrapper{ position:relative; display:flex; align-items:center; min-height:58px; } } /* --- Burger button (3 bars). Injected into the header on mobile; */ /* falls back to fixed top-right if JS is unavailable. Two-state */ /* colour: light over the hero, dark on the white header. --------- */ .trsys-burger{ display:none; } @media (max-width: 959px){ .trsys-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:30px; height:30px; padding:0; margin:0; border:0; background:none; cursor:pointer; position:fixed; top:14px; right:16px; z-index:99998; /* no-JS fallback */ } #mfn-header-template .trsys-burger{ /* once moved inside header */ position:absolute; top:50%; right:16px; transform:translateY(-50%); } .trsys-burger span{ display:block; width:26px; height:2.5px; border-radius:2px; background: var(--tr-nav-dark); transition:background-color .2s ease; } body.tr-hero-overlay:not(.mfn-header-scrolled) #mfn-header-template .trsys-burger span, body.tr-hero-overlay:not(.mfn-header-scrolled) .trsys-burger span{ background: var(--tr-nav-light); } /* hide the burger while the panel is open (the panel has its own X) */ body.trsys-mnav-open .trsys-burger{ opacity:0; pointer-events:none; } } /* --- Overlay + panel ---------------------------------------------- */ body.trsys-mnav-open{ overflow:hidden; } .trsys-mnav{ position:fixed; inset:0; z-index:99999; } .trsys-mnav[hidden]{ display:none; } .trsys-mnav-scrim{ position:absolute; inset:0; background:rgba(10,32,52,.45); opacity:0; transition:opacity .3s ease; } .trsys-mnav.is-open .trsys-mnav-scrim{ opacity:1; } .trsys-mnav-panel{ position:absolute; top:0; left:0; right:0; background:#f4f4f4; border-radius:0 0 14px 14px; box-shadow:0 12px 34px rgba(10,32,52,.22); padding:14px 20px 24px; box-sizing:border-box; max-height:100vh; overflow-y:auto; transform:translateY(-102%); transition:transform .34s cubic-bezier(.4,0,.2,1); } .trsys-mnav.is-open .trsys-mnav-panel{ transform:translateY(0); } /* head: dark logo + X, accent underline (Figma Vector 1, full width) */ .trsys-mnav-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 0 14px; border-bottom:1px solid var(--tr-nav-active); } .trsys-mnav-logo{ display:block; width:196px; height:40px; flex:none; background:url("/wp-content/uploads/assets/logo-primary-dark.svg") left center / contain no-repeat; } .trsys-mnav-close{ width:30px; height:30px; position:relative; flex:none; background:none; border:0; padding:0; cursor:pointer; } .trsys-mnav-close::before, .trsys-mnav-close::after{ content:""; position:absolute; left:4px; right:4px; top:50%; margin-top:-1px; height:2px; border-radius:2px; background: var(--tr-nav-dark); } .trsys-mnav-close::before{ transform:rotate(45deg); } .trsys-mnav-close::after{ transform:rotate(-45deg); } /* screens */ .trsys-mnav-screen[hidden]{ display:none; } /* main menu list — 600/24, 61px accent tick under every item but last */ .trsys-mnav-list, .trsys-mnav-langlist{ list-style:none; margin:0; padding:6px 0 0; } .trsys-mnav-list > li{ position:relative; } .trsys-mnav-list a, .trsys-mnav-list .trsys-mnav-langtoggle{ display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:15px 0; margin:0; font-family: var(--tr-font); font-weight:600; font-size:24px; line-height:1; color:#3b3a3c; text-decoration:none; } .trsys-mnav-list > li:not(:last-child)::after{ content:""; position:absolute; left:0; bottom:0; width:61px; height:1px; background: var(--tr-nav-active); } /* contact CTA — Figma "primary-btn-light" (component set 290:22740): Default = brand-gradient pill; hover = flat solid #28609a (Figma also adds a same-colour 2px border, which is visually identical to the fill, so no border is needed). Right chevron. Same behaviour as the footer CTA (.tf-cta). */ .trsys-mnav-cta{ display:flex; align-items:center; justify-content:center; margin-top:22px; height:50px; border-radius:50px; background: linear-gradient(to right, #0e2034 0%, #28609a 100%); color:#f4f4f4; text-decoration:none; font-family: var(--tr-font); font-weight:600; font-size:16px; text-transform:uppercase; letter-spacing:.02em; transition: background .25s ease; } .trsys-mnav-cta:hover, .trsys-mnav-cta:focus-visible{ background:#28609a; /* Figma: on hover ONLY the fill changes — text (and the chevron, which uses currentColor) stay #f4f4f4. Pin them against Betheme's global a:hover, which otherwise recolours the link and adds an underline. */ color:#f4f4f4 !important; text-decoration:none !important; } .trsys-mnav-cta::after{ content:""; width:8px; height:8px; margin-left:9px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); } /* language screen — back button (grey) + flag rows */ .trsys-mnav-back{ display:inline-flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer; padding:14px 0; margin:0; font-family: var(--tr-font); font-weight:600; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:#6c6b6d; } .trsys-mnav-back::before{ content:""; width:8px; height:8px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); } .trsys-mnav-langlist{ padding-top:2px; } .trsys-mnav-langlist > li{ position:relative; } .trsys-mnav-langlist a{ display:flex; align-items:center; gap:12px; padding:14px 0; font-family: var(--tr-font); font-weight:600; font-size:20px; color:#3b3a3c; text-decoration:none; } .trsys-mnav-langlist img{ width:26px; height:auto; border-radius:2px; } .trsys-mnav-langlist > li.current-lang a{ color: var(--tr-primary, #1f5e84); } .trsys-mnav-langlist > li:not(:last-child)::after{ content:""; position:absolute; left:0; bottom:0; width:61px; height:1px; background: var(--tr-nav-active); } /* the mobile panel must never show on desktop even if injected early */ @media (min-width: 960px){ .trsys-mnav{ display:none !important; } }