/* =========================================================================================== The platform's own header and footer, taken from givengain-next's globals.css so the dashboards sit inside the GivenGain site rather than beside it. header .sitehead > .navbar > .brand + .navcenter + .navactions footer .ftwrap > .ftbrand + .ftcols, then .ftbottom The classes and the CSS are theirs; only what goes in them differs, because a signed-in partner has no use for a marketing menu or a newsletter form. Bring a redesign across by copying these two blocks again. =========================================================================================== */ .sitehead{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .25s ease;} .sitehead.scrolled{background:rgba(21,0,109,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);} .sitehead.solid{background:rgba(21,0,109,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);} .sitehead .navbar{max-width:1060px;margin:0 auto;padding:13px 28px;display:flex;align-items:center;gap:28px;} .sitehead .brand{flex:0 0 auto;display:flex;align-items:center;height:40px;text-decoration:none;} .sitehead .brand img{height:30px;width:auto;display:block;} .sitehead .navcenter{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;} .sitehead .audience{display:flex;align-items:center;gap:24px;height:40px;} .sitehead .audience .aud{font-family:'Figtree',sans-serif;font-weight:700;font-size:.86rem;text-transform:uppercase;letter-spacing:.09em;line-height:1;color:#fff;text-decoration:none;white-space:nowrap;transition:color .2s ease,font-size .2s ease;} .sitehead.scrolled .audience .aud{font-size:.78rem;} .sitehead .audience .aud:hover{color:#fff;} .sitehead .audience .aud.active{color:var(--yellow);} .sitehead .audience .aud-discover{display:inline-flex;align-items:center;gap:7px;} .sitehead .aud-search{width:15px;height:15px;flex:0 0 auto;} .sitehead.scrolled .aud-search{width:14px;height:14px;} .sitehead .subnav{max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease;pointer-events:none;} .sitehead.scrolled .subnav{max-height:30px;opacity:1;pointer-events:auto;} .sitehead .subnav .links{display:flex;align-items:center;gap:26px;padding-top:4px;} .sitehead .subnav .links a{font-size:.69rem;text-transform:uppercase;letter-spacing:.13em;font-weight:600;color:#cbc7ee;text-decoration:none;white-space:nowrap;padding-bottom:2px;border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease;} .sitehead .subnav .links a:hover{color:#fff;} .sitehead .subnav .links a.active{color:#fff;border-bottom-color:var(--yellow);} .sitehead .navactions{flex:0 0 auto;display:flex;align-items:center;gap:14px;height:40px;min-width:0} .sitehead .navcenter{flex:1 1 auto} @media(max-width:1280px){.sitehead .partner select{max-width:170px}} @media(max-width:1180px){.sitehead .navactions .who{display:none}} .sitehead .navlogin{color:#fff;font-weight:800;font-size:.9rem;text-decoration:none;height:40px;min-width:92px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.45);transition:background .15s,border-color .15s;} .sitehead .navlogin:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.7);} .sitehead .navcta{background:var(--yellow);color:var(--navy);font-weight:800;font-size:.9rem;height:40px;min-width:92px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border-radius:999px;text-decoration:none;transition:background .15s;} .sitehead .navcta:hover{background:#ffd64a;color:var(--navy);} .sitehead .navsearch{color:#fff;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 17px;border-radius:999px;text-decoration:none;border:1.5px solid rgba(255,255,255,.45);font-weight:600;font-size:.92rem;white-space:nowrap;box-sizing:border-box;transition:background .15s,border-color .15s,color .15s;} .sitehead .navsearch:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.7);} .sitehead .navsearch svg{width:17px;height:17px;flex:0 0 auto;} @media(max-width:940px){.navsearch{display:none;}} .sitehead.open .navtoggle .ic-menu{display:none;}.sitehead.open .navtoggle .ic-close{display:block;}.sitehead.open .mobilemenu{display:flex;} .mm-aud{display:flex;flex-wrap:wrap;gap:20px;padding:8px 0 14px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:8px;} .mm-aud a{color:#e9e7fb;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;padding:6px 0;border:none;text-decoration:none;} /* On the marketing site the head floats over a hero, which is why it is fixed and transparent. These pages have no hero, so it keeps its own navy and the page starts below it. */ @media print{body{padding-top:0!important}} /* On the marketing site the head floats over a hero, so it is translucent. Here it sits over the page's own white, and .94 of navy over white is a lighter navy than the band below it: two blues where there should be one. It is the solid navy, the same one everything else in the header uses. */ .sitehead{background:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none} .sitehead.scrolled,.sitehead.solid{background:var(--navy)} .sitehead .navbar{align-items:center} /* GivenGain's mark, a hairline, then the partner's. One bar, both identities. */ .sitehead .headsep{width:1px;height:24px;background:rgba(255,255,255,.26);flex:0 0 auto} .sitehead .headlabel{font-size:.72rem;font-weight:800;color:#fff;white-space:nowrap;flex:0 0 auto; text-transform:uppercase;letter-spacing:.14em} .sitehead .partner{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto;overflow:hidden} .sitehead .partner img{height:32px;width:auto;max-width:120px;object-fit:contain;display:block;flex:0 0 auto} .sitehead .partner img.plate{background:#fff;border-radius:8px;padding:3px;height:30px} .sitehead .partner .pname{font-size:.92rem;font-weight:700;color:#fff;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:min(38vw,420px)} .sitehead .partner select{appearance:none;font-family:inherit;font-size:.86rem;font-weight:700;color:#fff; max-width:220px;min-width:0;background:rgba(255,255,255,.13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center/10px; border:1px solid rgba(255,255,255,.26);border-radius:9px;padding:6px 28px 6px 11px;cursor:pointer;text-overflow:ellipsis} .sitehead .partner select:hover{background-color:rgba(255,255,255,.2)} .sitehead .partner select option{color:var(--navy);background:#fff} @media(max-width:900px){.sitehead .partner .pname{display:none}} .sitehead .headslot{display:flex;align-items:center;gap:12px} .sitehead .iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px; color:rgba(255,255,255,.72);border-radius:8px;transition:color .15s,background .15s} .sitehead .iconbtn:hover{color:#fff;background:rgba(255,255,255,.1)} .sitehead .iconbtn svg{width:18px;height:18px} .sitehead .headslot .live{display:inline-flex;align-items:center;gap:8px;font-size:.78rem; color:rgba(255,255,255,.72);font-weight:600;white-space:nowrap} @media(max-width:1100px){.sitehead .headslot .live{display:none}} @media(max-width:900px){.sitehead .partner .pname{display:none}} @media(max-width:700px){.sitehead .headsep,.sitehead .headlabel,.sitehead .partner{display:none}} .sitehead .navcenter{justify-content:center} .sitehead .navactions .who{color:rgba(255,255,255,.66);font-size:.86rem;font-weight:600;white-space:nowrap} .sitehead .navactions .who b{color:#fff;font-weight:700} @media(max-width:820px){.navbar{gap:14px;padding:11px 16px}.audience{gap:14px} .audience .aud{font-size:.72rem;letter-spacing:.06em}.navactions .who{display:none}} @media print{.sitehead{display:none}} footer.ggfoot{background:var(--navy);color:#fff;padding:44px 0 34px;text-align:left;} footer.ggfoot .ftwrap{max-width:1060px;margin:0 auto;padding:0 28px;display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;} footer.ggfoot .ftbrand{flex:0 0 auto;} footer.ggfoot .ftlogo-link{display:inline-block;line-height:0;margin:0 0 16px;} footer.ggfoot .ftlogo-link:hover{opacity:.85;} footer.ggfoot .ftlogo{height:50px;width:auto;display:block;} footer.ggfoot .ft{color:var(--yellow)!important;font-family:'Figtree',sans-serif!important;font-weight:800!important;font-size:1.3rem;letter-spacing:-.01em;margin:0;} footer.ggfoot .ftcols{display:flex;gap:56px;flex-wrap:wrap;} footer.ggfoot .ftlinks{display:flex;gap:30px;flex-wrap:wrap;align-items:flex-start;padding-top:6px} footer.ggfoot .ftlinks a{color:#cfcae8;text-decoration:none;font-size:.95rem;font-weight:600;transition:color .15s} footer.ggfoot .ftlinks a:hover{color:var(--yellow)} footer.ggfoot .ftcol h4{color:#fff;font-family:'Figtree',sans-serif;font-weight:800;font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;opacity:.55;margin:0 0 16px;} footer.ggfoot .ftcol a{display:block;color:#cfcae8;text-decoration:none;font-size:.95rem;margin:0 0 11px;transition:color .15s;} footer.ggfoot .ftcol a:hover{color:var(--yellow);} footer.ggfoot .ftbottom{max-width:1060px;margin:34px auto 0;padding:22px 28px 0;border-top:1px solid rgba(255,255,255,.12);} footer.ggfoot .ftwho{color:#cfcae8;font-size:.85rem;margin:0 0 14px} footer.ggfoot .ftwho b{color:#fff;font-weight:700} footer.ggfoot .ftwho a{color:var(--yellow);font-weight:700} footer.ggfoot .ftlegal{display:flex;flex-wrap:wrap;gap:24px;margin:0 0 16px;} /* The "Cookie settings" control is a