- TGaS L&D Leadership Demo
Building the L&D Architecture for Advisory Excellence at TGaS
See how the AI-enabled EEA workflow transforms assessment data into actionable development roadmaps.
/* TGAS Color Palette */
:root {
–tgas-deep-blue: #002B5C;
–tgas-advisory-blue: #0056A4;
–tgas-benchmark-blue: #1E90C6;
–tgas-light-blue: #E3F2FA;
–tgas-soft-gold: #D4A84B;
–tgas-navy: #050742;
–tgas-coral: #ff6150;
–tgas-coral-dark: #e5564a;
–tgas-white: #fefefe;
}
/* Video overlay background – covers entire viewport */
.video-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: var(–tgas-light-blue);
z-index: 999998;
}
.video-overlay.active {
display: block;
}
/* Hide ALL page content when video is active */
body.video-active > *:not(.video-overlay):not(.video-overlay-close):not(.uvp-player-wrapper):not(script):not(style) {
visibility: hidden !important;
}
body.video-active header,
body.video-active footer,
body.video-active .site-header,
body.video-active .site-footer,
body.video-active .ast-header-html-1,
body.video-active #masthead,
body.video-active #colophon,
body.video-active .entry-content > *:not(.video-overlay):not(.video-overlay-close):not(.uvp-player-wrapper) {
visibility: hidden !important;
}
/* FORCE close button and player to remain visible */
body.video-active .video-overlay-close,
body.video-active .uvp-player-wrapper,
body.video-active .video-overlay {
visibility: visible !important;
}
/* Close button – TGAS styled */
.video-overlay-close {
position: fixed;
top: 20px;
right: 30px;
background: var(–tgas-deep-blue);
color: #ffffff;
border: none;
width: 48px;
height: 48px;
border-radius: 50%;
font-size: 28px;
line-height: 1;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
z-index: 1000001;
box-shadow: 0 4px 12px rgba(0,43,92,0.3);
}
.video-overlay-close:hover {
background: var(–tgas-advisory-blue);
}
body.video-active .video-overlay-close {
display: flex;
}
/* Player wrapper – hidden off-screen initially but with real dimensions */
.uvp-player-wrapper {
position: fixed;
top: -200%;
left: 50%;
transform: translateX(-50%);
width: 90vw;
max-width: 1280px;
z-index: -1;
opacity: 0;
pointer-events: none;
}
/* When video is active, show player wrapper centered */
body.video-active .uvp-player-wrapper {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000000;
opacity: 1;
pointer-events: auto;
border-radius: 8px;
box-shadow: 0 25px 50px -12px rgba(0,43,92,0.4);
overflow: hidden;
}
/* Force UVP player dimensions */
.uvp-player-wrapper > div,
.uvp-player-wrapper .fwduvp-main-container,
.uvp-player-wrapper [id^=”fwduvpDiv”] {
width: 100% !important;
height: auto !important;
min-height: 400px;
}
/* TGAS Flex Feature Card – Dashboard style with Inter font */
.abr-flex-feature {
position: relative;
padding: 2rem;
background: #ffffff;
border-radius: 1rem;
border: 1px solid var(–tgas-advisory-blue);
border-left: 4px solid var(–tgas-advisory-blue);
font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
}
.abr-flex-feature .flex-feature-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.abr-flex-feature .flex-feature-header .icon-wrapper {
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
background: var(–tgas-deep-blue);
border-radius: 0.75rem;
flex-shrink: 0;
}
.abr-flex-feature .flex-feature-header .icon-wrapper .dashicons {
color: #ffffff;
font-size: 24px;
width: 24px;
height: 24px;
}
.abr-flex-feature .flex-feature-header h4 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(–tgas-deep-blue);
font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
}
.abr-flex-feature .flex-feature-body {
margin-bottom: 1.5rem;
}
.abr-flex-feature .flex-feature-body p {
margin: 0;
color: #334155;
line-height: 1.6;
font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
}
.abr-flex-feature .flex-feature-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
/* Primary button – TGAS Coral Pill style (matches portal) */
.abr-flex-feature .flex-action-video {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(–tgas-coral);
color: var(–tgas-white);
border: 2px solid transparent;
border-radius: 50px;
padding: 16px 32px;
font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
text-decoration: none;
box-shadow: 0 4px 20px rgba(255, 97, 80, 0.35);
transition: all 300ms ease;
}
.abr-flex-feature .flex-action-video:hover {
background: var(–tgas-coral-dark);
border-color: var(–tgas-coral-dark);
}
.abr-flex-feature .flex-action-video .dashicons {
font-size: 18px;
width: 18px;
height: 18px;
line-height: 1;
}
/* Secondary button – Outline with Light Blue hover */
.abr-flex-feature .flex-action-download {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: transparent;
color: var(–tgas-deep-blue);
border: 2px solid var(–tgas-deep-blue);
border-radius: 0.5rem;
padding: 10px 18px;
font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: all 0.15s ease;
}
.abr-flex-feature .flex-action-download:hover {
background: var(–tgas-light-blue);
color: var(–tgas-deep-blue);
border-color: var(–tgas-light-blue);
text-decoration: none;
}
.abr-flex-feature .flex-action-download .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
line-height: 1;
}
function openVideoOverlay() {
document.body.classList.add(‘video-active’);
document.getElementById(‘videoOverlay’).classList.add(‘active’);
document.body.style.overflow = ‘hidden’;
// Try to start playing after a brief delay
setTimeout(function() {
if (window.fwduvpPlayer0) {
window.fwduvpPlayer0.play();
}
}, 300);
}
function closeVideoOverlay() {
document.body.classList.remove(‘video-active’);
document.getElementById(‘videoOverlay’).classList.remove(‘active’);
document.body.style.overflow = ”;
// Pause video
if (window.fwduvpPlayer0) {
window.fwduvpPlayer0.pause();
}
}
// Close on Escape key
document.addEventListener(‘keydown’, function(e) {
if (e.key === ‘Escape’ && document.body.classList.contains(‘video-active’)) {
closeVideoOverlay();
}
});
// Close when clicking overlay background
document.getElementById(‘videoOverlay’).addEventListener(‘click’, function() {
closeVideoOverlay();
});