/* ================================================================ ESV CMS CONNECTOR -- IFRAME-MODE STYLES ================================================================ All CSS for the ESV CMS admin/preview-iframe integration in one place. Used by Content.aspx, protected/ProtectedPage.master, and any other page template that loads CmsConnector/cms-connect.js. These rules ONLY take effect when html.__cmsHdrBarOn is present -- the class is stamped by cms-connect.js when it detects iframe mode (window.self !== window.top), so the public site rendering for normal visitors is completely unaffected. See CmsConnector/README.md for integration instructions. ================================================================ */ /* ========================================================= CMS LOGIN HANDLE -- ALWAYS HIDDEN ON PUBLIC SITE The JS adds .show + sets aria-hidden=false dynamically; !important wins regardless of class or inline style. Moved here from Controls/ucHeader.ascx as part of CmsConnector consolidation. ========================================================= */ #cmsLoginHandle, #cmsLoginHandle.show { display:none !important; visibility:hidden !important; pointer-events:none !important; } /* ========================================================= CMS LOGIN HANDLE: initial reveal fade-in ========================================================= */ #cmsLoginHandle { opacity: 0; transition: opacity 0.4s ease-in; animation: revealHandle 0s ease 1.3s forwards; } @keyframes revealHandle { to { opacity: 1; } } /* ========================================================= IFRAME MODE HEADER OVERRIDES When loaded inside the CMS admin preview iframe, drop the public site's sticky/fixed header behavior so the header scrolls naturally with the page. Live site is unaffected -- only fires when cms-connect.js stamps __cmsHdrBarOn on . Moved here from Controls/ucHeader.ascx as part of CmsConnector consolidation. Keep header element queries generic so this works for any tenant whose markup uses a top-level
. ========================================================= */ html.__cmsHdrBarOn header, html.__cmsHdrBarOn header.ih-header-pinned { position: static !important; top: auto !important; } /* Collapse rule -- when user clicks the toggle bar, header animates away to max-height 0. (Toggle pill is created by IIFE-G in cms-connect.js; this rule + its overflow companion below execute the hide.) */ html.__cmsHdrCollapsed header{ max-height:0 !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; } /* Only add top padding while the bar is expanded */ .cms-padding-active body { padding-top: var(--cmsbar-h); } /* ========================================================= CMS LOGIN OVERLAY - Sliding toolbar at top with embedded login iframe - Handle/tab toggles expanded state ========================================================= */ #cmsLoginToolbar{ position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000; display: block; transform: translateY(-100%); transition: transform .18s ease; pointer-events: none; overflow: hidden; will-change: transform; backface-visibility: hidden; } #cmsLoginToolbar.expanded{ transform: translateY(0); pointer-events: auto; } #cmsLoginFrame{ width: 100%; height: 52px; border: 0; display: block; background: transparent; } /* ---------- Tiny top-right “login” handle/tab ---------- */ #cmsLoginHandle{ position: fixed; top: 10px; right: 8px; z-index: 2147483001; display: none; } #cmsLoginHandle.show{ display: inline-flex; } #cmsLoginHandle button{ appearance:none; border:1px solid rgba(0,0,0,.12); background: rgba(11,27,51,.85); color:#fff; font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; border-radius:999px; padding:6px 10px; display:inline-flex; align-items:center; gap:6px; box-shadow:0 6px 18px rgba(0,0,0,.15); cursor:pointer; transition: filter .12s ease, transform .12s ease, background .12s ease; } #cmsLoginHandle button:hover{ filter:brightness(1.05); transform:translateY(-1px); } #cmsLoginHandle button:focus{ outline:2px solid #d2e7ff; outline-offset:2px; } #cmsLoginHandle .chev{ width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid #fff; transition: transform .18s ease; } #cmsLoginHandle.expanded .chev{ transform: rotate(180deg); } /* ========================================================= IFRAME-ONLY HEADER COLLAPSE BAR - Only active when page is embedded in CMS editor - Provides fixed bar for collapsing/expanding the header ========================================================= */ /* Smooth collapse on the real header */ header { max-height: var(--cmsHdrH, 5000px); overflow: hidden; transition: max-height .22s ease, opacity .18s ease, filter .18s ease; } /* When collapsed, hide the header */ html.__cmsHdrCollapsed header { max-height: 0px !important; opacity: 0; filter: blur(0.5px); pointer-events: none; } #__cmsHeaderToggle{ position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 40px; z-index: 999992147483002; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 12px; margin: 0; border: 0; border-bottom: 1px solid rgba(0,0,0,.14); border-radius: 0; background: rgb(23, 29, 50); color: #fff; font: 800 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0,0,0,.18); cursor: pointer; user-select: none; } /* Body padding-top reserves the 40px the fixed bar occupies so it doesn't overlap page content. */ html.__cmsHdrBarOn body { padding-top: 40px !important; } /* Hide the public site's fixed-header spacer when iframed -- the spacer was reserving an extra 81px for the fixed/sticky header. In iframe mode we want only the 40px toggle-bar gap, not 40px + 81px = 121px. */ html.__cmsHdrBarOn .ih-header-spacer { display: none !important; } #__cmsHeaderToggle:focus{ outline: 2px solid rgba(210,231,255,.9); outline-offset: -2px; /* keep focus ring inside the bar */ } #__cmsHeaderToggle .chev{ width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #fff; transition: transform .18s ease; } html.__cmsHdrCollapsed #__cmsHeaderToggle .chev{ transform: rotate(180deg); } #__cmsHeaderToggle .txt{ opacity: .95; } /* Override overflow:hidden on header so dropdown menus are not clipped. The collapsed state re-applies overflow:hidden. */ header { overflow: visible !important; } html.__cmsHdrCollapsed header { overflow: hidden !important; }