/* ========================================================= VMORECLOUD TOP BAR Height: 32px ========================================================= */ .vmc-topbar-custom { width: 100%; height: 32px; background: #071d34; color: #dce9f6; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 11px; position: relative; z-index: 200; } /* ========================================================= TOP BAR INNER ========================================================= */ .vmc-topbar-inner { width: min(1320px, calc(100% - 40px)); height: 32px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } /* ========================================================= LEFT TEXT ========================================================= */ .vmc-topbar-text { white-space: nowrap; opacity: .9; line-height: 32px; } /* ========================================================= RIGHT SIDE ========================================================= */ .vmc-topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 17px; height: 32px; } /* ========================================================= TEXT LINKS ========================================================= */ .vmc-topbar-right > a { color: #dce9f6; text-decoration: none; opacity: .88; white-space: nowrap; transition: color .2s ease, opacity .2s ease; } .vmc-topbar-right > a:hover { color: #ffffff; opacity: 1; } /* ========================================================= SOCIAL CONTAINER ========================================================= */ .vmc-topbar-socials { display: flex; align-items: center; gap: 5px; } /* ========================================================= SOCIAL BUTTON ========================================================= */ .vmc-topbar-socials a { width: 19px; height: 19px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 4px; background: rgba(255,255,255,.10); color: #ffffff !important; text-decoration: none; line-height: 1; transition: background .2s ease, transform .2s ease, color .2s ease; } /* ========================================================= SOCIAL ICON BASE ========================================================= */ .vmc-topbar-socials span { display: flex; align-items: center; justify-content: center; } /* ========================================================= YOUTUBE ========================================================= */ .vmc-social-youtube { font-size: 8px; margin-left: 1px; } /* ========================================================= LINKEDIN ========================================================= */ .vmc-social-linkedin { font-size: 8px; font-weight: 900; } /* ========================================================= FACEBOOK ========================================================= */ .vmc-social-facebook { font-family: Arial, sans-serif; font-size: 11px; font-weight: 900; } /* ========================================================= X ========================================================= */ .vmc-social-x { font-size: 10px; font-weight: 700; } /* ========================================================= MASTODON ========================================================= */ .vmc-social-mastodon { font-size: 8px; font-weight: 900; } /* ========================================================= THREADS ========================================================= */ .vmc-social-threads { font-size: 10px; font-weight: 800; } /* ========================================================= BLUESKY ========================================================= */ .vmc-social-bluesky { font-size: 9px; } /* ========================================================= TELEGRAM ========================================================= */ .vmc-social-telegram { font-size: 10px; transform: translateX(-1px); } /* ========================================================= SOCIAL HOVER ========================================================= */ .vmc-topbar-socials a:hover { background: #087cf5; color: #ffffff !important; transform: translateY(-1px); } /* ========================================================= BLOCKSY HEADER CORRECTIONS ========================================================= */ #header [data-row] .ct-container { max-width: 100%; width: 100%; } #header .ct-header-text { width: 100%; max-width: 100%; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .vmc-topbar-text { font-size: 9px; } .vmc-topbar-right { gap: 9px; } .vmc-topbar-socials { gap: 4px; } .vmc-topbar-socials a { width: 18px; height: 18px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .vmc-topbar-inner { width: calc(100% - 24px); } .vmc-topbar-text { max-width: 58%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vmc-topbar-right { gap: 5px; } .vmc-topbar-right > a { display: none; } .vmc-topbar-socials { gap: 4px; } .vmc-topbar-socials a { width: 18px; height: 18px; } }

/* ========================================================= VMORECLOUD HTML 2 DESKTOP MAIN ROW ========================================================= */ .vmc-main-header { width: 100%; height: 76px; min-height: 76px; display: grid; /* Desktop structure: Logo | Advertisement Blocksy's native Search occupies the right side of the Main Row separately. */ grid-template-columns: 280px minmax(300px, 1fr); align-items: center; column-gap: 24px; margin: 0; padding: 0; box-sizing: border-box; background: #ffffff; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* ========================================================= LOGO AREA ========================================================= */ .vmc-main-logo { width: 100%; height: 76px; display: flex; align-items: center; justify-content: flex-start; margin: 0; padding: 0; box-sizing: border-box; } /* ========================================================= LOGO LINK ========================================================= */ .vmc-main-logo-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px; width: max-content; margin: 0; padding: 0; text-decoration: none; border: 0; outline: none; } /* ========================================================= LOGO ICON ========================================================= */ .vmc-main-logo-icon { width: 48px; height: 48px; min-width: 48px; flex: 0 0 48px; display: block; margin: 0; padding: 0; } .vmc-main-logo-icon svg { display: block; width: 100%; height: 100%; } /* ========================================================= LOGO CONTENT ========================================================= */ .vmc-main-logo-content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin: 0; padding: 0; } /* ========================================================= LOGO NAME ========================================================= */ .vmc-main-logo-name { display: block; margin: 0; padding: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 22px; line-height: 1; font-weight: 850; letter-spacing: -.8px; white-space: nowrap; } /* ========================================================= VMORE ========================================================= */ .vmc-main-logo-vmore { color: #071D34; } /* ========================================================= CLOUD ========================================================= */ .vmc-main-logo-cloud { color: #087CF5; } /* ========================================================= LOGO TAGLINE ========================================================= */ .vmc-main-logo-tagline { display: block; margin-top: 4px; color: #66768B; font-size: 7px; line-height: 1; font-weight: 600; letter-spacing: .15px; white-space: nowrap; } /* ========================================================= ADVERTISEMENT AREA ========================================================= */ .vmc-main-ad { width: 100%; height: 76px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; } /* ========================================================= ADVERTISEMENT LABEL ========================================================= */ .vmc-main-ad-label { display: block; color: #A7AFB9; font-size: 8px; font-weight: 500; letter-spacing: .8px; line-height: 1; text-transform: uppercase; white-space: nowrap; } /* ========================================================= BLOCKSY HTML CONTAINER RESET ========================================================= */ #header [data-row="middle"] .ct-header-text { width: 100% !important; max-width: 100% !important; height: 76px !important; min-height: 76px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; } #header [data-row="middle"] .ct-header-text > * { width: 100% !important; box-sizing: border-box !important; } /* ========================================================= DESKTOP MIDDLE ROW ========================================================= */ @media (min-width: 701px) { #header [data-row="middle"] { height: 76px !important; min-height: 76px !important; margin: 0 !important; padding: 0 !important; } #header [data-row="middle"] > div { height: 76px !important; min-height: 76px !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1200px) and (min-width: 901px) { .vmc-main-header { grid-template-columns: 245px minmax(250px, 1fr); column-gap: 18px; } .vmc-main-logo-name { font-size: 20px; } .vmc-main-logo-icon { width: 45px; height: 45px; min-width: 45px; flex-basis: 45px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) and (min-width: 701px) { .vmc-main-header { grid-template-columns: 220px minmax(150px, 1fr); column-gap: 12px; } .vmc-main-logo-name { font-size: 18px; } .vmc-main-logo-icon { width: 42px; height: 42px; min-width: 42px; flex-basis: 42px; } .vmc-main-logo-tagline { font-size: 6px; } .vmc-main-ad-label { font-size: 7px; } } /* ========================================================= MOBILE IMPORTANT: BLOCKSY NATIVE MOBILE HEADER CONTROLS THE HEADER. HTML 2 IS COMPLETELY HIDDEN. ========================================================= */ @media (max-width: 700px) { .vmc-main-header { display: none !important; } } /* ========================================================= BLOCKSY OVERFLOW Allows menus/dropdowns to extend outside the row. ========================================================= */ #header, #header [data-row], #header [data-row] > div, #header .ct-container { overflow: visible !important; } /* ========================================================= PREVENT UNWANTED PARAGRAPH SPACING ========================================================= */ #header .vmc-main-header p { margin: 0 !important; }