/* Pulls in the shared design-system/governance layer (tokens, .cy-btn/.cy-card/ .cy-badge primitives, mobile normalization) for every page that includes the shared nav partial (marketing, academy, community) -- added 2026-07-24 so these surfaces get the same governance layer as SecureOPS/admin/My Cynapse without needing a edit in all 16 templates individually. */ @import url("cynapse_ui_governance.css"); @font-face { font-family: "Cairo"; src: url("/static/fonts/Cairo-Variable.ttf") format("truetype"); font-weight: 200 900; font-style: normal; font-display: swap; } .cyn-global-nav, .cyn-global-nav * { box-sizing: border-box; letter-spacing: 0; } .cyn-global-nav { position: sticky; top: 0; z-index: 999; font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif; background: #ffffff; border-bottom: 1px solid rgba(6, 39, 31, 0.12); box-shadow: 0 10px 34px rgba(3, 25, 19, 0.10); color: #102820; } .cyn-global-nav:before { content: "CYNAPSE CYBER ASSURANCE PLATFORM"; display: flex; align-items: center; height: 34px; padding-left: max(28px, calc((100vw - 1540px) / 2 + 28px)); padding-right: max(28px, calc((100vw - 1540px) / 2 + 28px)); background: linear-gradient(90deg, #031913 0%, #06291f 56%, #0e3a2f 100%); color: rgba(255,255,255,.72); font-size: 11px; font-weight: 520; letter-spacing: .18em; border-bottom: 1px solid rgba(255,255,255,.10); } .cyn-global-nav a { color: inherit; text-decoration: none; } .cyn-global-nav button { font: inherit; } .cyn-global-nav__inner { width: min(1540px, calc(100% - 56px)); min-height: 86px; margin: 0 auto; display: grid; grid-template-columns: 305px minmax(0, 1fr) 330px; align-items: center; gap: 22px; } .cyn-global-nav__brand { width: 292px; min-height: 66px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 24px; border-radius: 18px; background: linear-gradient(135deg, #031913 0%, #063528 100%); box-shadow: 0 16px 38px rgba(3,25,19,.18); } .cyn-global-nav__brand img { width: 238px; max-height: 54px; object-fit: contain; display: block; filter: drop-shadow(0 6px 12px rgba(0,0,0,.22)); } .cyn-global-nav__menu { justify-self: center; display: inline-flex; align-items: center; gap: 3px; padding: 6px; border-radius: 999px; border: 1px solid rgba(6, 39, 31, 0.12); background: #ffffff; box-shadow: 0 10px 28px rgba(3, 25, 19, 0.08); } .cyn-global-nav__link { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: #18382f; cursor: pointer; white-space: nowrap; font-size: 0.93rem; font-weight: 360; transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; } .cyn-global-nav__link:hover { background: #f0f5ec; transform: translateY(-1px); } .cyn-global-nav__link.is-active, .cyn-global-nav__dropdown.is-open > .cyn-global-nav__trigger { background: #06271f; color: #ffffff; box-shadow: 0 10px 24px rgba(6, 39, 31, 0.16); } .cyn-global-nav__dropdown { position: relative; } .cyn-global-nav__trigger i { font-size: 0.72rem; transition: transform .18s ease; } .cyn-global-nav__dropdown.is-open .cyn-global-nav__trigger i { transform: rotate(180deg); } .cyn-global-nav__panel { position: absolute; top: calc(100% + 14px); left: 50%; width: 368px; transform: translateX(-50%) translateY(8px); opacity: 0; visibility: hidden; pointer-events: none; padding: 10px; border-radius: 18px; border: 1px solid rgba(6, 39, 31, 0.12); background: rgba(255, 255, 255, 0.99); box-shadow: 0 26px 70px rgba(3, 25, 19, 0.20); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; } .cyn-global-nav__dropdown.is-open .cyn-global-nav__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .cyn-global-nav__panel:before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); background: #fff; border-left: 1px solid rgba(6,39,31,.10); border-top: 1px solid rgba(6,39,31,.10); } .cyn-global-nav__panel a { position: relative; display: block; padding: 13px 14px; border-radius: 14px; color: #102820; } .cyn-global-nav__panel a:hover { background: #f3f8ee; } .cyn-global-nav__panel strong { display: block; font-size: 0.96rem; font-weight: 560; } .cyn-global-nav__panel span { display: block; margin-top: 3px; color: #61736d; font-size: 0.82rem; font-weight: 320; line-height: 1.45; } .cyn-global-nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .cyn-global-nav__button, .cyn-global-nav__mobile { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border-radius: 13px; border: 1px solid rgba(6, 39, 31, 0.16); background: #ffffff; color: #102820; font-size: .93rem; font-weight: 420; cursor: pointer; white-space: nowrap; } .cyn-global-nav .cyn-global-nav__button--dark, .cyn-global-nav .cyn-global-nav__button--dark:visited, .cyn-global-nav .cyn-global-nav__button--dark:hover, .cyn-global-nav .cyn-global-nav__button--dark *, .cyn-global-nav__button--dark { background: #031913; color: #ffffff !important; border-color: #031913; box-shadow: 0 15px 34px rgba(3,25,19,.24); } .cyn-global-nav__button--light { background: #fff; border-color: rgba(242,180,76,.72); color: #102820; } .cyn-global-nav__button--light:hover { box-shadow: 0 12px 28px rgba(242,180,76,.16); } .cyn-global-nav__mobile { display: none; width: 48px; padding: 0; } .cyn-global-nav__mobile-panel { display: none; width: min(1480px, calc(100% - 56px)); margin: 0 auto 14px; padding: 10px; border: 1px solid rgba(6,39,31,.12); border-radius: 18px; background: #fff; box-shadow: 0 20px 48px rgba(3,25,19,.12); } .cyn-global-nav__mobile-panel a { display: block; padding: 11px 12px; border-radius: 12px; color: #102820; font-weight: 340; } .cyn-global-nav__mobile-panel a:hover { background: #f3f8ee; } .cyn-global-nav.is-mobile-open .cyn-global-nav__mobile-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } @media (max-width: 1320px) { .cyn-global-nav__inner { grid-template-columns: 250px minmax(0,1fr) 230px; width: min(100% - 32px, 1480px); gap: 14px; } .cyn-global-nav__brand { width: 236px; padding-inline: 14px; } .cyn-global-nav__brand img { width: 200px; } .cyn-global-nav__link { padding-inline: 10px; font-size: .87rem; } .cyn-global-nav__button--light { display: none; } } @media (max-width: 1060px) { .cyn-global-nav:before { height: 30px; font-size: 10px; } .cyn-global-nav__inner { min-height: 78px; display: flex; } .cyn-global-nav__menu { display: none; } .cyn-global-nav__actions { margin-left: auto; } .cyn-global-nav__button--dark { display: none; } .cyn-global-nav__mobile { display: inline-flex; } .cyn-global-nav__mobile-panel { width: min(100% - 24px, 1480px); } } @media (max-width: 620px) { .cyn-global-nav__inner { width: min(100% - 22px, 1480px); min-height: 74px; } .cyn-global-nav__brand { width: 210px; min-height: 56px; padding-inline: 14px; border-radius: 16px; } .cyn-global-nav__brand img { width: 172px; max-height: 44px; } .cyn-global-nav.is-mobile-open .cyn-global-nav__mobile-panel { grid-template-columns: 1fr; } }