/* ==========================================================================
KUTAVAR — Header (html/index.html)
The header is built natively in Uncode:
Theme Options → Menu: layout "hmenu-right" (logo left), dark skin,
secondary menu ON (the utility bar), menu arrows ON.
Appearance → Menus: "Main Menu" (primary) and "Secondary menu".
WPML: the menu language switcher sits on the Secondary menu.
This file adds only what those settings can't express: the utility-bar
layout, the technology tone dots, the dark dropdowns and the red CTA pill.
Loaded site-wide. Scoped to #masthead / .top-menu.
Menu hooks (set in each item's "CSS Classes" field):
kvt-nav-tech + kvt-nav-plasma / kvt-nav-oxyfuel / kvt-nav-laser
The CTA is Uncode's own "Button" menu-item option.
========================================================================== */
:root{
--kvh-red:#cc2c24; --kvh-ink:#212222;
--kvh-d1:#101213; --kvh-d3:#1b1d1f;
--kvh-line:rgba(255,255,255,.13); --kvh-line-soft:rgba(255,255,255,.07);
--kvh-plasma:#9e4526; --kvh-oxyfuel:#d19a3a; --kvh-laser:#5a7f9c;
--kvh-ease:cubic-bezier(.22,.61,.36,1);
}
/* --------------------------------------------------------------------------
1. Utility bar (Uncode secondary menu)
language switcher left, links right with hairline separators
-------------------------------------------------------------------------- */
.top-menu.menu-secondary{
background:var(--kvh-d1) !important;
border-bottom:1px solid var(--kvh-line-soft);
}
.top-menu.menu-secondary .row-menu-inner{ min-height:42px; }
.top-menu .navbar-topmenu,
.top-menu .col-lg-12.menu-horizontal{ width:100%; }
.top-menu #menu-secondary-menu{
display:flex !important; align-items:center; justify-content:flex-end;
width:100%; gap:0; float:none;
}
.top-menu #menu-secondary-menu > li{ float:none; display:flex; align-items:center; }
.top-menu #menu-secondary-menu > li.wpml-ls-item{ margin-right:auto; } /* switcher to the far left */
.top-menu #menu-secondary-menu > li > a{
display:flex !important; align-items:center; gap:8px;
padding:12px 11px !important;
font-size:11px !important; font-weight:600 !important;
letter-spacing:.13em !important; text-transform:uppercase !important;
color:rgba(255,255,255,.7) !important;
transition:color .2s var(--kvh-ease);
}
.top-menu #menu-secondary-menu > li:last-child > a{ padding-right:0 !important; }
.top-menu #menu-secondary-menu > li > a:hover{ color:#fff !important; }
/* hairline between the right-hand links (not after the switcher) */
.top-menu #menu-secondary-menu > li:not(.wpml-ls-item) + li:not(.wpml-ls-item)::before{
content:""; width:1px; height:11px; background:var(--kvh-line);
}
/* Uncode appends a chevron to every link; the utility bar has none */
.top-menu #menu-secondary-menu > li:not(.menu-item-has-children) > a > i.fa-dropdown{ display:none !important; }
.top-menu .wpml-ls-item > a{ color:rgba(255,255,255,.78) !important; font-size:11.5px !important; letter-spacing:.1em !important; }
.top-menu .wpml-ls-flag{ width:17px !important; height:auto !important; margin:0 !important; }
.top-menu .wpml-ls-item .drop-menu{
background:var(--kvh-d3) !important; border:1px solid var(--kvh-line) !important;
padding:7px !important; min-width:186px;
}
.top-menu .wpml-ls-item .drop-menu a{
display:flex !important; align-items:center; gap:11px;
padding:9px 12px !important; font-size:13px !important; letter-spacing:0 !important; text-transform:none !important;
color:rgba(255,255,255,.76) !important;
}
.top-menu .wpml-ls-item .drop-menu a:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; }
/* --------------------------------------------------------------------------
2. Main bar
-------------------------------------------------------------------------- */
#masthead .menu-container{ background:var(--kvh-d1) !important; border-bottom:1px solid var(--kvh-line-soft); }
#masthead #menu-main-menu > li > a{
color:rgba(255,255,255,.86) !important;
font-size:12px !important; font-weight:600 !important;
letter-spacing:.09em !important; text-transform:uppercase !important;
transition:color .2s var(--kvh-ease);
}
/* Uncode colours hover and the current page in the accent red; in the
concept the nav stays white and red is reserved for the CTA. */
#masthead #menu-main-menu > li > a:hover,
#masthead #menu-main-menu > li:hover > a,
#masthead #menu-main-menu > li.current-menu-item > a,
#masthead #menu-main-menu > li.current-menu-ancestor > a,
#masthead #menu-main-menu > li.current-menu-parent > a{ color:#fff !important; }
#masthead #menu-main-menu > li > a > i.fa-dropdown{ opacity:.55; font-size:11px; margin-left:4px; }
/* technology tone dots (round — diamonds were removed site-wide) */
#masthead #menu-main-menu > li.kvt-nav-tech > a::before{
content:""; display:inline-block; flex:none;
width:6px; height:6px; margin-right:9px; border-radius:50%;
vertical-align:middle; position:relative; top:-1px;
background:var(--kvh-dot, #8a8f94);
transition:background .25s var(--kvh-ease), box-shadow .25s var(--kvh-ease);
}
#masthead #menu-main-menu > li.kvt-nav-plasma { --kvh-dot:var(--kvh-plasma); }
#masthead #menu-main-menu > li.kvt-nav-oxyfuel { --kvh-dot:var(--kvh-oxyfuel); }
#masthead #menu-main-menu > li.kvt-nav-laser { --kvh-dot:var(--kvh-laser); }
#masthead #menu-main-menu > li.kvt-nav-tech:hover > a::before{
background:var(--kvh-red); box-shadow:0 0 0 3px rgba(204,44,36,.18);
}
/* you-are-here: the current technology keeps its tone and gains an underline */
/* Uncode's link fills the full bar height, so the underline is painted as a
background just below the text rather than along the bar's bottom edge */
body.kvt-page-plasma #masthead #menu-main-menu > li.kvt-nav-plasma > a,
body.kvt-page-oxyfuel #masthead #menu-main-menu > li.kvt-nav-oxyfuel > a,
body.kvt-page-laser #masthead #menu-main-menu > li.kvt-nav-laser > a{
background-image:linear-gradient(var(--kvh-dot), var(--kvh-dot)) !important;
background-repeat:no-repeat !important;
background-size:calc(100% - 2 * var(--kvh-link-pad, 15px)) 2px !important;
background-position:center calc(50% + 15px) !important;
}
body.kvt-page-plasma #masthead #menu-main-menu > li.kvt-nav-plasma > a::before,
body.kvt-page-oxyfuel #masthead #menu-main-menu > li.kvt-nav-oxyfuel > a::before,
body.kvt-page-laser #masthead #menu-main-menu > li.kvt-nav-laser > a::before{
box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
/* --------------------------------------------------------------------------
3. Dropdowns
-------------------------------------------------------------------------- */
#masthead #menu-main-menu .drop-menu{
background:var(--kvh-d3) !important;
border:1px solid var(--kvh-line) !important;
box-shadow:0 18px 40px -18px rgba(0,0,0,.6) !important;
padding:8px !important; min-width:230px !important;
}
#masthead #menu-main-menu .drop-menu li > a{
display:block !important;
padding:10px 13px !important;
font-size:13px !important; font-weight:500 !important;
letter-spacing:0 !important; text-transform:none !important;
color:rgba(255,255,255,.74) !important;
border-left:2px solid transparent;
transition:background .2s var(--kvh-ease), color .2s var(--kvh-ease), border-color .2s var(--kvh-ease);
}
/* sub-links that share the parent URL with a #section all register as
"current" — so no current-state colour inside dropdowns */
#masthead #menu-main-menu .drop-menu li.current-menu-item > a{ color:rgba(255,255,255,.74) !important; }
#masthead #menu-main-menu .drop-menu li > a:hover{
background:rgba(255,255,255,.05) !important; color:#fff !important; border-left-color:var(--kvh-red);
}
#masthead #menu-main-menu .drop-menu li > a > i.fa-dropdown{ display:none !important; }
/* --------------------------------------------------------------------------
4. CTA — Uncode "Button" menu item, as the red pill
-------------------------------------------------------------------------- */
#masthead #menu-main-menu > li.menu-item-button{ margin-left:10px; }
#masthead #menu-main-menu > li.menu-item-button .menu-btn-cell > div{
background:var(--kvh-red) !important;
border:1px solid var(--kvh-red) !important;
border-radius:999px !important;
padding:12px 24px !important;
color:#fff !important;
font-size:11.5px !important; font-weight:600 !important;
letter-spacing:.1em !important; text-transform:uppercase !important;
line-height:1.2 !important;
transition:background .25s var(--kvh-ease), border-color .25s var(--kvh-ease);
}
#masthead #menu-main-menu > li.menu-item-button .menu-btn-cell > div span{ color:#fff !important; }
#masthead #menu-main-menu > li.menu-item-button > a:hover .menu-btn-cell > div,
#masthead #menu-main-menu > li.menu-item-button > a:focus-visible .menu-btn-cell > div{
background:var(--kvh-ink) !important; border-color:var(--kvh-ink) !important;
}
/* --------------------------------------------------------------------------
5. Tone strip once the header sticks (wayfinding, as in the concept)
one tone on a technology page; all three on the new homepage
-------------------------------------------------------------------------- */
#masthead .menu-container{ position:relative; }
#masthead .menu-container::after{
content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
opacity:0; pointer-events:none; transition:opacity .35s var(--kvh-ease);
}
body.kvt-page-plasma #masthead .menu-container::after{ background:var(--kvh-plasma); }
body.kvt-page-oxyfuel #masthead .menu-container::after{ background:var(--kvh-oxyfuel); }
body.kvt-page-laser #masthead .menu-container::after{ background:var(--kvh-laser); }
body.kvt-page-home #masthead .menu-container::after{
background:linear-gradient(to right, var(--kvh-plasma) 0 34%, var(--kvh-oxyfuel) 34% 67%, var(--kvh-laser) 67% 100%);
}
body.kvt-redesign #masthead.is_stuck .menu-container::after{ opacity:1; }
/* --------------------------------------------------------------------------
6. Mobile (Uncode's own burger + accordion menu, restyled dark)
-------------------------------------------------------------------------- */
@media (max-width:959px){
/* ------------------------------------------------------------------ bar */
#masthead .menu-container{ background:var(--kvh-d1) !important; }
#masthead .main-menu-container{ background:transparent !important; }
/* Burger → X, inside a ring */
#masthead .mmb-container{ display:flex; align-items:center; }
#masthead .mobile-menu-button{
position:relative; width:44px; height:44px; margin:0 !important; padding:0 !important;
display:flex; align-items:center; justify-content:center;
border:1px solid rgba(255,255,255,.28) !important; border-radius:50% !important;
background:transparent !important;
transition:border-color .25s var(--kvh-ease, cubic-bezier(.22,.61,.36,1)), background-color .25s ease;
}
#masthead .mobile-menu-button:hover,
#masthead .mobile-menu-button.close{ border-color:rgba(255,255,255,.6) !important; }
#masthead .mobile-menu-button .lines,
#masthead .mobile-menu-button .lines::before,
#masthead .mobile-menu-button .lines::after{
width:19px !important; height:2px !important; border-radius:2px;
background:#fff !important; transition:transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s ease, top .3s ease;
}
#masthead .mobile-menu-button .lines::before{ top:-6px !important; }
#masthead .mobile-menu-button .lines::after{ top:6px !important; }
#masthead .mobile-menu-button.close .lines{ background:transparent !important; }
#masthead .mobile-menu-button.close .lines::before{ top:0 !important; transform:rotate(45deg); }
#masthead .mobile-menu-button.close .lines::after{ top:0 !important; transform:rotate(-45deg); }
/* ---------------------------------------------------------------- panel */
/* One surface from under the bar to the bottom of the screen. */
/* The panel surface sits on .menu-horizontal-inner: Uncode animates the
height of .menu-horizontal itself, so a background there paints nothing. */
#masthead .menu-horizontal-inner{
display:flex !important; flex-direction:column; vertical-align:top !important;
padding:8px 0 24px !important;
min-height:calc(100dvh - var(--kvh-menu-top, 136px));
/* with a section open on a short screen the list is taller than the
screen, so the panel scrolls rather than hiding the links at the end */
max-height:calc(100dvh - var(--kvh-menu-top, 136px));
overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
background:
radial-gradient(120% 70% at 100% 0%, rgba(204,44,36,.16) 0%, rgba(204,44,36,0) 58%),
var(--kvh-d1) !important;
}
/* the list takes the space, so the utility links sit on the bottom edge */
#masthead .menu-horizontal-inner > nav,
#masthead .menu-horizontal-inner > .navbar-nav{ flex:1 0 auto; }
#masthead .menu-accordion-secondary{ margin-top:auto !important; }
/* --------------------------------------------------------------- items */
#masthead #menu-main-menu > li{ position:relative; border:0 !important; }
#masthead #menu-main-menu > li + li{ border-top:1px solid rgba(255,255,255,.07) !important; }
#masthead #menu-main-menu > li > a{
display:flex !important; align-items:center;
padding:18px 64px 18px 24px !important;
font-family:'Barlow Condensed','Arial Narrow',sans-serif !important;
font-size:26px !important; font-weight:600 !important; line-height:1.1 !important;
letter-spacing:.02em !important; text-transform:uppercase !important;
color:#fff !important; text-align:left !important;
}
#masthead #menu-main-menu > li > a:active{ background:rgba(255,255,255,.04) !important; }
/* the technology dot, bigger on mobile */
#masthead #menu-main-menu > li.kvt-nav-tech > a::before{ width:8px; height:8px; margin-right:14px; }
#masthead #menu-main-menu > li.current-menu-item > a,
#masthead #menu-main-menu > li.current-menu-ancestor > a{ color:#fff !important; }
#masthead #menu-main-menu > li > a .fa-dropdown{ display:none !important; }
/* open/close control */
/* Uncode gives the menu link position:relative and z-index:100, so the
toggle has to sit above that or the link swallows the tap. */
#masthead #menu-main-menu > li > .kvt-submenu-toggle{
position:absolute; top:0; right:6px; z-index:120;
width:58px; height:62px; padding:0; margin:0;
background:transparent !important; border:0 !important; border-radius:0 !important;
box-shadow:none !important; cursor:pointer;
}
#masthead #menu-main-menu > li > .kvt-submenu-toggle::before,
#masthead #menu-main-menu > li > .kvt-submenu-toggle::after{
content:""; position:absolute; top:50%; left:50%;
width:13px; height:2px; margin:-1px 0 0 -6.5px; border-radius:2px;
background:rgba(255,255,255,.75);
transition:transform .3s cubic-bezier(.22,.61,.36,1), background-color .2s ease;
}
#masthead #menu-main-menu > li > .kvt-submenu-toggle::after{ transform:rotate(90deg); }
#masthead #menu-main-menu > li.kvt-submenu-open > .kvt-submenu-toggle::before{ background:var(--kvh-red,#cc2c24); }
#masthead #menu-main-menu > li.kvt-submenu-open > .kvt-submenu-toggle::after{ transform:rotate(0deg); background:var(--kvh-red,#cc2c24); }
#masthead #menu-main-menu > li > .kvt-submenu-toggle:focus-visible{ outline:2px solid #fff; outline-offset:-8px; }
/* ------------------------------------------------------------ sub-items */
#masthead #menu-main-menu > li > ul{
display:block !important; visibility:visible !important; opacity:1 !important;
position:static !important; width:auto !important;
background:rgba(255,255,255,.03) !important; border:0 !important; box-shadow:none !important;
margin:0 !important; padding:0 !important;
max-height:0; overflow:hidden;
transition:max-height .34s cubic-bezier(.22,.61,.36,1);
}
/* Uncode pads .un-submenu, which would show as a sliver while collapsed */
#masthead #menu-main-menu > li > ul.drop-menu,
#masthead #menu-main-menu > li > ul.un-submenu{ padding:0 !important; border:0 !important; }
/* Uncode leaves dropdowns at pointer-events:none for its hover behaviour,
so taps fall straight through to the parent item. */
#masthead #menu-main-menu > li.kvt-submenu-open > ul,
#masthead #menu-main-menu > li.kvt-submenu-open > ul li,
#masthead #menu-main-menu > li.kvt-submenu-open > ul a{ pointer-events:auto !important; }
#masthead #menu-main-menu > li.kvt-submenu-open > ul{ max-height:460px; }
#masthead #menu-main-menu > li > ul > li{ border:0 !important; }
#masthead #menu-main-menu > li > ul > li > a{
display:block !important;
padding:13px 24px 13px 46px !important;
font-size:13.5px !important; font-weight:500 !important;
letter-spacing:.06em !important; text-transform:none !important;
color:rgba(255,255,255,.72) !important; text-align:left !important;
border-left:2px solid transparent;
}
#masthead #menu-main-menu > li > ul > li > a:active{ color:#fff !important; border-left-color:var(--kvh-dot, var(--kvh-red,#cc2c24)); }
#masthead #menu-main-menu > li > ul > li:first-child > a{ padding-top:16px !important; }
#masthead #menu-main-menu > li > ul > li:last-child > a{ padding-bottom:20px !important; }
/* ------------------------------------------------------------------ CTA */
#masthead #menu-main-menu > li.menu-item-button{ margin:24px 24px 6px !important; border-top:0 !important; }
#masthead #menu-main-menu > li.menu-item-button .menu-btn-cell,
#masthead #menu-main-menu > li.menu-item-button .menu-btn-cell > div{ display:block !important; }
#masthead #menu-main-menu > li.menu-item-button > a{
justify-content:center;
padding:17px 22px !important;
font-family:'Raleway',Arial,sans-serif !important;
font-size:12.5px !important; letter-spacing:.12em !important;
border-radius:999px !important;
}
/* -------------------------------------------------------------- utility */
#masthead .menu-accordion-secondary{
margin:18px 0 0 !important; padding:18px 24px 6px !important;
background:transparent !important; border-top:1px solid rgba(255,255,255,.07) !important;
}
#masthead .menu-accordion-secondary ul,
#masthead .menu-accordion-secondary li{ background:transparent !important; }
#masthead .menu-accordion-secondary ul{ display:flex !important; flex-wrap:wrap; gap:4px 22px; padding:0 !important; }
#masthead .menu-accordion-secondary li{ border:0 !important; }
#masthead .menu-accordion-secondary a{
padding:6px 0 !important;
color:rgba(255,255,255,.62) !important;
font-size:11px !important; letter-spacing:.14em !important; text-transform:uppercase !important;
}
#masthead .menu-accordion-secondary .wpml-ls-item a{ color:rgba(255,255,255,.85) !important; }
/* --------------------------------------------------------- entrance */
body.open-overlay-menu #masthead #menu-main-menu > li,
body.open-overlay-menu #masthead .menu-accordion-secondary{
animation:kvh-menu-in .42s cubic-bezier(.22,.61,.36,1) backwards;
}
body.open-overlay-menu #masthead #menu-main-menu > li:nth-child(1){ animation-delay:.04s; }
body.open-overlay-menu #masthead #menu-main-menu > li:nth-child(2){ animation-delay:.08s; }
body.open-overlay-menu #masthead #menu-main-menu > li:nth-child(3){ animation-delay:.12s; }
body.open-overlay-menu #masthead #menu-main-menu > li:nth-child(4){ animation-delay:.16s; }
body.open-overlay-menu #masthead .menu-accordion-secondary{ animation-delay:.2s; }
@keyframes kvh-menu-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
body.open-overlay-menu #masthead #menu-main-menu > li,
body.open-overlay-menu #masthead .menu-accordion-secondary{ animation:none; }
}
}
/* --------------------------------------------------------------------------
Site notice — the red bar above the header (Simple Banner plugin).
Links are added as HTML in Settings → Simple Banner, e.g.
Contact us to book your demonstration | …
The plugin only sets the link colour; this makes links read as links.
-------------------------------------------------------------------------- */
.simple-banner .simple-banner-text a{
color:#fff !important;
font-weight:inherit;
text-decoration:underline !important;
text-decoration-thickness:1px !important;
text-underline-offset:3px;
text-decoration-color:rgba(255,255,255,.5) !important;
transition:text-decoration-color .2s ease;
}
.simple-banner .simple-banner-text a:hover,
.simple-banner .simple-banner-text a:focus-visible{ text-decoration-color:#fff !important; }
.simple-banner .simple-banner-text a:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-radius:2px; }