body[data-access="professional"] .gated-wrap { visibility: hidden; } body.access-granted .gated-wrap { visibility: visible; } .router-overlay { position: fixed; inset: 0; z-index: 1000; display: none; background: rgba(7,30,86,.82); backdrop-filter: blur(6px); padding: 24px; overflow-y: auto; } .router-overlay.show { display: grid; place-items: center; } .router-card { background: #fff; max-width: 900px; width: 100%; border-radius: 16px; box-shadow: 0 18px 44px rgba(7,30,86,.10); overflow: hidden; margin: auto; } .router-head { background: #071E56; color: #fff; padding: 34px 38px 28px; } .router-head img { height: 28px; width: auto; display: block; margin-bottom: 20px; } .router-head h2 { color: #fff; margin: 0 0 8px; } .router-head p { margin: 0; color: #C2CCE6; font-size: .97rem; } .router-body { padding: 28px 38px 34px; } .router-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .router-opt { text-align: left; border: 1px solid #E4E7F0; border-radius: 12px; padding: 22px; background: #fff; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; height: 100%; transition: background .15s, border-color .15s; } .router-opt:hover { background: #F3F2F7; border-color: #071E56; } .router-opt h3 { font-size: 1.02rem; margin: 0 0 8px; color: #071E56; } .router-opt p { font-size: .85rem; color: #565F72; margin: 0 0 16px; flex: 1; } .router-opt .pick { font-weight: 700; color: #363AD8; font-size: .88rem; } .router-opt.is-pro { border-top: 3px solid #071E56; } .router-certify { font-size: .76rem; color: #8891A3; margin-top: 10px; } .router-note { margin-top: 24px; font-size: .77rem; color: #565F72; line-height: 1.6; border-top: 1px solid #E4E7F0; padding-top: 18px; } .cookie-notice { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 720px; margin: 0 auto; background: #071E56; color: #D5DCEE; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; box-shadow: 0 18px 44px rgba(7,30,86,.10); padding: 16px 20px; display: flex; align-items: center; gap: 16px; font-size: .88rem; } .cookie-notice a { color: #8595F3; } .cookie-notice .cookie-ok { margin-left: auto; flex: 0 0 auto; background: #fff; color: #071E56; border: 0; font-family: inherit; font-weight: 700; font-size: .84rem; padding: 10px 20px; border-radius: 100px; cursor: pointer; } @media (max-width: 760px) { .router-options { grid-template-columns: 1fr; } } @media (max-width: 560px) { .cookie-notice { flex-direction: column; align-items: flex-start; } .cookie-notice .cookie-ok { margin-left: 0; } } /* Cache-safe role-aware header menu: the header renders ALL items (superset) for everyone; these rules hide the items the visitor's role can't see. The role class is stamped on by an inline head script (role-menu-cache-safe.php), item role classes are added server-side by path. No role class yet / unknown role behaves as public (items stay hidden until the matching role is present). !important beats Blocksy's own display on menu
  • s. */ :root:not(.gtc-role-professional) li.gtc-nav-role-professional, :root:not(.gtc-role-entrepreneur) li.gtc-nav-role-entrepreneur { display: none !important; } /* Blocksy sets `transition: all` on header menu items, so any load-time reflow (self-hosted font swap, or the JS-inserted role-switch pill) gets ANIMATED into a visible "push and bounce" on every navigation. Restrict the animated properties to colour/opacity so layout changes are instant (hover effects still animate). */ .ct-header li.menu-item, .ct-header .ct-menu-link { transition-property: color, background-color, border-color, opacity, box-shadow, text-decoration-color !important; }