:root {
/* Brand colours */
--color-navy: #001E60;
--color-blue: #004C97;
--color-blue-mid: #0072CE;
--color-green: #84BD00;
--color-lime: #D0DF00;
/* Neutrals */
--color-white: #ffffff;
--color-dark: #1A1A1A;
--color-black: #000000;
/* Gradients */
--gradient-bg: linear-gradient(143deg, #004C97 21.66%, #001E60 90.56%);
--gradient-green: linear-gradient(225deg, #84BD00 30%, #D0DF00 100%);
--gradient-blue: linear-gradient(318deg, #0072CE 7.13%, rgba(0, 114, 206, 0.99) 100%);
/* Typography */
--font-primary: 'Brando Sans TEST', 'Helvetica Neue', Arial, sans-serif;
/* Transitions */
--transition-base: 0.4s ease;
--transition-fast: 0.2s ease;
}
/* ============================================================
BASE / RESET
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 0.052086vw;
/* 1rem =Â 1px at 1920px viewport */
/* height: 100%; */
}
body.app-body {
font-family: var(--font-primary);
font-weight: 400;
/* ExtraLight as default body weight */
color: var(--color-white);
height: 100%;
/* overflow: hidden; */
background: var(--gradient-bg);
min-height: 100vh;
display: flex;
flex-direction: column;
}
img {
display: block;
max-width: 100%;
}
button {
font-family: var(--font-primary);
}
/* Font weight reference: hero / display titles */
ul {
list-style: none;
padding: 0;
}
/* ============= HEADER ====================== */
.app-header {
/* position: sticky; */
top: 0;
left: 0;
right: 0;
height: 70rem;
z-index: 9;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0 40rem;
}
.hamburger-btn {
background: none;
border: none;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 6rem;
padding: 0;
width: 44rem;
height: 44rem;
border-radius: 6px;
background: var(--gradient-blue);
padding: 8rem;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: transform;
}
.hamburger-btn:hover {
transform: scale(1.08);
box-shadow: 0 4rem 12rem rgba(0, 114, 206, 0.4);
}
.hamburger-btn svg {
width: 100%;
height: 100%;
}
.hamburger-btn:hover svg {
/* No rotation animation */
}
.hdr-left {
display: flex;
align-items: center;
gap: 8rem;
}
.hdr-right {
display: flex;
align-items: flex-end;
gap: 16rem;
}
.logo-insperity {
width: 131rem;
}
.logo-sep {
width: 1rem;
height: 32rem;
background: rgb(255 255 255);
flex-shrink: 0;
}
.logo-workday {
width: 88rem;
}
/* ============================================================
MAIN + PAGE SYSTEM
============================================================ */
.app-main {
/* position: absolute; */
top: 100rem;
left: 0;
right: 0;
bottom: 0;
/* overflow: hidden; */
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.page {
/* position: absolute; */
/* inset: 0; */
display: none;
/* overflow: hidden; */
padding-bottom: 30rem;
}
/* Each page gets its own display type when active */
#page-home.active {
display: flex;
flex-direction: column;
}
#page-hrscale.active {
display: flex;
flex-direction: column;
}
#page-role.active {
display: block;
}
#page-role-detail.active {
display: block;
}
/* ============================================================
BACK BUTTON (shared)
============================================================ */
.back-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 46rem;
height: 46rem;
flex-shrink: 0;
margin-right: 5rem;
transition: transform var(--transition-fast);
}
.back-btn svg {
width: 100%;
height: 100%;
display: block;
}
.back-btn .back-btn-rect {
transition: fill var(--transition-fast), stroke-opacity var(--transition-fast);
fill: transparent;
}
.back-btn:hover .back-btn-rect {
fill: rgba(255, 255, 255, 0.18);
stroke-opacity: 1;
}
.back-btn:hover {
transform: scale(1.06);
}
/* ============================================================
HOME PAGE
============================================================ */
/* Pre-hide elements that GSAP will animate in prevents flash on load */
.app-header,
.home-title,
.home-sub,
.home-wheel-svg,
.home-role .role-btn {
visibility: hidden;
}
/* HRScale page hidden until GSAP animates them in on navigation */
#page-hrscale .ecard-item,
#page-hrscale .hrscale-cta,
#page-hrscale .hside-card,
#page-hrscale .wheel-img {
visibility: hidden;
}
/* Role page hidden until GSAP animates them in on navigation */
#page-role .role-title,
#page-role .wheel-img,
#page-role .rc-btn {
visibility: hidden;
transform-origin: center center;
}
/* Prevent layout shift while buttons are scaled to 0 */
.home-role .role-btn {
transform-origin: center center;
}
.home-intro {
text-align: center;
padding: 0rem 50rem 35rem;
flex-shrink: 0;
position: relative;
z-index: 2;
}
.home-title {
font-size: 48rem;
font-weight: 900;
/* ExtraLight children inherit unless overridden */
line-height: 1.25;
margin-bottom: 10rem;
color: var(--color-white);
font-style: normal;
}
.home-title em.text-lime {
color: var(--color-green);
/* ExtraLight Italic override h1 bold default */
font-family: AR CENA;
font-size: 60rem;
font-weight: 100;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: bottom;
padding-bottom: 20rem;
background-size: contain;
}
.home-title sup {
font-size: 18rem;
vertical-align: super;
}
.home-title strong {
font-weight: 900;
/* Black */
}
.home-sub {
font-size: 22rem;
color: #fff;
max-width: 1100rem;
margin: 0 auto;
font-weight: 400;
}
/* Stage: roles positioned absolutely around center wheel */
.home-stage {
flex: 1;
position: relative;
width: 100%;
min-height: 804rem;
margin-top: -180rem;
}
/* Center wheel */
.home-wheel-wrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
margin-top: 30rem;
height: 100%;
}
.home-wheel-wrap svg {
margin: auto;
display: block;
height: 100%;
width: 100%;
}
.home-wheel-svg {
/* width: 100%; */
/* height: 100%; */
/* object-fit: contain; */
/* position: relative; */
/* z-index: -1; */
}
/* Hotspot over "Technology powered by Workday" orange button in wheel SVG */
.home-hotspot {
position: absolute;
bottom: 42.1%;
left: 50%;
transform: translateX(-50%);
width: 205rem;
height: 205rem;
z-index: 2;
cursor: pointer;
border-radius: 50%;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: transform;
}
.home-hotspot:hover {
transform: translateX(-50%) scale(1.05);
box-shadow: 0 0 30rem rgba(132, 189, 0, 0.3);
}
/* Role areas */
.home-role {
position: absolute;
display: flex;
flex-direction: column;
gap: 12rem;
z-index: 2;
}
.home-role--ceo {
top: 20%;
left: -1%;
}
.home-role--chro {
top: 20%;
right: -1%;
}
.home-role--cfo {
bottom: 12%;
left: -1%;
}
.home-role--coo {
bottom: 12%;
left: 39.3%;
}
.home-role--cio {
bottom: 12%;
right: -1%;
}
.role-btn {
color: var(--color-white);
border: none;
border-radius: 30rem;
padding: 12rem 35rem;
font-size: 20rem;
min-width: 170rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: 10rem;
justify-content: center;
white-space: nowrap;
background: linear-gradient(92deg, #CB4306 0%, #F70 40%, #CB4306 100%);
background-size: 200% auto;
background-position: left center;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: transform, box-shadow, background-position;
}
.role-btn:hover {
background-position: right center;
box-shadow: 0 0 40rem 0 rgba(255, 188, 129, 0.75);
/* transform: scale(1.03); */
}
.role-btn:hover .rbtn-arrow {
transform: translateX(5rem);
}
.rbtn-arrow {
font-size: 13rem;
font-size: 0px;
width: 32rem;
height: 32rem;
background-image: url('data:image/svg+xml,');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ============================================================
HRSCALE PAGE
============================================================ */
#page-hrscale {
padding: 15rem 15rem 0rem;
gap: 0;
max-width: 1665rem;
margin: auto;
}
/* --- Expandable cards --- */
.ecard-row {
display: flex;
align-items: stretch;
height: 165rem;
gap: 8rem;
margin-bottom: 40rem;
flex-shrink: 0;
}
/* Each item wraps the green tab + white content as one rounded unit */
.ecard-item {
flex: 0 0 240rem;
display: flex;
flex-direction: row;
border-radius: 10rem;
overflow: hidden;
transition: flex 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: flex;
}
.ecard-item.ecard-item--active {
flex: 1;
min-width: 0;
}
/* Green heading tab */
.ecard-head {
width: 240rem;
flex-shrink: 0;
color: var(--color-dark);
padding: 24rem 20rem;
display: flex;
flex-direction: column;
cursor: pointer;
position: relative;
background: var(--gradient-green);
}
.ecard-q {
font-weight: 900;
color: rgba(0, 0, 0, 0.18);
line-height: 1;
align-self: flex-end;
position: absolute;
background-image: url('data:image/svg+xml,');
font-size: 0;
width: 60rem;
height: 87rem;
background-size: cover;
opacity: .4;
transform: translateY(-50%);
top: 50%;
}
.ecard-title {
font-size: 24rem;
font-weight: 700;
line-height: 1.3;
color: var(--color-black);
margin-bottom: 12rem;
}
.ecard-arrow {
font-size: 0;
background-image: url('data:image/svg+xml,');
width: 14rem;
height: 12rem;
background-size: contain;
background-position: center;
}
/* White content panel hidden until active */
.ecard-body {
flex: 1;
max-width: 0;
overflow: hidden;
background: var(--color-white);
color: var(--color-dark);
padding: 0;
display: flex;
justify-content: space-between;
transition: max-width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), padding 0.6s ease;
position: relative;
gap: 20rem;
will-change: max-width;
}
.ecard-item.ecard-item--active .ecard-body {
max-width: 1120rem;
padding: 5rem;
}
.ecp-content {
flex: 0 0 auto;
width: 809rem;
font-size: 16rem;
font-weight: 500;
color: var(--color-black);
display: flex;
/* align-items: center; */
padding-left: 20rem;
padding-top: 20rem;
padding-bottom: 20rem;
}
.ecp-content ul {
padding-left: 18rem;
list-style: disc;
}
.ecp-content li+li,
.ecp-content p+p {
margin-top: 8rem;
}
.ecp-pdf {
background-image: url('data:image/svg+xml,');
border-radius: 0 10rem 10rem 0;
width: 60rem;
background-repeat: no-repeat;
background-position: center;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
background-size: 33rem;
cursor: pointer;
will-change: transform, background-color;
}
.ecp-pdf:hover {
background-color: #FF770033;
transform: scale(1.05);
}
/* --- CTA Banner --- */
.hrscale-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 14rem;
padding: 10rem 24rem;
flex-shrink: 0;
position: absolute;
top: -4rem;
left: 50%;
transform: translateX(-50%);
font-size: 18rem;
color: #fff;
line-height: 1.3;
flex-grow: 1;
z-index: 2;
cursor: pointer;
}
.cta-arrow-btn {}
/* --- Main: Side cards + Wheel --- */
.hrscale-main {
flex: 1;
display: flex;
align-items: center;
gap: 24rem;
position: relative;
min-height: 620rem;
overflow: hidden;
padding-top: 100rem;
padding-bottom: 40rem;
}
.hside {
width: 330rem;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 22rem;
height: 100%;
justify-content: center;
position: absolute;
}
.hside-card {
padding: 11rem 16rem;
cursor: pointer;
display: flex;
gap: 14rem;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
align-items: center;
will-change: transform;
}
.hside-card:hover {
transform: scale(1.02);
}
.hside-card:hover {}
.hside-card p {
font-size: 18rem;
color: #fff;
line-height: 1.3;
flex-grow: 1;
}
.hside-card--highlight {}
.hside-btn,
.cta-arrow-btn {
background: none;
border: none;
cursor: pointer;
padding: 0;
line-height: 1;
font-size: 0;
width: 20rem;
height: 20rem;
background-image: url('data:image/svg+xml,');
flex-shrink: 1;
min-width: 20rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* --- Wheel area --- */
.hrscale-wheel-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 6rem;
min-width: 0;
position: absolute;
left: 50%;
top: 25rem;
transform: translateX(-50%);
width: 720rem;
}
.co-employ {
font-size: 12rem;
font-weight: 700;
letter-spacing: 3rem;
color: rgba(255, 255, 255, 0.55);
text-transform: uppercase;
}
.wheel-container {
position: relative;
width: 100%;
height: auto;
}
.wheel-img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Transparent hotspot overlays on wheel segments */
.wseg,
.wcenter {
position: absolute;
cursor: pointer;
border-radius: 4rem;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: transform, background;
}
.wseg:hover {
background: rgba(255, 255, 255, 0.12);
transform: scale(1.02);
}
.wcenter:hover {
/* transform: scale(1.05); */
}
/* =============ROLE PAGE (shared template)=========== */
.role-title {
font-size: 42rem;
font-weight: 900;
/* ExtraLight */
text-align: center;
color: var(--color-white);
margin-bottom: 30rem;
padding: 0 120rem;
line-height: 1.3;
}
.role-title .role-name-accent {
/* Black */
color: var(--color-green);
font-family: AR CENA;
font-size: 54rem;
font-weight: 100;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: bottom;
padding-bottom: 0rem;
background-size: contain;
}
/* 3-column grid: [corner] [wheel] [corner] rows */
.role-stage {
padding: 0 40rem 0rem;
position: relative;
min-height: 690rem;
}
/* Corner cards */
.role-corner {
cursor: pointer;
position: absolute;
z-index: 1;
}
.role-corner:hover {}
/* TL / TR: button on top, widget below */
.role-corner--tl {
top: -3%;
left: 1%;
}
.role-corner--tr {
top: -3%;
right: 1%;
}
/* BL / BR: widget on top, button on bottom */
.role-corner--bl {
left: 1%;
bottom: -2.5%;
}
.role-corner--br {
right: 1%;
bottom: -2.5%;
}
.rc-widget {
flex: 1;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
}
.rc-widget img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 6rem;
}
.rc-btn {
color: var(--color-white);
border: none;
border-radius: 50rem;
padding: 2rem 32rem;
font-size: 20rem;
min-height: 70rem;
width: 320rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: 10rem;
justify-content: center;
white-space: nowrap;
background: linear-gradient(92deg, #CB4306 0%, #F70 40%, #CB4306 100%);
background-size: 200% auto;
background-position: left center;
white-space: normal;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: transform, box-shadow, background-position;
}
.rc-btn:hover {
background-position: right center;
box-shadow: 0 0 40rem 0 rgba(255, 188, 129, 0.75);
/* transform: scale(1.03); */
}
.rc-label {
flex: 1;
}
/* Center wheel spans both rows */
.role-wheel-area {}
.role-wheel-wrap {
position: relative;
display: flex;
justify-content: center;
}
.role-wheel-img {
max-height: 690rem;
display: block;
}
/* Clickable center area back to HRScale page */
.role-center-hotspot {
position: absolute;
top: 50%;
left: 50%;
width: 252rem;
height: 260rem;
cursor: pointer;
border-radius: 50%;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
transform: translate(-50%, -50%);
will-change: transform, background;
}
.role-center-hotspot:hover {
background: rgba(255, 255, 255, 0.1);
transform: translate(-50%, -50%) scale(1.05);
}
/* ============================================================
DETAIL OVERLAY
============================================================ */
.detail-overlay {
position: fixed;
inset: 0;
z-index: 400;
display: none;
pointer-events: none;
}
.detail-overlay.is-open {
display: block;
pointer-events: auto;
/* overlay catches clicks; panel stops propagation */
}
.detail-overlay-bg {
position: absolute;
inset: 0;
cursor: pointer;
background: var(--gradient-bg);
opacity: .8;
transition: opacity 0.6s ease 0.3s;
}
.detail-overlay.is-closing .detail-overlay-bg {
opacity: 0;
}
/* Wrapper that holds SVG shape + content, clips the reveal animation */
.detail-panel-wrap {
position: absolute;
inset: 0;
pointer-events: none;
}
/* Clip-path circle expands from the clicked corner open */
.detail-overlay.corner-tl .detail-panel-wrap {
animation: revealTL 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.detail-overlay.corner-tr .detail-panel-wrap {
animation: revealTR 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.detail-overlay.corner-bl .detail-panel-wrap {
animation: revealBL 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.detail-overlay.corner-br .detail-panel-wrap {
animation: revealBR 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Closing shrink the circle back to the clicked corner */
.detail-overlay.is-closing.corner-tl .detail-panel-wrap {
animation: closeTL 0.6s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.detail-overlay.is-closing.corner-tr .detail-panel-wrap {
animation: closeTR 0.6s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.detail-overlay.is-closing.corner-bl .detail-panel-wrap {
animation: closeBL 0.6s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.detail-overlay.is-closing.corner-br .detail-panel-wrap {
animation: closeBR 0.6s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes revealTL {
from {
clip-path: circle(0% at 0% 0%);
}
to {
clip-path: circle(200% at 0% 0%);
}
}
@keyframes revealTR {
from {
clip-path: circle(0% at 100% 0%);
}
to {
clip-path: circle(200% at 100% 0%);
}
}
@keyframes revealBL {
from {
clip-path: circle(0% at 0% 100%);
}
to {
clip-path: circle(200% at 0% 100%);
}
}
@keyframes revealBR {
from {
clip-path: circle(0% at 100% 100%);
}
to {
clip-path: circle(200% at 100% 100%);
}
}
@keyframes closeTL {
from {
clip-path: circle(200% at 0% 0%);
}
to {
clip-path: circle(0% at 0% 0%);
}
}
@keyframes closeTR {
from {
clip-path: circle(200% at 100% 0%);
}
to {
clip-path: circle(0% at 100% 0%);
}
}
@keyframes closeBL {
from {
clip-path: circle(200% at 0% 100%);
}
to {
clip-path: circle(0% at 0% 100%);
}
}
@keyframes closeBR {
from {
clip-path: circle(200% at 100% 100%);
}
to {
clip-path: circle(0% at 100% 100%);
}
}
/* SVG blob shape rendered at its natural viewBox width (1576px at 1920px viewport) so the organic curve lands at ~70% of screen width, matching the design */
.detail-panel-svg {
position: absolute;
top: 0;
left: 0;
width: 1576rem;
height: 100%;
pointer-events: none;
}
/* TR / BR blobs anchor to the right edge of the viewport */
.detail-overlay.corner-tr .detail-panel-svg,
.detail-overlay.corner-br .detail-panel-svg {
left: auto;
right: 0;
}
/* The SVG path itself catches pointer events so clicks don't fall through */
#detailPanelPath {
pointer-events: auto;
cursor: default;
}
/* Content div positioned inside the white area */
.detail-panel {
position: absolute;
top: 0;
left: 0;
/* width: 100%; */
/* height: 100%; */
padding: 60rem 60rem;
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
pointer-events: auto;
color: var(--color-dark);
width: 100%;
max-width: 1320rem;
}
/* Use .panel-tl / .panel-tr / .panel-bl / .panel-br to control how content sits inside the white blob for each corner. ---------------------------------------------------------------- */
/* Top-left: content anchored top-left */
#detailPanel.panel-tl {
justify-content: flex-start;
align-items: flex-start;
left: 0;
right: auto;
top: 0;
bottom: auto;
padding-left: 220rem;
}
/* Top-right: content anchored top-right */
#detailPanel.panel-tr {
justify-content: flex-start;
left: auto;
right: 0;
top: 0;
bottom: auto;
padding-right: 220rem;
margin-left: auto;
}
/* Bottom-left: content anchored bottom-left */
#detailPanel.panel-bl {
justify-content: flex-end;
align-items: flex-start;
left: 0;
right: auto;
top: auto;
bottom: 0;
padding-left: 220rem;
padding-top: 0;
}
/* Bottom-right: content anchored bottom-right */
#detailPanel.panel-br {
justify-content: flex-end;
left: auto;
right: 0;
top: auto;
bottom: 0;
padding-top: 0;
padding-right: 220rem;
}
/* Close button */
.detail-close-btn {
position: fixed;
top: 14rem;
right: 41rem;
background: #eef1f8;
border: none;
width: 42rem;
height: 42rem;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #333;
flex-shrink: 0;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 5;
will-change: transform, background-color;
}
.detail-close-btn:hover {
background-color: #d8dde8;
transform: scale(1.1);
}
.detail-overlay.corner-tr .detail-close-btn,
.detail-overlay.corner-br .detail-close-btn {
left: 41rem;
right: auto;
}
/* Panel content */
.dl-illustration {
flex-shrink: 0;
display: flex;
align-items: center;
}
.dl-illustration img {
max-width: 620rem;
max-height: 310rem;
}
/* Detail hero: inset + scale so floating UI (productivity bars, cards) stays inside the white blob */
.dl-illustration.dl-illustration--detail {
width: 100%;
max-width: 620rem;
box-sizing: border-box;
padding-top: 32rem;
padding-bottom: 8rem;
justify-content: flex-start;
align-items: flex-start;
overflow: hidden;
}
.dl-illustration.dl-illustration--detail .dl-illustration-img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 250rem;
object-fit: contain;
object-position: center center;
}
/* Bottom-corner panels drop panel padding-top; add a bit more inset so art clears the curve */
#detailPanel.panel-br .dl-illustration--detail,
#detailPanel.panel-bl .dl-illustration--detail {
padding-top: 44rem;
}
.dl-title {
font-size: 44rem;
font-weight: 700;
color: var(--color-black);
line-height: 1.2;
margin-bottom: 5rem;
margin-top: 15rem;
}
.dl-subtitle {
font-size: 22rem;
color: rgba(0, 0, 0, 0.60);
margin-bottom: 16rem;
}
.dl-body {
font-size: 25rem;
color: var(--color-black);
/* max-width: 85%; */
margin-bottom: 30rem;
}
.dl-body-intro {
margin: 0 0 8rem;
}
.dl-body-list {
margin: 0;
padding-left: 1.25em;
list-style-type: disc;
}
.dl-body-list-item {
margin-bottom: 2rem;
}
.dl-body-list-item:last-child {
margin-bottom: 0;
}
.visit-btn {
display: inline-block;
background: linear-gradient(92deg, #CB4306 0%, #F70 40%, #CB4306 100%);
background-size: 200% auto;
background-position: left center;
color: var(--color-white);
text-decoration: none;
border-radius: 40rem;
padding: 20rem 35rem;
font-size: 22rem;
font-weight: 700;
align-self: flex-start;
flex-shrink: 0;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: transform, box-shadow, background-position;
}
.visit-btn:hover {
background-position: right center;
box-shadow: 0 8rem 28rem rgba(203, 67, 6, 0.55);
/* transform: scale(1.05); */
}
/* ============================================================
MODAL OVERLAY
============================================================ */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 2000;
align-items: center;
justify-content: center;
background: rgb(0 30 96 / 94%);
}
.modal-overlay.is-open {
display: flex;
}
.modal-box {
background: var(--color-white);
color: var(--color-dark);
border-radius: 20rem;
padding: 60rem 50rem;
max-width: 1190rem;
width: 90%;
position: relative;
max-height: 84vh;
overflow-y: auto;
/* animation handled by GSAP */
}
@keyframes modalIn {
from {
opacity: 0;
transform: scale(0.95) translateY(10rem);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.modal-close {
position: absolute;
top: 18rem;
right: 18rem;
background: #eef1f8;
border: none;
width: 42rem;
height: 42rem;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #333;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
line-height: 1;
background-position: center;
background-image: url('data:image/svg+xml,');
font-size: 0px;
background-repeat: no-repeat;
background-size: 25rem;
will-change: transform, background-color;
}
.modal-close:hover {
background-color: #d8dde8;
transform: scale(1.15);
}
/* Icon circle */
.modal-icon-area {
width: 142rem;
height: 142rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30rem;
}
/* Standard modal icon */
.modal-icon-img {
width: 100%;
height: 100%;
}
/* Insperity logo modal logo centered, title centered below */
.modal-icon-area.logo-style--insperity {
background: transparent;
width: 100%;
height: auto;
border-radius: 0;
justify-content: center;
margin-bottom: 16rem;
}
.modal-logo-img {
height: 60rem;
width: auto;
}
.modal-box--logo-insperity .modal-title {
text-align: center;
font-weight: 700;
}
/* Workday logo modal label + logo stacked, centered, no separate title */
.modal-icon-area.logo-style--workday {
background: transparent;
width: 100%;
height: auto;
border-radius: 0;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 24rem;
}
.modal-title {
font-size: 44rem;
font-weight: 700;
/* Black */
margin-bottom: 14rem;
line-height: 1.3;
color: var(--color-blue);
}
.modal-body-text {
font-size: 28rem;
color: var(--color-black);
margin-bottom: 25rem
}
.modal-bullets {
padding-left: 50rem;
list-style: disc;
}
.modal-bullets li {
margin-bottom: 6rem;
font-size: 28rem;
color: var(--color-black);
}
.modal-bullets li::marker {
color: var(--color-black);
}
/* Workday modal: "Technology powered by" label + workday logo */
.modal-workday-label {
font-size: 32rem;
font-weight: 600;
color: var(--color-blue);
margin-bottom: 10rem;
text-align: center;
}
.modal-workday-logo {
height: 56rem;
width: auto;
margin-bottom: 20rem;
}
.hrscale-main .hside.hside--left {
left: 137rem;
margin-top: 60rem;
}
.hrscale-main .hside.hside--right {
right: 136rem;
margin-top: 60rem;
}
.hrscale-main .hside.hside--left .hside-card::before {
background: linear-gradient(270deg, var(--color-blue-mid) 0%, rgba(0, 114, 206, 0.20) 100%);
transition: .3s;
opacity: .4;
}
.hrscale-main .hside.hside--left .hside-card::before,
.hrscale-main .hside.hside--right .hside-card::before,
.hrscale-cta::before {
transition: opacity 0.2s;
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
left: 0;
top: 0;
}
::before {}
.hside-card::after {
content: "";
background-image: url('data:image/svg+xml,');
position: absolute;
right: 0;
height: 100%;
width: 2rem;
background-size: cover;
top: 0;
}
.hrscale-main .hside.hside--right .hside-card::after {
left: 0;
right: unset;
}
.hrscale-main .hside.hside--right .hside-card::before {
opacity: 0.3;
background: linear-gradient(90deg, var(--color-blue-mid) 0%, rgba(0, 114, 206, 0.20) 100%);
}
.hrscale-main .hside-card:hover::before,
.hrscale-cta:hover::before {
opacity: 1 !important;
}
.hrscale-cta::before {
background: linear-gradient(0deg, var(--color-blue-mid) 0%, rgba(0, 114, 206, 0.20) 100%);
transition: .3s;
opacity: .4;
}
.hside-card:hover .hside-btn,
.hrscale-cta:hover .cta-arrow-btn {
background-image: url('data:image/svg+xml,');
}
.hrscale-cta::after {
content: "";
position: absolute;
background-image: url('data:image/svg+xml,');
width: 100%;
height: 2rem;
bottom: 0;
background-size: cover;
}
.wcenter.top-clickable {
top: 33%;
left: 33%;
width: 33.5%;
height: 17.3%;
border-radius: 100% 100% 0% 0%;
}
.wcenter.bottom-clickable {
top: 50%;
left: 33%;
width: 33.5%;
height: 17.3%;
border-radius: 0% 0% 100% 100%;
}
/* ============================================================
SIDE DRAWER
============================================================ */
.drawer-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 2900;
background: rgba(11, 37, 63, 0.65);
}
.drawer-overlay.is-open {
display: block;
}
.side-drawer {
position: fixed;
top: 0;
left: 0;
width: 500rem;
height: 100%;
background: #07070F;
background: linear-gradient(90deg, #003981 0%, #0062C3 100%);
box-shadow: 10px 0 40px 0 rgba(0, 0, 0, 0.10);
z-index: 3000;
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}
.side-drawer.is-open {
transform: translateX(0);
}
/* Top bar: home icon + close */
.drawer-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22rem 40rem 18rem;
flex-shrink: 0;
}
.drawer-home-btn,
.drawer-close-btn {
background: none;
border: none;
cursor: pointer;
color: rgba(255, 255, 255, 0.75);
display: flex;
align-items: center;
justify-content: center;
padding: 6rem;
border-radius: 6rem;
transition: color 0.2s, background var(--transition-fast);
}
.drawer-home-btn:hover {
background: rgba(255, 255, 255, 0.08);
}
.drawer-close-btn {
background: rgba(255, 255, 255, 0.08);
width: 34rem;
height: 34rem;
border-radius: 50%;
}
.drawer-close-btn:hover {
background: rgb(255 255 255 / 20%);
}
/* Scrollable role list */
.drawer-nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 40rem;
}
.drawer-nav::-webkit-scrollbar {
width: 4px;
}
.drawer-nav::-webkit-scrollbar-track {
background: transparent;
}
.drawer-nav::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 2px;
}
/* Each role section */
.drawer-role {
border-bottom: 1px solid rgba(255, 255, 255, 0.22);
padding-top: 10rem;
padding-bottom: 10rem;
}
/* Header row: name + arrow side by side */
.drawer-role-header {
display: flex;
align-items: center;
width: 100%;
}
.drawer-role-name-btn {
flex: 1;
background: none;
border: none;
cursor: pointer;
text-align: left;
padding: 8rem 8rem 8rem 0;
font-family: var(--font-primary);
font-size: 18rem;
font-weight: 700;
color: var(--color-lime);
letter-spacing: 1px;
transition: color 0.2s;
}
.drawer-role-name-btn:hover {}
.drawer-role--open .drawer-role-name-btn {
color: var(--color-lime);
}
.drawer-role-arrow-btn {
flex-shrink: 0;
background: none;
border: none;
cursor: pointer;
padding: 6rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4rem;
transition: .3s;
}
/* Chevron arrow */
.drawer-role-arrow {
width: 18rem;
height: 18rem;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.35);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}
.drawer-role--open .drawer-role-arrow {
transform: rotate(90deg);
color: #B5D334;
}
.drawer-role-arrow::after {
content: "";
background-image: url('data:image/svg+xml,');
width: 28rem;
height: 28rem;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Sub-item list */
.drawer-role-items {
list-style: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.drawer-role--open .drawer-role-items {
max-height: 400rem;
}
.drawer-item {
display: flex;
align-items: center;
gap: 10rem;
padding: 8rem 10rem;
font-size: 18rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
line-height: 1.35;
color: #BFEEFF;
}
.drawer-item:hover {
color: var(--color-white);
transform: translateX(5rem);
}
.drawer-item--active {
color: var(--color-white);
}
/* Active dot indicator */
.drawer-item-dot {
width: 8rem;
height: 8rem;
border-radius: 50%;
background: transparent;
flex-shrink: 0;
transition: background var(--transition-fast);
}
.drawer-item--active .drawer-item-dot {
background: #B5D334;
}
/* Footer: Contact us */
.drawer-footer {
flex-shrink: 0;
padding: 40rem;
}
.drawer-contact-btn {
background: none;
border: none;
cursor: pointer;
color: var(--color-white);
font-size: 18rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 10rem;
padding: 0;
transition: color 0.2s;
width: 100%;
justify-content: space-between;
text-decoration: none;
}
.drawer-contact-btn:hover {
color: var(--color-white);
}
.drawer-nav .drawer-role:first-of-type {
border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.drawer-item::after {
content: "";
background-image: url('data:image/svg+xml,');
width: 18rem;
height: 18rem;
background-size: cover;
background-repeat: no-repeat;
transition: .5s;
opacity: 0;
}
.drawer-item:hover::after {
opacity: 1;
}
.drawer-contact-btn svg {
width: 18rem;
height: 18rem;
}
.drawer-role-arrow-btn:hover {
background: rgba(255, 255, 255, 0.08);
}
.panel-tl .dl-body {
max-width: 86%;
}
.panel-br .dl-body {
max-width: 100%;
}
.app-body.on-page-role::before {
content: "";
width: 100%;
height: 100%;
position: fixed;
background-image: url('../images/roles-page-shape.png');
background-size: contain;
background-position: bottom right;
background-repeat: no-repeat;
z-index: -1;
}
/* Wheel segment hover animate via opacity overlay, not fill swap */
.wheel-segment {
cursor: pointer;
}
.segment-bg {
transition: opacity 0.35s ease;
}
.segment-bg-hover {
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.wheel-segment:hover .segment-bg {
opacity: 0;
}
.wheel-segment:hover .segment-bg-hover {
opacity: 1;
}
.wheel-segment:hover path {
stroke: #171A60;
}
.segment-tooltip {
visibility: hidden;
pointer-events: none;
}
.segment-tooltip.tip-visible {
visibility: visible;
}
.on-page-role {
overflow: hidden;
}
#page-role {
will-change: transform;
transition: transform 0.6s ease-in;
width: 100%;
max-width: 78%;
padding: 0;
margin-top: -30rem;
}
#page-role.detail-corner-tl {
transform: perspective(500rem) translate3d(900rem, 0rem, -500rem);
}
#page-role.detail-corner-tr {
transform: perspective(500rem) translate3d(-900rem, 0rem, -500rem);
}
#page-role.detail-corner-bl {
transform: perspective(500rem) translate3d(900rem, 0rem, -500rem);
}
#page-role.detail-corner-br {
transform: perspective(500rem) translate3d(-900rem, 0rem, -500rem);
}
/* ============================================================
PORTRAIT-MODE WARNING BANNER
Visible only in portrait orientation on smaller screens
============================================================ */
#turn {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99999;
padding: 32rem 30rem;
background: var(--color-blue-mid);
display: none;
}
.turn-msg-box {
display: flex;
align-items: center;
gap: 12rem;
margin: 0;
font-size: 20rem;
font-weight: 500;
color: #fff;
}
.mobile-rotation-icon {
width: 28rem;
height: auto;
flex-shrink: 0;
}
.turn-close {
margin-left: auto;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
}
.cross-btn {
width: 18rem;
height: auto;
opacity: 0.85;
transition: opacity 0.2s ease;
}
.cross-btn:hover {
opacity: 1;
}
.hr-scale-title {
font-weight: 600;
}
.home-title em.text-lime .hr-scale-title {
/* font-weight: inherit; */
}
.ecard-title .hr-scale-title {
font-weight: 900;
}
.drawer-item br {
display: none;
}
/* ============================================================
PAGE LOADER
============================================================ */
.page-loader {
position: fixed;
inset: 0;
z-index: 9999;
background: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 1000px;
}
/* Slide up animation - GPU accelerated */
.page-loader.slide-up {
transform: translate3d(0, -100%, 0);
}
.loader-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 16rem;
pointer-events: none;
}
.loader-percentage {
color: var(--color-white);
line-height: 1;
letter-spacing: -2rem;
font-size: 200rem;
font-family: AR CENA;
background: linear-gradient(79deg, #0072CE 16.92%, #00A3E0 72.87%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.loader-text {
font-size: 20rem;
font-weight: 500;
color: #000000;
margin: 0;
}
/* Progress bar container at bottom */
.loader-progress-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20rem;
background: #fff;
overflow: hidden;
z-index: 3;
}
.loader-progress-bar {
height: 100%;
width: 0%;
background: #84BD00;
}
/* ============================================================
PERFORMANCE & ACCESSIBILITY
============================================================ */
/* Disable animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}