/** * Capnomic Global Shell — Premium Teal Header * Deep Teal accent + 3D glass social system */ .capnomic-header { --cap-shell-navy: #0A1628; --cap-shell-navy-2: #101F35; --cap-shell-teal: #0D7377; --cap-shell-teal-deep: #095A5D; --cap-shell-teal-soft: rgba(13, 115, 119, 0.08); --cap-shell-teal-border: rgba(13, 115, 119, 0.28); --cap-shell-teal-glow: rgba(13, 115, 119, 0.16); --cap-shell-gold: #C9A45C; --cap-shell-gray: #F4F6F8; --cap-shell-border: #E7EBF0; position: relative; z-index: 2147483000 !important; isolation: isolate; overflow: visible; background: #F7F9FA; color: var(--cap-shell-navy); font-family: 'Urbanist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; border-bottom: 1px solid var(--cap-shell-border); transition: box-shadow .22s ease, border-color .22s ease, background-color .22s ease; } .capnomic-header--sticky { position: sticky !important; top: 0 !important; z-index: 2147483000 !important; } .capnomic-header.is-scrolled { box-shadow: 0 8px 28px rgba(10, 22, 40, .08); border-bottom-color: rgba(13, 115, 119, .12); background: rgba(247, 249, 250, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .capnomic-header__inner { height: var(--cap-header-height, 84px); transition: height .22s ease; } .capnomic-header.is-scrolled.capnomic-header--compact-on-scroll .capnomic-header__inner { height: var(--cap-header-height-sticky, 68px); } .capnomic-header__container { max-width: var(--cap-container-width, 1280px); margin: 0 auto; height: 100%; padding: 0 28px; display: grid; grid-template-columns: minmax(145px, 1fr) auto minmax(165px, 1fr); align-items: center; column-gap: 24px; } /* Brand lockup */ .capnomic-header__brand { min-width: 0; } .capnomic-header__logo-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .capnomic-header__logo { width: auto; max-width: 34px; max-height: 34px; object-fit: contain; transition: max-height .22s ease; } .capnomic-header__logo { display: block; min-width: 34px; min-height: 34px; } .capnomic-header__logo-link { min-height: 40px; } .capnomic-header.is-scrolled.capnomic-header--compact-on-scroll .capnomic-header__logo { max-height: 30px; } .capnomic-header__logo--mobile { display: none; } .capnomic-header__wordmark { color: var(--cap-shell-navy); font-size: 1.22rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; } .capnomic-header__wordmark sup { font-size: .78em; font-weight: 750; line-height: .85; vertical-align: super; margin-left: 3px; letter-spacing: 0; opacity: .95; } /* Desktop nav */ .capnomic-header__nav { display: flex; justify-content: center; } .capnomic-nav--desktop { display: flex; align-items: center; gap: var(--cap-nav-spacing, 18px); list-style: none; margin: 0; padding: 0; } .capnomic-nav__item { position: relative; } .capnomic-nav__link, .capnomic-nav__trigger { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; border-radius: 0; background: transparent; color: var(--cap-shell-navy); text-decoration: none; font: inherit; font-size: .84rem; font-weight: 650; letter-spacing: -.01em; cursor: pointer; position: relative; transition: color .16s ease, background-color .16s ease; } .capnomic-nav__link:hover, .capnomic-nav__link:focus-visible, .capnomic-nav__trigger:hover, .capnomic-nav__trigger:focus-visible, .capnomic-nav__item.is-open > .capnomic-nav__trigger { color: var(--cap-shell-teal-deep); background: rgba(6, 75, 79, .09); } .capnomic-nav__link .capnomic-link-arrow { color: #8B96A6; font-size: .82em; line-height: 1; margin-left: 1px; flex: 0 0 auto; transition: color .16s ease, transform .16s ease; } .capnomic-nav__link:hover .capnomic-link-arrow, .capnomic-nav__link:focus-visible .capnomic-link-arrow { color: var(--cap-shell-teal); transform: translate(2px, -1px); } .capnomic-nav__chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; transition: transform .18s ease; } .capnomic-nav__item.is-open .capnomic-nav__chevron, .capnomic-nav__item:hover .capnomic-nav__chevron { transform: rotate(225deg) translate(-1px, -1px); } /* Mega menus */ .capnomic-mega { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 520px; padding: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; z-index: 50; } .capnomic-nav__item:hover > .capnomic-mega, .capnomic-nav__item:focus-within > .capnomic-mega, .capnomic-nav__item.is-open > .capnomic-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .capnomic-mega__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #fff; border: 1px solid var(--cap-shell-border); border-radius: 0 0 14px 14px; box-shadow: 0 18px 48px rgba(10, 22, 40, .12), 0 0 0 1px rgba(13, 115, 119, .04); overflow: hidden; } .capnomic-mega__column { padding: 22px 24px; } .capnomic-mega__column + .capnomic-mega__column { border-left: 1px solid var(--cap-shell-border); } .capnomic-mega__title { margin: 0 0 12px; color: var(--cap-shell-teal); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .capnomic-mega__list { list-style: none; margin: 0; padding: 0; } .capnomic-mega__link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; min-height: 40px; padding: 8px 10px; border-radius: 0; color: var(--cap-shell-navy); font-size: .9rem; font-weight: 550; text-decoration: none; background: transparent; transition: color .16s ease, font-weight .16s ease, transform .16s ease; } .capnomic-mega__link .capnomic-link-arrow { color: #8B96A6; opacity: .82; transform: none; transition: color .16s ease, transform .16s ease; flex: 0 0 auto; font-size: .88em; line-height: 1; } .capnomic-mega__link:hover, .capnomic-mega__link:focus-visible { background: transparent; color: var(--cap-shell-teal-deep); font-weight: 700; } .capnomic-mega__link:hover .capnomic-link-arrow, .capnomic-mega__link:focus-visible .capnomic-link-arrow { color: var(--cap-shell-teal); transform: translate(2px, -1px); } .capnomic-mega__link--featured { margin-top: 6px; border-top: 1px solid var(--cap-shell-border); border-radius: 0; padding-top: 14px; color: var(--cap-shell-navy); font-weight: 750; } /* Actions */ .capnomic-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; } .capnomic-header__search-trigger { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--cap-shell-navy); cursor: pointer; transition: background .16s ease, color .16s ease, transform .16s ease; } .capnomic-header__search-trigger:hover, .capnomic-header__search-trigger:focus-visible { background: var(--cap-shell-teal-soft); color: var(--cap-shell-teal-deep); transform: translateY(-1px); } /* Header YouTube CTA — refined, not generic red blob */ .capnomic-header__youtube { width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(145deg, #FF1A1A 0%, #CC0000 100%); color: #fff; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 2px 8px rgba(204, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .2); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .capnomic-header__youtube svg { width: 15px; height: 15px; fill: #FFFFFF !important; } .capnomic-header__youtube svg path { fill: #FFFFFF !important; } .capnomic-header__youtube:hover, .capnomic-header__youtube:focus-visible { transform: translateY(-1px) scale(1.04); box-shadow: 0 4px 14px rgba(204, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .25); } .capnomic-header__menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--cap-shell-gray); color: var(--cap-shell-navy); cursor: pointer; transition: background .16s ease, color .16s ease; } .capnomic-header__menu-toggle:hover { background: var(--cap-shell-teal-soft); color: var(--cap-shell-teal-deep); } .capnomic-header__menu-icon { display: flex; flex-direction: column; gap: 5px; width: 20px; } .capnomic-header__menu-icon span { height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .capnomic-header__menu-toggle[aria-expanded="true"] .capnomic-header__menu-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .capnomic-header__menu-toggle[aria-expanded="true"] .capnomic-header__menu-icon span:nth-child(2) { opacity: 0; } .capnomic-header__menu-toggle[aria-expanded="true"] .capnomic-header__menu-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Keep the mobile menu trigger above page-builder/content stacking contexts. */ .capnomic-header__actions { position: relative; z-index: 2147483001; } .capnomic-header__menu-toggle { position: relative; z-index: 2147483002; pointer-events: auto; } /* Search overlay */ .capnomic-search-panel { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; } .capnomic-search-panel[hidden] { display: none !important; } .capnomic-search-panel__overlay { position: absolute; inset: 0; background: rgba(10, 22, 40, .55); backdrop-filter: blur(4px); } .capnomic-search-panel__inner { position: relative; width: min(720px, calc(100% - 32px)); background: #fff; border-radius: 16px; box-shadow: 0 28px 80px rgba(10, 22, 40, .22), 0 0 0 1px rgba(13, 115, 119, .06); overflow: hidden; } .capnomic-search-panel__form { display: flex; align-items: center; gap: 12px; padding: 22px 24px; } .capnomic-search-panel__field { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; min-height: 54px; padding: 0 18px; background: #fff; border: 1px solid #D9E1E8; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(6, 75, 79, .02); transition: border-color .18s ease, box-shadow .18s ease; } .capnomic-search-panel__field:focus-within { border-color: var(--cap-shell-teal); box-shadow: 0 0 0 3px rgba(6, 75, 79, .10); } .capnomic-search-panel__field .capnomic-icon--search { flex: 0 0 auto; color: var(--cap-shell-teal-deep); } .capnomic-search-panel__input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--cap-shell-navy); background: transparent; font-family: 'Urbanist', sans-serif; font-size: 1rem; font-weight: 500; padding: 4px 0; } .capnomic-search-panel__input::placeholder { color: #687585; opacity: 1; } .capnomic-search-panel__input:focus { outline: 0; } .capnomic-search-panel__close, .capnomic-search-panel__clear { cursor: pointer; color: #7A8492; border: 0; background: transparent; } .capnomic-search-panel__close { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; } .capnomic-search-panel__close:hover { background: transparent; color: var(--cap-shell-teal-deep); } /* Mobile menu drawer */ .capnomic-mobile-menu { position: fixed !important; inset: 0 !important; z-index: 2147483003 !important; isolation: isolate; } .capnomic-mobile-menu[hidden] { display: none !important; } .capnomic-mobile-menu__overlay { position: absolute; z-index: 1; inset: 0; background: rgba(10, 22, 40, .58); opacity: 0; transition: opacity .24s ease; } .capnomic-mobile-menu.is-open .capnomic-mobile-menu__overlay { opacity: 1; } .capnomic-mobile-menu__panel { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: min(100%, 480px); background: #fff; color: var(--cap-shell-navy); transform: translateX(100%); transition: transform .28s cubic-bezier(.22, 1, .36, 1); box-shadow: -18px 0 50px rgba(10, 22, 40, .16); display: flex; flex-direction: column; } .capnomic-mobile-menu.is-open .capnomic-mobile-menu__panel { transform: translateX(0); } .capnomic-mobile-menu__header { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 20px; border-bottom: 1px solid var(--cap-shell-border); } .capnomic-mobile-menu__brand { color: var(--cap-shell-navy); font-size: 1.25rem; font-weight: 800; letter-spacing: -.04em; text-decoration: none; } .capnomic-mobile-menu__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--cap-shell-navy); background: var(--cap-shell-gray); font-size: 1.55rem; border: 0; cursor: pointer; transition: background .16s ease, color .16s ease; } .capnomic-mobile-menu__close:hover { background: var(--cap-shell-teal-soft); color: var(--cap-shell-teal-deep); } .capnomic-mobile-menu__nav { flex: 1; overflow-y: auto; padding: 8px 20px 20px; } .capnomic-mobile-nav { list-style: none; margin: 0; padding: 0; } .capnomic-mobile-nav__item { border-bottom: 1px solid var(--cap-shell-border); } .capnomic-mobile-nav__section-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .capnomic-mobile-nav__section-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: 58px; color: var(--cap-shell-navy); text-decoration: none; font: inherit; font-size: 1rem; font-weight: 700; text-align: left; } .capnomic-mobile-nav__section-link:hover, .capnomic-mobile-nav__section-link:focus-visible { color: var(--cap-shell-teal-deep); } .capnomic-mobile-nav__item > a, .capnomic-mobile-nav__toggle { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; color: var(--cap-shell-navy); background: transparent; border: 0; font: inherit; font-size: 1rem; font-weight: 700; text-decoration: none; text-align: left; cursor: pointer; } .capnomic-mobile-nav__toggle { width: 44px; flex: 0 0 44px; padding: 0; border: 0; background: transparent; color: var(--cap-shell-navy); font: inherit; cursor: pointer; } .capnomic-mobile-nav__toggle .capnomic-mobile-nav__plus { color: #8993A2; font-size: 1.35rem; font-weight: 400; transition: transform .2s ease, color .2s ease; display: inline-block; line-height: 1; } .capnomic-mobile-nav__toggle[aria-expanded="true"] .capnomic-mobile-nav__plus { color: var(--cap-shell-teal); } .capnomic-mobile-nav__item > a span.capnomic-link-arrow { color: #8993A2; margin-left: 7px; font-size: .9em; flex: 0 0 auto; transition: color .16s ease, transform .16s ease; } .capnomic-mobile-nav__item > a { justify-content: flex-start; gap: 0; } .capnomic-mobile-nav__item > a:hover, .capnomic-mobile-nav__item > a:focus-visible { color: var(--cap-shell-teal-deep); } .capnomic-mobile-nav__item > a:hover .capnomic-link-arrow, .capnomic-mobile-nav__item > a:focus-visible .capnomic-link-arrow { color: var(--cap-shell-teal); transform: translate(2px, -1px); } .capnomic-mobile-nav__panel[hidden] { display: none !important; } .capnomic-mobile-nav__panel { padding: 0 0 12px 8px; } .capnomic-mobile-nav__group { padding: 10px 0 6px; } .capnomic-mobile-nav__group h3 { margin: 0 0 7px; color: var(--cap-shell-teal); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .capnomic-mobile-nav__group ul { list-style: none; margin: 0; padding: 0; } .capnomic-mobile-nav__group a { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 43px; color: var(--cap-shell-navy); font-size: .9rem; text-decoration: none; } .capnomic-mobile-nav__group a:hover, .capnomic-mobile-nav__group a:focus-visible { color: var(--cap-shell-teal-deep); font-weight: 700; background: transparent; } .capnomic-mobile-nav__group a .capnomic-link-arrow { color: #9AA3AF; font-size: .9em; margin-left: 7px; flex: 0 0 auto; transition: color .16s ease, transform .16s ease; } .capnomic-mobile-nav__group a:hover .capnomic-link-arrow, .capnomic-mobile-nav__group a:focus-visible .capnomic-link-arrow { color: var(--cap-shell-teal); transform: translate(2px, -1px); } /* ─── Premium 3D Glass Social System (Mobile) ─── */ .capnomic-mobile-menu__social { padding: 18px 16px 12px; border-top: 1px solid var(--cap-shell-border); display: flex; flex-direction: column; align-items: center; gap: 12px; } .capnomic-mobile-menu__social-label { display: block; text-align: center; font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8B96A6; margin: 0; } .capnomic-mobile-menu__social-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center; align-items: center; gap: 10px; width: 100%; max-width: 100%; } .capnomic-mobile-menu__social-link { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px !important; max-height: 44px !important; flex: 0 0 44px !important; aspect-ratio: 1 / 1; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50% !important; /* Same Capnomic teal glass system as footer social buttons */ background: linear-gradient(145deg, rgba(13, 115, 119, .94) 0%, rgba(9, 90, 93, .96) 100%); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 2px 10px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.08); color: #fff !important; text-decoration: none; box-sizing: border-box; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .22s ease, border-color .22s ease, color .22s ease, transform .2s ease, box-shadow .22s ease; } .capnomic-mobile-menu__social-link svg { color: #fff !important; width: 18px; height: 18px; flex-shrink: 0; fill: currentColor !important; } .capnomic-mobile-menu__social-link svg path { fill: #fff !important; } .capnomic-mobile-menu__social-link--youtube svg { width: 17px; height: 17px; } .capnomic-mobile-menu__social-link--instagram svg { width: 18px; height: 18px; } .capnomic-mobile-menu__social-link--facebook svg { width: 19px; height: 19px; } .capnomic-mobile-menu__social-link--x svg { width: 16px; height: 16px; } .capnomic-mobile-menu__social-link--linkedin svg { width: 17px; height: 17px; } .capnomic-mobile-menu__social-link--whatsapp svg { width: 19px; height: 19px; } /* Glass hover — platform accent + teal edge */ .capnomic-mobile-menu__social-link:hover, .capnomic-mobile-menu__social-link:focus-visible { transform: translateY(-2px) scale(1.03); border-color: var(--cap-shell-teal-border); box-shadow: 0 6px 18px rgba(10, 22, 40, .1), 0 0 0 1px rgba(13, 115, 119, .12), inset 0 1px 0 rgba(255, 255, 255, .95); } .capnomic-mobile-menu__social-link--youtube:hover, .capnomic-mobile-menu__social-link--youtube:focus-visible { background: linear-gradient(145deg, #FF3333, #CC0000); border-color: rgba(204, 0, 0, .4); color: #fff; box-shadow: 0 6px 18px rgba(204, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .25); } .capnomic-mobile-menu__social-link--instagram:hover, .capnomic-mobile-menu__social-link--instagram:focus-visible { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: transparent; color: #fff; } .capnomic-mobile-menu__social-link--facebook:hover, .capnomic-mobile-menu__social-link--facebook:focus-visible { background: #1877F2; border-color: rgba(24, 119, 242, .5); color: #fff; } .capnomic-mobile-menu__social-link--x:hover, .capnomic-mobile-menu__social-link--x:focus-visible { background: #0A0A0A; border-color: #333; color: #fff; } .capnomic-mobile-menu__social-link--linkedin:hover, .capnomic-mobile-menu__social-link--linkedin:focus-visible { background: #0A66C2; border-color: rgba(10, 102, 194, .5); color: #fff; } .capnomic-mobile-menu__social-link--whatsapp:hover, .capnomic-mobile-menu__social-link--whatsapp:focus-visible { background: #25D366; border-color: rgba(37, 211, 102, .5); color: #fff; } /* Mobile search — premium pill, teal focus */ .capnomic-mobile-menu__search { padding: 12px 18px 24px; border-top: none; } .capnomic-mobile-search { display: flex; align-items: center; gap: 0; height: 50px; border: 1px solid rgba(13, 115, 119, .16); border-radius: 999px; background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFB 100%); overflow: hidden; box-shadow: 0 2px 8px rgba(10, 22, 40, .04), inset 0 1px 0 rgba(255, 255, 255, 1); transition: border-color .2s ease, box-shadow .2s ease; } .capnomic-mobile-search:focus-within { border-color: var(--cap-shell-teal); box-shadow: 0 0 0 3px var(--cap-shell-teal-glow), 0 2px 10px rgba(13, 115, 119, .08); } .capnomic-mobile-search__input { flex: 1; min-width: 0; height: 100%; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent; font: inherit; font-size: .95rem; padding: 0 8px 0 18px; color: var(--cap-shell-navy); -webkit-appearance: none; } .capnomic-mobile-search__input:focus, .capnomic-mobile-search__input:focus-visible { outline: 0 !important; box-shadow: none !important; border: 0 !important; } .capnomic-mobile-search__submit { width: 48px; height: 48px; border: 0; border-radius: 0; background: transparent; color: var(--cap-shell-teal); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: color .16s ease; } .capnomic-mobile-search__submit:hover { color: var(--cap-shell-teal-deep); } body.capnomic-shell-menu-open, body.capnomic-shell-search-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .capnomic-header *, .capnomic-header *::before, .capnomic-header *::after { transition-duration: .01ms !important; } } /* ================================================================ v1.6.0 — Premium three-row desktop header + robust mobile drawer ================================================================ */ .capnomic-header__desktop-shell { display: block; } .capnomic-header__mobile-shell { display: none; } .capnomic-header__row { width: 100%; background: #F7F9FA; } .capnomic-header__row--brand { min-height: 76px; border-bottom: 1px solid rgba(231, 235, 240, .72); } .capnomic-header__row--nav { min-height: 52px; background: #FFFFFF; border-bottom: 1px solid var(--cap-shell-border); } .capnomic-header__row--search { min-height: 70px; background: #F7F9FA; border-bottom: 1px solid var(--cap-shell-border); } .capnomic-header__container--brand, .capnomic-header__container--nav, .capnomic-header__container--search { width: min(100%, var(--cap-container-width, 1280px)); margin: 0 auto; padding-left: 28px; padding-right: 28px; } .capnomic-header__container--brand { min-height: 76px; display: flex; align-items: center; justify-content: flex-start; gap: 28px; } .capnomic-header__container--brand .capnomic-header__brand { flex: 0 0 auto; } .capnomic-header__container--brand .capnomic-header__logo-link { min-height: 44px; gap: 11px; } .capnomic-header__container--brand .capnomic-header__logo { width: 40px; height: 40px; max-width: 40px; max-height: 40px; min-width: 40px; min-height: 40px; } .capnomic-header__container--brand .capnomic-header__wordmark { font-size: 1.58rem !important; letter-spacing: .032em !important; } .capnomic-header__container--brand .capnomic-header__wordmark sup { font-size: .42em !important; margin-left: 3px; } .capnomic-header__social { display: flex; align-items: center; justify-content: flex-start; gap: 9px; min-width: 0; } .capnomic-header__social-link { width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(145deg, #0D7377 0%, #095A5D 100%); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 3px 10px rgba(10,22,40,.12), inset 0 1px 0 rgba(255,255,255,.18); color: #fff; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .capnomic-header__social-link svg { width: 17px; height: 17px; fill: currentColor; } .capnomic-header__social-link--instagram svg { width: 18px; height: 18px; } .capnomic-header__social-link--facebook svg { width: 19px; height: 19px; } .capnomic-header__social-link--x svg { width: 16px; height: 16px; } .capnomic-header__social-link--linkedin svg { width: 17px; height: 17px; } .capnomic-header__social-link--whatsapp svg { width: 18px; height: 18px; } .capnomic-header__social-link--youtube { width: auto; min-width: 96px; padding: 0 17px; gap: 8px; border-radius: 999px; background: linear-gradient(145deg, #FF1A1A 0%, #CC0000 100%); box-shadow: 0 4px 13px rgba(204,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22); font-size: .82rem; font-weight: 750; line-height: 1; } .capnomic-header__social-link--youtube svg { width: 16px; height: 16px; fill: #fff; } .capnomic-header__social-link:hover, .capnomic-header__social-link:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(10,22,40,.16), inset 0 1px 0 rgba(255,255,255,.24); } .capnomic-header__social-link--youtube:hover, .capnomic-header__social-link--youtube:focus-visible { background: linear-gradient(145deg, #FF3333 0%, #CC0000 100%); box-shadow: 0 7px 18px rgba(204,0,0,.28), inset 0 1px 0 rgba(255,255,255,.24); } .capnomic-header__container--nav { min-height: 52px; display: flex; align-items: center; justify-content: center; } .capnomic-header__container--nav .capnomic-header__nav { width: 100%; justify-content: center; } .capnomic-header__container--nav .capnomic-nav--desktop { width: 100%; justify-content: center; gap: 4px; flex-wrap: nowrap; } .capnomic-header__container--nav .capnomic-nav__link, .capnomic-header__container--nav .capnomic-nav__trigger { min-height: 42px; padding: 9px 11px; font-size: .82rem; font-weight: 650; white-space: nowrap; border-radius: 8px; } .capnomic-header__container--nav .capnomic-nav__item { flex: 0 0 auto; } .capnomic-header__container--search { min-height: 70px; display: flex; align-items: center; } .capnomic-header-search { width: 100%; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 7px 0 17px; border: 1px solid rgba(13,115,119,.17); border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(10,22,40,.045), inset 0 1px 0 rgba(255,255,255,1); transition: border-color .18s ease, box-shadow .18s ease; } .capnomic-header-search:focus-within { border-color: var(--cap-shell-teal); box-shadow: 0 0 0 3px var(--cap-shell-teal-glow), 0 3px 12px rgba(13,115,119,.07); } .capnomic-header-search__icon { flex: 0 0 auto; color: var(--cap-shell-teal-deep); } .capnomic-header-search input[type="search"] { flex: 1; min-width: 0; height: 100%; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent; font: inherit; font-size: .95rem; font-weight: 500; color: var(--cap-shell-navy); padding: 0; } .capnomic-header-search input[type="search"]::placeholder { color: #7A8492; opacity: 1; } .capnomic-header-search__submit { height: 38px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--cap-shell-teal); color: #fff; font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; transition: background .18s ease, transform .18s ease; } .capnomic-header-search__submit:hover, .capnomic-header-search__submit:focus-visible { background: var(--cap-shell-teal-deep); transform: translateY(-1px); } /* Mobile drawer: it is portaled to by JS so page-builder stacking contexts cannot clip or flatten it after scrolling. */ .capnomic-mobile-menu { position: fixed !important; inset: 0 !important; z-index: 2147483646 !important; isolation: isolate !important; } .capnomic-mobile-menu__panel { position: fixed !important; inset: 0 !important; width: 100% !important; max-width: none !important; height: 100dvh !important; min-height: 100vh !important; background: #fff !important; transform: translateX(100%); z-index: 2 !important; display: flex; flex-direction: column; overflow: hidden; box-shadow: none; } .capnomic-mobile-menu.is-open .capnomic-mobile-menu__panel { transform: translateX(0); } .capnomic-mobile-menu__nav { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 1199px) { .capnomic-header__desktop-shell { display: none; } .capnomic-header__mobile-shell { display: block; } .capnomic-header__inner { height: 76px; min-height: 76px; } .capnomic-header__container--mobile { display: flex; align-items: center; gap: 14px; padding: 0 22px; } .capnomic-header__container--mobile .capnomic-header__brand { margin-right: auto; } .capnomic-header__container--mobile .capnomic-header__logo-link { display: inline-flex; } .capnomic-header__actions { position: relative; z-index: 2147483001; } .capnomic-header__menu-toggle { position: relative; z-index: 2147483002; pointer-events: auto; } } @media (max-width: 767px) { .capnomic-header__inner { height: 72px; min-height: 72px; } .capnomic-header__container--mobile { padding: 0 16px; } .capnomic-header__container--mobile .capnomic-header__logo { max-width: 30px; max-height: 30px; width: 30px; height: 30px; min-width: 30px; min-height: 30px; } .capnomic-header__container--mobile .capnomic-header__wordmark { font-size: 1.14rem; } .capnomic-header__container--mobile .capnomic-header__youtube { width: 38px; height: 38px; flex-basis: 38px; } .capnomic-header__container--mobile .capnomic-header__youtube svg { width: 14px; height: 14px; } .capnomic-header__container--mobile .capnomic-header__menu-toggle { width: 42px; height: 42px; } .capnomic-mobile-menu__panel { height: 100dvh !important; } .capnomic-mobile-menu__search { padding-left: 0 !important; padding-right: 0 !important; } .capnomic-mobile-search { width: 80% !important; margin-left: auto !important; margin-right: auto !important; } .capnomic-mobile-search__submit svg { width: 24px !important; height: 24px !important; } } /* ======================================================================== v1.7.0 — Theme isolation / deterministic sizing Blocksy and page builders may apply generic height, display, margin, padding and flex rules to header descendants. The shell must own its box model completely so each desktop row stays compact and predictable. ======================================================================== */ .capnomic-header, .capnomic-header * { box-sizing: border-box; } .capnomic-header { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: both !important; } .capnomic-header__desktop-shell, .capnomic-header__mobile-shell { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; float: none !important; } .capnomic-header__row { display: block !important; position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: both !important; } .capnomic-header__row--brand { height: 76px !important; } .capnomic-header__row--nav { height: 54px !important; } .capnomic-header__row--search { height: 70px !important; } .capnomic-header__row--brand > .capnomic-header__container--brand, .capnomic-header__row--nav > .capnomic-header__container--nav, .capnomic-header__row--search > .capnomic-header__container--search { display: flex !important; align-items: center !important; width: min(100%, var(--cap-container-width, 1280px)) !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; padding-top: 0 !important; padding-bottom: 0 !important; float: none !important; } .capnomic-header__container--brand { justify-content: flex-start !important; } .capnomic-header__container--nav { justify-content: center !important; } .capnomic-header__container--search { justify-content: stretch !important; } .capnomic-header__container--brand > *, .capnomic-header__container--nav > *, .capnomic-header__container--search > * { margin-top: 0 !important; margin-bottom: 0 !important; } .capnomic-header__container--nav .capnomic-header__nav, .capnomic-header__container--nav .capnomic-nav--desktop { height: 100% !important; min-height: 0 !important; } .capnomic-header__container--nav .capnomic-header__nav { display: flex !important; align-items: center !important; justify-content: center !important; } .capnomic-header__container--nav .capnomic-nav--desktop { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .capnomic-header__container--nav .capnomic-nav__item, .capnomic-header__container--nav .capnomic-nav__link, .capnomic-header__container--nav .capnomic-nav__trigger { margin-top: 0 !important; margin-bottom: 0 !important; } .capnomic-header-search { width: 100% !important; max-width: none !important; margin: 0 !important; } .capnomic-header__mobile-shell { display: none !important; } @media (max-width: 1199px) { .capnomic-header__desktop-shell { display: none !important; } .capnomic-header__mobile-shell { display: block !important; } .capnomic-header__inner { display: block !important; width: 100% !important; height: 76px !important; min-height: 76px !important; max-height: 76px !important; margin: 0 !important; padding: 0 !important; } .capnomic-header__container--mobile { display: flex !important; align-items: center !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 22px !important; } } @media (max-width: 767px) { .capnomic-header__inner, .capnomic-header.is-scrolled.capnomic-header--compact-on-scroll .capnomic-header__inner { height: 68px !important; min-height: 68px !important; max-height: 68px !important; } .capnomic-header__container--mobile { padding-left: 16px !important; padding-right: 16px !important; } } /* ======================================================================== v1.7.1 — Brand spacing + right-aligned desktop social system ======================================================================== */ .capnomic-header__container--brand .capnomic-header__wordmark { letter-spacing: .018em !important; word-spacing: 0 !important; } .capnomic-header__container--brand .capnomic-header__social { margin-left: auto !important; justify-content: flex-end !important; flex: 0 0 auto !important; } .capnomic-header__container--brand .capnomic-header__brand { flex: 0 0 auto !important; } @media (max-width: 1199px) { .capnomic-header__container--brand .capnomic-header__social { margin-left: 0 !important; } } /* ======================================================================== v1.7.2 — Brand typography + white header social system ======================================================================== */ .capnomic-header__container--brand .capnomic-header__wordmark { font-size: 1.58rem !important; font-weight: 800 !important; letter-spacing: .032em !important; word-spacing: 0 !important; color: var(--cap-shell-navy) !important; } .capnomic-header__container--brand .capnomic-header__wordmark sup { font-size: .42em !important; font-weight: 750 !important; letter-spacing: 0 !important; line-height: 0 !important; color: inherit !important; } .capnomic-header__social-link { color: #fff !important; } .capnomic-header__social-link svg, .capnomic-header__social-link svg path { color: #fff !important; fill: #fff !important; stroke: none !important; } .capnomic-header__social-link--youtube, .capnomic-header__social-link--youtube span { color: #fff !important; } .capnomic-header__social-link--youtube svg, .capnomic-header__social-link--youtube svg path { fill: #fff !important; } /* ======================================================================== v1.8.3 — Header social system mirrors footer - Same six-platform icon system, sizing, base treatment and hover motion. - YouTube remains the header's pill CTA and uses the footer subscribe URL. ======================================================================== */ .capnomic-header__social { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; } .capnomic-header__social-link { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; flex: 0 0 42px !important; aspect-ratio: 1 / 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: linear-gradient(145deg, rgba(7,94,98,.96) 0%, rgba(4,63,66,.98) 100%) !important; border: 1px solid rgba(255,255,255,.2) !important; box-shadow: 0 2px 10px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.08) !important; color: rgba(255,255,255,.95) !important; box-sizing: border-box !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .22s ease, border-color .22s ease, transform .2s ease, box-shadow .22s ease !important; } .capnomic-header__social-link svg { width: 17px !important; height: 17px !important; fill: currentColor !important; } .capnomic-header__social-link svg path { fill: currentColor !important; } .capnomic-header__social-link--youtube svg { width: 16px !important; height: 16px !important; } .capnomic-header__social-link--instagram svg { width: 17px !important; height: 17px !important; } .capnomic-header__social-link--facebook svg { width: 18px !important; height: 18px !important; } .capnomic-header__social-link--x svg { width: 15px !important; height: 15px !important; } .capnomic-header__social-link--linkedin svg { width: 16px !important; height: 16px !important; } .capnomic-header__social-link--whatsapp svg { width: 18px !important; height: 18px !important; } /* Header YouTube keeps the requested pill shape. */ .capnomic-header__social-link--youtube { width: auto !important; min-width: 120px !important; height: 42px !important; min-height: 42px !important; flex: 0 0 auto !important; padding: 0 20px !important; gap: 8px !important; border-radius: 999px !important; background: linear-gradient(145deg, #FF1A1A 0%, #CC0000 100%) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.2) !important; box-shadow: 0 2px 10px rgba(204,0,0,.20), inset 0 1px 0 rgba(255,255,255,.16) !important; } .capnomic-header__social-link--youtube span { color: #fff !important; font-size: .82rem; font-weight: 750; line-height: 1; } /* Exact footer hover motion and platform treatments. */ .capnomic-header__social-link:hover, .capnomic-header__social-link:focus-visible { transform: translateY(-2px) !important; border-color: rgba(255,255,255,.45) !important; box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.2) !important; } .capnomic-header__social-link--youtube:hover, .capnomic-header__social-link--youtube:focus-visible { background: linear-gradient(145deg, #FF3333, #CC0000) !important; color: #fff !important; } .capnomic-header__social-link--instagram:hover, .capnomic-header__social-link--instagram:focus-visible { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; color: #fff !important; } .capnomic-header__social-link--facebook:hover, .capnomic-header__social-link--facebook:focus-visible { background: #1877F2 !important; color: #fff !important; } .capnomic-header__social-link--x:hover, .capnomic-header__social-link--x:focus-visible { background: #000 !important; color: #fff !important; } .capnomic-header__social-link--linkedin:hover, .capnomic-header__social-link--linkedin:focus-visible { background: #0A66C2 !important; color: #fff !important; } .capnomic-header__social-link--whatsapp:hover, .capnomic-header__social-link--whatsapp:focus-visible { background: #25D366 !important; color: #fff !important; } /* Mobile menu search: one deliberate empty row below the search bar and a 3× larger search glyph. */ @media (max-width: 767px) { .capnomic-mobile-menu__search { margin-bottom: 30px !important; } .capnomic-mobile-search__submit svg { width: 66px !important; height: 66px !important; max-width: 66px !important; max-height: 66px !important; } } @media (max-width: 767px) { .capnomic-mobile-search { height: 70px !important; min-height: 70px !important; } .capnomic-mobile-search__submit { width: 70px !important; height: 68px !important; min-width: 70px !important; min-height: 68px !important; } } /* ======================================================================== v1.8.4 — Unified header social/contact system - Header and mobile-menu social links use the same component/classes. - Add email contact immediately after WhatsApp. - Preserve the YouTube pill and its existing subscribe destination. ======================================================================== */ .capnomic-header__social { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; min-width: 0 !important; } .capnomic-header__social-link { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; flex: 0 0 42px !important; aspect-ratio: 1 / 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: linear-gradient(145deg, rgba(7,94,98,.96) 0%, rgba(4,63,66,.98) 100%) !important; border: 1px solid rgba(255,255,255,.2) !important; box-shadow: 0 2px 10px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.08) !important; color: rgba(255,255,255,.95) !important; box-sizing: border-box !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-decoration: none !important; transition: background .22s ease, border-color .22s ease, color .22s ease, transform .2s ease, box-shadow .22s ease !important; } .capnomic-header__social-link svg { width: 17px !important; height: 17px !important; fill: currentColor !important; } .capnomic-header__social-link svg path { fill: currentColor !important; } .capnomic-header__social-link--youtube svg { width: 16px !important; height: 16px !important; } .capnomic-header__social-link--instagram svg { width: 17px !important; height: 17px !important; } .capnomic-header__social-link--facebook svg { width: 18px !important; height: 18px !important; } .capnomic-header__social-link--x svg { width: 15px !important; height: 15px !important; } .capnomic-header__social-link--linkedin svg { width: 16px !important; height: 16px !important; } .capnomic-header__social-link--whatsapp svg { width: 18px !important; height: 18px !important; } .capnomic-header__social-link--email svg { width: 18px !important; height: 18px !important; } /* Keep the desktop/tablet YouTube element as the existing pill CTA. */ .capnomic-header__social-link--youtube { width: auto !important; min-width: 120px !important; height: 42px !important; min-height: 42px !important; flex: 0 0 auto !important; padding: 0 20px !important; gap: 8px !important; border-radius: 999px !important; background: linear-gradient(145deg, #FF1A1A 0%, #CC0000 100%) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.2) !important; box-shadow: 0 2px 10px rgba(204,0,0,.20), inset 0 1px 0 rgba(255,255,255,.16) !important; } .capnomic-header__social-link--youtube span { color: #fff !important; font-size: .82rem !important; font-weight: 750 !important; line-height: 1 !important; } .capnomic-header__social-link:hover, .capnomic-header__social-link:focus-visible { transform: translateY(-2px) scale(1.03) !important; border-color: rgba(255,255,255,.45) !important; box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.2) !important; } .capnomic-header__social-link--youtube:hover, .capnomic-header__social-link--youtube:focus-visible { background: linear-gradient(145deg, #FF3333, #CC0000) !important; color: #fff !important; } .capnomic-header__social-link--instagram:hover, .capnomic-header__social-link--instagram:focus-visible { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; color: #fff !important; } .capnomic-header__social-link--facebook:hover, .capnomic-header__social-link--facebook:focus-visible { background: #1877F2 !important; color: #fff !important; } .capnomic-header__social-link--x:hover, .capnomic-header__social-link--x:focus-visible { background: #000 !important; color: #fff !important; } .capnomic-header__social-link--linkedin:hover, .capnomic-header__social-link--linkedin:focus-visible { background: #0A66C2 !important; color: #fff !important; } .capnomic-header__social-link--whatsapp:hover, .capnomic-header__social-link--whatsapp:focus-visible { background: #25D366 !important; color: #fff !important; } .capnomic-header__social-link--email:hover, .capnomic-header__social-link--email:focus-visible { background: #EA4335 !important; color: #fff !important; } /* Mobile menu uses the exact same header social link component. */ .capnomic-mobile-menu__social .capnomic-header__social--mobile { width: 100% !important; margin: 0 !important; padding: 0 !important; justify-content: center !important; flex-wrap: wrap !important; gap: 10px !important; } .capnomic-mobile-menu__social .capnomic-header__social-link { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; } .capnomic-mobile-menu__social .capnomic-header__social-link--youtube { flex: 0 0 auto !important; width: auto !important; min-width: 120px !important; height: 42px !important; padding: 0 20px !important; } @media (max-width: 767px) { .capnomic-mobile-menu__social .capnomic-header__social--mobile { gap: 8px !important; } } @media (max-width: 374px) { .capnomic-mobile-menu__social .capnomic-header__social--mobile { gap: 7px !important; } } /* ======================================================================== v1.8.6 — Seven-icon parity + separate YouTube subscribe CTA Only separates the YouTube social icon from the existing subscribe CTA. ======================================================================== */ .capnomic-header__brand-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; min-width: 0 !important; } .capnomic-header__brand-actions .capnomic-header__social { flex: 0 0 auto !important; } .capnomic-header__social-link--youtube { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; flex: 0 0 40px !important; gap: 0 !important; border-radius: 50% !important; background: linear-gradient(145deg, #0D7377 0%, #095A5D 100%) !important; font-size: 0 !important; } .capnomic-header__social-link--youtube span { display: none !important; } .capnomic-header__social-link--youtube svg { width: 16px !important; height: 16px !important; } .capnomic-header__social-link--youtube:hover, .capnomic-header__social-link--youtube:focus-visible { background: #FF0000 !important; color: #fff !important; } .capnomic-header__youtube-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 176px !important; min-width: 176px !important; height: 44px !important; padding: 0 20px !important; border-radius: 999px !important; background: #FF0000 !important; border: 1px solid rgba(255,255,255,.18) !important; color: #fff !important; font-family: 'Urbanist', system-ui, sans-serif !important; font-size: .86rem !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; text-decoration: none !important; box-sizing: border-box !important; transition: box-shadow .2s ease, transform .2s ease !important; } .capnomic-header__youtube-cta svg { width: 16px !important; height: 16px !important; fill: currentColor !important; flex: 0 0 16px !important; } .capnomic-header__youtube-cta:hover, .capnomic-header__youtube-cta:focus-visible { background: #FF0000 !important; color: #fff !important; box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 7px 20px rgba(0,0,0,.20) !important; transform: translateY(-1px) !important; } .capnomic-header__youtube-cta--mobile { width: 176px !important; min-width: 176px !important; } @media (max-width: 767px) { .capnomic-header__brand-actions { gap: 8px !important; } .capnomic-header__brand-actions .capnomic-header__social { display: none !important; } .capnomic-header__youtube-cta--mobile { width: auto !important; min-width: 0 !important; height: 38px !important; padding: 0 13px !important; font-size: .75rem !important; } .capnomic-header__youtube-cta--mobile svg { width: 14px !important; height: 14px !important; flex-basis: 14px !important; } .capnomic-header__container--mobile .capnomic-header__actions { gap: 8px !important; } } /* ======================================================================== v1.8.7 — Footer social system is the single master for header + mobile. Targeted changes only: exact seven-icon parity and desktop right alignment. ======================================================================== */ .capnomic-header__brand-actions { margin-left: auto !important; justify-content: flex-end !important; align-items: center !important; gap: 12px !important; } /* Exact footer social geometry and base treatment. */ .capnomic-header__social { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .capnomic-header__social-link { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; flex: 0 0 42px !important; aspect-ratio: 1 / 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: linear-gradient(145deg, rgba(7,94,98,.96) 0%, rgba(4,63,66,.98) 100%) !important; border: 1px solid rgba(255,255,255,.2) !important; box-shadow: 0 2px 10px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.08) !important; color: rgba(255,255,255,.95) !important; box-sizing: border-box !important; text-decoration: none !important; transition: background .22s ease, border-color .22s ease, color .22s ease, transform .2s ease, box-shadow .22s ease !important; } .capnomic-header__social-link svg { width: 17px !important; height: 17px !important; fill: currentColor !important; } .capnomic-header__social-link svg path { fill: currentColor !important; } .capnomic-header__social-link--youtube svg { width: 16px !important; height: 16px !important; } .capnomic-header__social-link--instagram svg { width: 17px !important; height: 17px !important; } .capnomic-header__social-link--facebook svg { width: 18px !important; height: 18px !important; } .capnomic-header__social-link--x svg { width: 15px !important; height: 15px !important; } .capnomic-header__social-link--linkedin svg { width: 16px !important; height: 16px !important; } .capnomic-header__social-link--whatsapp svg { width: 18px !important; height: 18px !important; } .capnomic-header__social-link--email svg { width: 18px !important; height: 18px !important; } /* YouTube social icon is circular like the footer; the Subscribe CTA remains separate. */ .capnomic-header__social-link--youtube { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; flex: 0 0 42px !important; padding: 0 !important; gap: 0 !important; border-radius: 50% !important; background: linear-gradient(145deg, rgba(7,94,98,.96) 0%, rgba(4,63,66,.98) 100%) !important; font-size: 0 !important; font-weight: 400 !important; } .capnomic-header__social-link--youtube span { display: none !important; } /* Exact footer hover behavior. */ .capnomic-header__social-link:hover, .capnomic-header__social-link:focus-visible { transform: translateY(-2px) scale(1.03) !important; border-color: rgba(255,255,255,.45) !important; box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.2) !important; } .capnomic-header__social-link--youtube:hover, .capnomic-header__social-link--youtube:focus-visible { background: linear-gradient(145deg, #FF3333, #CC0000) !important; color: #fff !important; } .capnomic-header__social-link--instagram:hover, .capnomic-header__social-link--instagram:focus-visible { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; color: #fff !important; } .capnomic-header__social-link--facebook:hover, .capnomic-header__social-link--facebook:focus-visible { background: #1877F2 !important; color: #fff !important; } .capnomic-header__social-link--x:hover, .capnomic-header__social-link--x:focus-visible { background: #000 !important; color: #fff !important; } .capnomic-header__social-link--linkedin:hover, .capnomic-header__social-link--linkedin:focus-visible { background: #0A66C2 !important; color: #fff !important; } .capnomic-header__social-link--whatsapp:hover, .capnomic-header__social-link--whatsapp:focus-visible { background: #25D366 !important; color: #fff !important; } .capnomic-header__social-link--email:hover, .capnomic-header__social-link--email:focus-visible { background: #EA4335 !important; color: #fff !important; } /* Mobile hamburger uses the exact same seven-icon geometry; only wrapping adapts. */ .capnomic-mobile-menu__social .capnomic-header__social--mobile { width: 100% !important; margin: 0 !important; padding: 0 !important; justify-content: center !important; flex-wrap: wrap !important; gap: 10px !important; } .capnomic-mobile-menu__social .capnomic-header__social-link, .capnomic-mobile-menu__social .capnomic-header__social-link--youtube { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; flex: 0 0 42px !important; padding: 0 !important; border-radius: 50% !important; } .capnomic-mobile-menu__social .capnomic-header__social-link--youtube span { display: none !important; } @media (max-width: 767px) { .capnomic-mobile-menu__social .capnomic-header__social--mobile { gap: 8px !important; } } @media (max-width: 374px) { .capnomic-mobile-menu__social .capnomic-header__social--mobile { gap: 7px !important; } } /* v1.8.7 final parity: no hover scaling; movement only, so icon dimensions never change. */ .capnomic-header__social-link:hover, .capnomic-header__social-link:focus-visible { transform: translateY(-2px) !important; } /* Desktop mega-menu hover bridge: keeps the parent tab and panel as one continuous hover region. */ @media (min-width: 1200px) { .capnomic-nav__item--mega > .capnomic-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; background: transparent; pointer-events: auto; } }