*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:#fff;font-family:var(--body-font);line-height:1.7}body.modal-open{overflow:hidden}a{color:inherit}.site-shell{min-height:100vh}.container{width:min(var(--container),calc(100% - 40px));margin:auto}.narrow{max-width:900px}.site-header{position:absolute;z-index:50;top:0;left:0;width:100%;background:#fff;padding:20px 42px;transition:.35s ease}.site-header.sticky{position:fixed;padding-top:9px;padding-bottom:9px;box-shadow:0 8px 28px rgba(0,0,0,.13);animation:headerIn .35s ease}@keyframes headerIn{from{transform:translateY(-100%)}to{transform:translateY(0)}}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;max-width:1500px;margin:auto}.site-logo{width:164px;display:block;flex:0 0 164px}.site-logo img{display:block;width:100%;height:auto}.header-right{width:calc(100% - 194px)}.header-topline{height:32px;display:flex;align-items:center;justify-content:flex-end;gap:22px;margin-bottom:10px;font-size:13px;color:var(--dark)}.header-topline>a{text-decoration:none}.language-switcher{display:flex;align-items:center;gap:7px;font-weight:700}.language-switcher span{width:1px;height:14px;background:#c7d0d8}.language-switcher a{text-decoration:none;opacity:.5}.language-switcher a.active,.language-switcher a:hover{color:var(--primary);opacity:1}.header-nav-row{display:flex;align-items:center;justify-content:flex-end}.desktop-nav ul,.mobile-navigation ul,.site-footer ul{list-style:none;padding:0;margin:0}.desktop-nav>ul{display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,2vw,32px)}.desktop-nav li{position:relative}.desktop-nav a{text-decoration:none;color:var(--dark);font-size:17px;font-weight:600;display:block;white-space:nowrap;position:relative}.desktop-nav>ul>li:not(.nav-cta)>a:after{content:"";height:2px;background:var(--primary);position:absolute;left:50%;right:50%;bottom:-7px;transition:.25s ease}.desktop-nav>ul>li:hover>a{color:var(--primary)}.desktop-nav>ul>li:hover>a:after{left:0;right:0}.nav-cta>a,.button,.global-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;background:var(--primary);color:#fff!important;text-decoration:none;font-weight:700;border:0;border-radius:var(--button-radius);cursor:pointer;transition:.28s ease}.nav-cta>a:hover,.button:hover,.global-btn:hover{background:var(--dark);transform:translateY(-1px)}.submenu{position:absolute;top:calc(100% + 16px);left:-20px;min-width:230px;padding:12px!important;background:#fff;box-shadow:0 18px 45px rgba(5,38,64,.18);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s ease}.submenu li a{padding:9px 12px}.desktop-nav li:hover>.submenu{opacity:1;visibility:visible;transform:none}.submenu-toggle{display:none}.mobile-menu-toggle{display:none;background:none;border:0;padding:9px}.mobile-menu-toggle span{display:block;width:26px;height:2px;background:var(--dark);margin:5px}.mobile-navigation{background:#fff;border-top:1px solid #e8edf1;padding:14px 25px 24px}.mobile-navigation a{display:block;padding:10px 0;text-decoration:none;font-weight:650}.mobile-navigation .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;display:none;padding:0 0 0 18px!important}.mobile-navigation li.open>.submenu{display:block}.mobile-navigation .submenu-toggle{display:block;position:absolute;right:0;top:8px;background:none;border:0;width:30px;height:30px}.mobile-navigation .submenu-toggle:before,.mobile-navigation .submenu-toggle:after{content:"";position:absolute;left:9px;right:9px;top:14px;height:2px;background:var(--dark)}.mobile-navigation .submenu-toggle:after{transform:rotate(90deg)}.mobile-navigation li.open>.submenu-toggle:after{display:none}.mobile-navigation li{position:relative}.section{padding:86px 0}.section.alt,.muted{background:var(--surface-alt)}.section-title{text-align:center;margin-bottom:42px}.section-title h2,.section h2,.cta h2,.booking-modal h2{font-family:var(--heading-font);font-size:clamp(30px,3.2vw,46px);line-height:1.18;color:var(--dark);margin:0 0 18px}.section-title p{max-width:780px;margin:auto}.eyebrow{display:block;text-transform:uppercase;letter-spacing:.18em;font-size:13px;font-weight:800;color:var(--primary);margin-bottom:10px}.prose{font-size:16px}.prose h2,.prose h3{color:var(--dark)}.prose img{max-width:100%;height:auto}.hero-slider{position:relative;min-height:750px;overflow:hidden}.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease;display:flex;align-items:center}.hero-slide.active{opacity:1}.hero-slide:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,36,66,.3),rgba(0,36,66,.04))}.hero-content-wrap{position:relative;width:100%;height:100%;padding-top:155px}.hero-skew{position:absolute;left:0;top:0;bottom:0;width:min(52%,680px);background:rgba(1,81,140,.76);clip-path:polygon(0 0,90% 0,100% 100%,0 100%)}.hero-skew:after{content:"";position:absolute;left:42px;top:0;bottom:0;width:100%;background:rgba(1,81,140,.28);transform:skewX(-8deg)}.hero-copy{position:relative;z-index:2;width:min(570px,calc(100% - 50px));color:#fff;padding:105px 0 70px}.hero-copy h1{font-family:var(--heading-font);font-size:clamp(38px,4.2vw,62px);line-height:1.12;margin:0 0 22px}.hero-copy p{font-size:17px;max-width:390px;margin:0 0 30px}.hero-copy .global-btn{background:var(--dark)}.hero-dots{position:absolute;z-index:4;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:9px}.hero-dots button{width:12px;height:12px;border-radius:50%;border:0;background:rgba(255,255,255,.45);padding:0}.hero-dots button.active{background:#fff}.welcome-section{text-align:center}.welcome-section .intro{max-width:760px;margin:0 auto 50px}.video-frame{max-width:920px;margin:auto;aspect-ratio:16/9;box-shadow:0 15px 48px rgba(7,46,74,.14)}.video-frame iframe,.video-frame video{width:100%;height:100%;border:0}.industries-section{position:relative;padding-top:60px;background:linear-gradient(180deg,#fff 0,#fff 30%,rgba(211,213,212,.8) 30%,rgba(211,213,212,0) 100%)}.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.industry-card{background:transparent;text-align:center;transition:.3s ease}.industry-card a{text-decoration:none}.industry-card .image{height:320px;overflow:hidden;position:relative}.industry-card .image:after{content:"";position:absolute;inset:0;background:var(--primary);opacity:0;transition:.3s}.industry-card img{width:100%;height:100%;object-fit:cover;transition:.45s}.industry-card:hover{background:#fff}.industry-card:hover img{transform:scale(1.07)}.industry-card:hover .image:after{opacity:.35}.industry-card .body{padding:30px 22px}.industry-card h3{font-size:29px;color:var(--primary);margin:0 0 16px}.industry-card .read-more{color:var(--primary);font-weight:700}.benefits-title{margin-top:70px}.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.benefit-card{text-align:center;padding:18px 16px;transition:.3s}.benefit-card:hover{background:#fff}.benefit-icon{width:100px;height:100px;border:2px solid var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;transition:.3s}.benefit-icon img{width:52px;height:52px;object-fit:contain}.benefit-card:hover .benefit-icon{background:var(--primary)}.benefit-card:hover .benefit-icon img{filter:grayscale(1) brightness(15)}.benefit-card h3{font-size:23px;line-height:1.28;margin:0 0 12px;color:var(--dark)}.testimonials-section{position:relative;background:var(--primary);padding:90px 85px;color:#fff;overflow:hidden}.testimonials-section:before{content:"";position:absolute;inset:0 36px;background:var(--dark);transform:skewX(-8.5deg)}.testimonial-slider{position:relative;z-index:2;max-width:900px;margin:auto;text-align:center}.testimonial{display:none}.testimonial.active{display:block}.testimonial blockquote{font-size:17px;font-style:italic;line-height:1.9;margin:0}.testimonial cite{display:block;font-style:normal;font-weight:700;margin:28px 0}.testimonial img{width:100px;height:100px;border-radius:50%;object-fit:cover}.testimonial-controls{display:flex;justify-content:center;gap:10px;margin-top:25px}.testimonial-controls button{width:12px;height:12px;border-radius:50%;border:0;background:rgba(255,255,255,.35)}.testimonial-controls button.active{background:#fff}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.card{background:#fff;box-shadow:0 14px 42px rgba(8,38,64,.1);overflow:hidden}.card img{width:100%;height:230px;object-fit:cover}.card-body{padding:26px}.card h3{font-size:25px;color:var(--dark);margin:0 0 12px}.card a{color:var(--primary);font-weight:750;text-decoration:none}.image-text{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.image-text.right .image-text-media{order:2}.image-text-media img{width:100%;display:block;min-height:420px;object-fit:cover}.inner-banner{position:relative;min-height:350px;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:165px 0 55px;color:#fff}.inner-banner:before{content:"";position:absolute;inset:0;background:rgba(4,31,53,.62)}.inner-banner .container{position:relative}.inner-banner h1{font-size:clamp(36px,4vw,58px);line-height:1.1;margin:0}.inner-banner p{max-width:650px;margin:13px 0 0}.cta{background:var(--dark);color:#fff;padding:58px 0}.cta .container{display:flex;align-items:center;justify-content:space-between;gap:35px}.cta h2{color:#fff;margin:0 0 10px}.cta p{margin:0}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:55px}.contact-details{display:grid;gap:18px;margin-top:30px}.contact-details a{text-decoration:none;color:var(--dark)}.panel{background:#fff;padding:32px;box-shadow:0 15px 48px rgba(10,40,68,.12);display:grid;gap:16px}label{display:grid;gap:7px;font-weight:700;color:var(--dark)}input,textarea,select{width:100%;border:1px solid #cbd3da;padding:13px 14px;font:inherit;border-radius:3px;background:#fff}textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.check{display:flex;align-items:flex-start;gap:10px;font-weight:400}.check input{width:auto;margin-top:6px}.form-status{font-weight:700;margin:0}.booking-shell{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px}.booking-step{background:#fff;padding:28px;box-shadow:0 15px 48px rgba(10,40,68,.1);display:grid;gap:18px}.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.slot{padding:11px 8px;border:1px solid var(--primary);background:#fff;color:var(--primary);font-weight:700;cursor:pointer}.slot:hover{background:var(--primary);color:#fff}.slot[disabled]{opacity:.4;cursor:not-allowed}.booking-modal{position:fixed;inset:0;z-index:1000;display:none}.booking-modal.open{display:block}.booking-modal-backdrop{position:absolute;inset:0;background:rgba(1,24,43,.78)}.booking-modal-panel{position:absolute;right:0;top:0;height:100%;width:min(780px,100%);overflow:auto;background:#f7f9fb;padding:54px}.booking-modal-close{position:absolute;right:22px;top:16px;border:0;background:transparent;font-size:42px;color:var(--dark);cursor:pointer}.booking-modal-heading{padding-right:45px;margin-bottom:22px}.booking-modal-heading>span{color:var(--primary);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:13px}.booking-modal .section{padding:0}.booking-modal .container{width:100%}.booking-modal .booking-shell{grid-template-columns:1fr}.booking-modal .section-title{display:none}.site-footer{background:var(--dark);color:#fff;padding:75px 0 0}.footer-grid{width:min(var(--container),calc(100% - 40px));margin:auto;display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:42px}.footer-column img{filter:grayscale(1) brightness(12);width:164px;height:auto}.footer-column h3{font-size:18px;margin:0 0 22px}.footer-column a{display:block;color:#fff;text-decoration:none;margin:0 0 12px}.footer-column li{margin-bottom:10px}.footer-brand-column p{max-width:240px}.legal-links{margin-top:22px!important;border-top:1px solid rgba(255,255,255,.18);padding-top:20px!important}.footer-bottom{margin-top:55px;border-top:1px solid rgba(255,255,255,.14);padding:18px;text-align:center;font-size:13px}.error-page{padding:250px 20px 120px;text-align:center}.error-page h1{font-size:48px;color:var(--dark)}@media(max-width:1050px){.site-header{padding:15px 22px}.header-topline,.desktop-nav{display:none}.header-right{width:auto}.site-logo{width:130px;flex-basis:130px}.mobile-menu-toggle{display:block}.site-header{position:relative}.site-header.sticky{position:fixed}.hero-content-wrap{padding-top:0}.hero-slider{min-height:620px}.hero-copy{padding-top:100px}.hero-skew{width:72%}.industry-grid,.cards{grid-template-columns:repeat(2,1fr)}.benefits-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.inner-banner{padding-top:75px}.contact-grid,.booking-shell{grid-template-columns:1fr}}@media(max-width:700px){.container{width:min(100% - 30px,var(--container))}.section{padding:58px 0}.hero-slider{min-height:570px}.hero-skew{width:100%;clip-path:none;background:rgba(1,81,140,.76)}.hero-skew:after{display:none}.hero-copy{width:100%;padding:80px 0}.hero-copy h1{font-size:38px}.industry-grid,.cards,.benefits-grid{grid-template-columns:1fr}.industry-card .image{height:270px}.testimonials-section{padding:65px 25px}.testimonials-section:before{inset:0;transform:none}.image-text{grid-template-columns:1fr;gap:32px}.image-text.right .image-text-media{order:0}.image-text-media img{min-height:300px}.cta .container{display:block}.cta .button{margin-top:20px}.form-row{grid-template-columns:1fr}.slots{grid-template-columns:repeat(2,1fr)}.booking-modal-panel{padding:52px 20px 30px}.footer-grid{grid-template-columns:1fr}.site-footer{padding-top:55px}}
.nav-cta.nav-cta-outline>a{background:transparent!important;color:var(--primary)!important;border:2px solid var(--primary)}.nav-cta.nav-cta-outline>a:hover{background:var(--primary)!important;color:#fff!important}
/* CMS section-level design controls */
.cms-section > section {
background-color: var(--cms-section-bg, initial);
background-image: var(--cms-section-bg-image, none);
background-position: var(--cms-section-bg-position, center center);
background-size: cover;
color: var(--cms-section-text, inherit);
padding-top: var(--cms-section-pt, initial);
padding-bottom: var(--cms-section-pb, initial);
text-align: var(--cms-section-align, inherit);
}
.cms-section > section .container {
max-width: var(--cms-section-width, var(--container));
}
.cms-section.cms-full-width > section .container {
max-width: none;
width: 100%;
}
@media (min-width: 1025px) {
.cms-hide-desktop { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.cms-hide-tablet { display: none !important; }
}
@media (max-width: 768px) {
.cms-hide-mobile { display: none !important; }
.cms-section > section {
padding-top: var(--cms-section-mobile-pt, var(--cms-section-pt, initial));
padding-bottom: var(--cms-section-mobile-pb, var(--cms-section-pb, initial));
}
}
/* Design-token overrides managed from the administration panel */
html { font-size: var(--base-font-size); }
body { background: var(--surface); line-height: var(--base-line-height); }
.container { width: min(var(--container), calc(100% - (var(--container-padding-desktop) * 2))); }
.section { padding-top: var(--section-spacing-desktop); padding-bottom: var(--section-spacing-desktop); }
h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); font-weight: var(--heading-weight); line-height: var(--heading-line-height); }
.site-header { background: var(--header-bg); min-height: var(--header-height); }
.site-header.sticky { min-height: var(--header-sticky-height); }
.site-logo { width: var(--logo-width); flex-basis: var(--logo-width); }
.nav-cta > a, .button, .global-btn { min-height: var(--button-height); padding-left: var(--button-padding); padding-right: var(--button-padding); font-weight: var(--button-weight); }
.card, .panel, .booking-step { border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
input, textarea, select { min-height: var(--input-height); border-color: var(--border); border-radius: var(--input-radius); }
.site-footer { background: var(--footer-bg); color: var(--footer-text); }
.site-footer a { color: var(--footer-text); }
@media (max-width: 1050px) {
.section { padding-top: var(--section-spacing-tablet); padding-bottom: var(--section-spacing-tablet); }
}
@media (max-width: 700px) {
.container { width: min(var(--container), calc(100% - (var(--container-padding-mobile) * 2))); }
.section { padding-top: var(--section-spacing-mobile); padding-bottom: var(--section-spacing-mobile); }
}
/* ========================================================================
SkillsHR legacy design fidelity — About page
Mirrors the proportions and visual language of the former WordPress page
while keeping every content block editable in the new CMS.
======================================================================== */
.page-type-about .cms-section-hero {
background: #fff;
}
.page-type-about .inner-banner--legacy-inner {
isolation: isolate;
min-height: 550px;
width: 100%;
margin: 0;
padding: 150px 0 0;
align-items: center;
background-size: cover;
background-position: center center;
overflow: hidden;
}
.page-type-about .inner-banner--legacy-inner::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: clamp(28px, 4.6vw, 88px);
width: min(38vw, 600px);
background: rgba(0, 91, 151, .72);
clip-path: polygon(9% 0, 100% 0, 88% 100%, 0 100%);
}
.page-type-about .inner-banner--legacy-inner::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: min(34vw, 535px);
width: 84px;
background: rgba(75, 132, 173, .42);
transform: skewX(-8deg);
transform-origin: bottom left;
}
.page-type-about .inner-banner--legacy-inner .inner-banner__content {
z-index: 2;
width: min(1146px, calc(100% - 60px));
padding: 48px 0 35px 0;
}
.page-type-about .inner-banner--legacy-inner h1 {
max-width: 430px;
margin: 0 0 22px;
color: #fff;
font-size: clamp(39px, 3.33vw, 48px);
font-weight: 700;
line-height: 1.18;
text-align: left;
text-transform: none;
letter-spacing: 0;
}
.page-type-about .inner-banner--legacy-inner p,
.page-type-about .inner-banner--legacy-inner .inner-banner__text {
max-width: 330px;
margin: 0;
color: #fff;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
}
.page-type-about .inner-banner--legacy-inner .inner-banner__text p {
margin: 0;
}
.page-type-about .about-mission {
padding: 96px 15px 138px;
text-align: center;
background: #fff;
}
.page-type-about .about-mission__container {
width: min(1146px, 100%);
margin: 0 auto;
}
.page-type-about .about-mission__heading h2 {
margin: 0 0 38px;
color: #333;
font-size: clamp(30px, 2.35vw, 38px);
font-weight: 500;
line-height: 1.2;
}
.page-type-about .about-mission__description {
max-width: 790px;
margin: 0 auto 54px;
color: #444;
font-size: 15px;
line-height: 1.75;
}
.page-type-about .about-mission__description p {
margin: 0;
}
.page-type-about .about-mission__description strong {
display: inline;
font-weight: 500;
text-transform: uppercase;
}
.page-type-about .about-mission__media {
width: min(920px, 100%);
margin: 0 auto;
overflow: hidden;
}
.page-type-about .about-mission__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 920 / 490;
object-fit: cover;
}
.page-type-about .about-management {
position: relative;
padding: 110px 15px 72px;
overflow: hidden;
background: linear-gradient(180deg, rgba(211, 213, 212, 1) 0%, rgba(211, 213, 212, 0) 55%);
}
.page-type-about .about-management__container {
position: relative;
z-index: 1;
width: min(1146px, 100%);
margin: 0 auto;
}
.page-type-about .about-management__heading {
margin: 0 auto;
}
.page-type-about .about-management__heading h2 {
margin-bottom: 38px;
color: #333;
font-size: clamp(30px, 2.35vw, 38px);
font-weight: 500;
}
.page-type-about .about-management__intro {
max-width: 770px;
margin: 0 auto;
color: #444;
font-size: 15px;
line-height: 1.75;
}
.page-type-about .about-management__intro p {
margin: 0;
}
.page-type-about .about-management__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 356px));
justify-content: center;
align-items: start;
gap: 28px;
width: min(768px, 100%);
margin: 61px auto 0;
}
.page-type-about .about-management__member {
min-width: 0;
text-align: center;
}
.page-type-about .about-management__photo {
display: block;
width: 100%;
max-width: 356px;
height: auto;
aspect-ratio: 356 / 440;
margin: 0 auto;
object-fit: cover;
}
.page-type-about .about-management__identity h3 {
margin: 29px 0 8px;
color: var(--primary);
font-size: 30px;
font-weight: 500;
line-height: 1.25;
}
.page-type-about .about-management__identity p {
margin: 0;
color: #333;
font-size: 16px;
}
.page-type-about .about-management__contact {
display: grid;
gap: 10px;
margin: 36px auto 0;
padding: 0 16px;
}
.page-type-about .about-management__contact a {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
align-items: center;
width: fit-content;
max-width: 100%;
margin: 0 auto;
color: #333;
font-size: 16px;
line-height: 1.35;
text-align: left;
text-decoration: none;
}
.page-type-about .about-management__contact a:hover {
color: var(--primary);
}
.page-type-about .about-management__contact svg {
width: 17px;
height: 17px;
fill: var(--primary);
}
.page-type-about .about-management__contact span {
overflow-wrap: anywhere;
}
.page-type-about .about-promise {
padding: 75px 15px 35px;
background: #fff;
}
.page-type-about .about-promise__container {
display: grid;
grid-template-columns: minmax(250px, 34.1114%) minmax(0, 65.8886%);
align-items: start;
width: min(1146px, 100%);
margin: 0 auto;
}
.page-type-about .about-promise__intro {
padding: 0 36px 0 0;
}
.page-type-about .about-promise__intro h2 {
margin: 0 0 38px;
color: #333;
font-size: clamp(30px, 2.35vw, 38px);
font-weight: 500;
}
.page-type-about .about-promise__intro p {
margin: 0;
color: #444;
font-size: 15px;
line-height: 1.75;
}
.page-type-about .about-promise__list {
display: grid;
gap: 30px;
}
.page-type-about .about-promise__item {
display: grid;
grid-template-columns: 100px minmax(0, 1fr);
align-items: center;
gap: 40px;
}
.page-type-about .about-promise__icon {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border: 2px solid var(--primary);
border-radius: 50%;
transition: .3s ease;
}
.page-type-about .about-promise__icon img {
width: 50px;
height: 50px;
object-fit: contain;
}
.page-type-about .about-promise__item:hover .about-promise__icon {
background: var(--primary);
}
.page-type-about .about-promise__item:hover .about-promise__icon img {
filter: grayscale(1) brightness(15);
}
.page-type-about .about-promise__copy h3 {
margin: 0 0 11px;
color: #222;
font-size: 24px;
font-weight: 500;
line-height: 1.25;
}
.page-type-about .about-promise__copy p {
margin: 0;
color: #444;
font-size: 15px;
line-height: 1.65;
}
.page-type-about .cta--join-team {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 70px 0;
background: #0066a8;
}
.page-type-about .cta--join-team::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 40px;
background: #00558c;
transform: skewX(-16.5deg);
}
.page-type-about .cta--join-team .container {
display: grid;
grid-template-columns: minmax(190px, .75fr) minmax(320px, 1.7fr) auto;
align-items: center;
gap: 34px;
width: min(1146px, calc(100% - 40px));
}
.page-type-about .cta--join-team .cta__copy {
display: contents;
}
.page-type-about .cta--join-team h2 {
margin: 0;
color: #fff;
font-size: clamp(28px, 2.35vw, 38px);
font-weight: 500;
}
.page-type-about .cta--join-team p {
margin: 0;
padding: 0 15px;
color: #fff;
font-size: 15px;
line-height: 1.6;
}
.page-type-about .cta--join-team .button {
min-width: 181px;
background: var(--dark);
}
@media (max-width: 1050px) {
.page-type-about .inner-banner--legacy-inner {
min-height: 470px;
padding-top: 100px;
}
.page-type-about .inner-banner--legacy-inner::before {
left: 0;
width: 65%;
}
.page-type-about .inner-banner--legacy-inner::after {
left: 55%;
}
.page-type-about .inner-banner--legacy-inner .inner-banner__content {
width: min(100% - 40px, 760px);
}
.page-type-about .about-promise__container {
grid-template-columns: 1fr;
gap: 48px;
}
.page-type-about .about-promise__intro {
padding: 0;
text-align: center;
}
.page-type-about .cta--join-team .container {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.page-type-about .cta--join-team .cta__copy {
display: grid;
justify-items: center;
gap: 20px;
}
}
@media (max-width: 700px) {
.page-type-about .inner-banner--legacy-inner {
min-height: 430px;
padding-top: 80px;
background-position: 62% center;
}
.page-type-about .inner-banner--legacy-inner::before {
width: 100%;
background: rgba(0, 91, 151, .75);
clip-path: none;
}
.page-type-about .inner-banner--legacy-inner::after {
display: none;
}
.page-type-about .inner-banner--legacy-inner .inner-banner__content {
width: min(100% - 30px, 520px);
padding-top: 42px;
text-align: center;
}
.page-type-about .inner-banner--legacy-inner h1,
.page-type-about .inner-banner--legacy-inner p,
.page-type-about .inner-banner--legacy-inner .inner-banner__text {
max-width: none;
text-align: center;
}
.page-type-about .about-mission {
padding: 70px 15px 82px;
}
.page-type-about .about-management {
padding: 76px 15px 54px;
}
.page-type-about .about-management__grid {
grid-template-columns: minmax(0, 356px);
gap: 58px;
margin-top: 45px;
}
.page-type-about .about-management__identity h3 {
font-size: 27px;
}
.page-type-about .about-promise {
padding: 70px 15px 35px;
}
.page-type-about .about-promise__item {
grid-template-columns: 1fr;
justify-items: center;
gap: 20px;
text-align: center;
}
.page-type-about .cta--join-team {
padding: 58px 0;
}
.page-type-about .cta--join-team::before {
inset: 0;
transform: none;
}
}
/* ========================================================================
SkillsHR legacy design fidelity — Contact and Services pages
======================================================================== */
.page-type-contact .cms-section-hero,
.page-type-services .cms-section-hero {
background: #fff;
}
.page-type-contact .inner-banner--legacy-inner,
.page-type-services .inner-banner--legacy-inner {
isolation: isolate;
min-height: 550px;
width: 100%;
margin: 0;
padding: 150px 0 0;
align-items: center;
background-size: cover;
background-position: center center;
overflow: hidden;
}
.page-type-contact .inner-banner--legacy-inner::before,
.page-type-services .inner-banner--legacy-inner::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: clamp(28px, 4.6vw, 88px);
width: min(38vw, 600px);
background: rgba(0, 91, 151, .72);
clip-path: polygon(9% 0, 100% 0, 88% 100%, 0 100%);
}
.page-type-contact .inner-banner--legacy-inner::after,
.page-type-services .inner-banner--legacy-inner::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: min(34vw, 535px);
width: 84px;
background: rgba(75, 132, 173, .42);
transform: skewX(-8deg);
transform-origin: bottom left;
}
.page-type-contact .inner-banner--legacy-inner .inner-banner__content,
.page-type-services .inner-banner--legacy-inner .inner-banner__content {
z-index: 2;
width: min(1146px, calc(100% - 60px));
padding: 48px 0 35px;
}
.page-type-contact .inner-banner--legacy-inner h1,
.page-type-services .inner-banner--legacy-inner h1 {
max-width: 430px;
margin: 0 0 22px;
color: #fff;
font-size: clamp(39px, 3.33vw, 48px);
font-weight: 700;
line-height: 1.18;
text-align: left;
text-transform: none;
letter-spacing: 0;
}
.page-type-contact .inner-banner--legacy-inner p,
.page-type-contact .inner-banner--legacy-inner .inner-banner__text,
.page-type-services .inner-banner--legacy-inner p,
.page-type-services .inner-banner--legacy-inner .inner-banner__text {
max-width: 330px;
margin: 0;
color: #fff;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
}
.page-type-contact .inner-banner--legacy-inner .inner-banner__text p,
.page-type-services .inner-banner--legacy-inner .inner-banner__text p {
margin: 0;
}
/* Services */
.page-type-services .legacy-services {
padding: 25px 15px 59px;
background: #fff;
}
.page-type-services .legacy-services__container {
width: min(1146px, 100%);
margin: 0 auto;
}
.page-type-services .legacy-service {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 38px 0;
scroll-margin-top: 110px;
}
.page-type-services .legacy-service--reverse {
flex-direction: row-reverse;
}
.page-type-services .legacy-service__media,
.page-type-services .legacy-service__content {
width: 50%;
min-width: 0;
}
.page-type-services .legacy-service__media {
padding: 0 15px 0 0;
}
.page-type-services .legacy-service--reverse .legacy-service__media {
padding: 0 0 0 15px;
}
.page-type-services .legacy-service__media-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: 473px;
width: 100%;
margin: 0 -12px;
}
.page-type-services .legacy-service--reverse .legacy-service__media-grid {
margin: 0 -12px 0 auto;
}
.page-type-services .legacy-service__image {
width: 50%;
margin: 0;
padding: 11px 12px;
}
.page-type-services .legacy-service__image--main {
width: 100%;
}
.page-type-services .legacy-service__image img {
display: block;
width: 100%;
height: 141px;
object-fit: cover;
background: #eef1f3;
}
.page-type-services .legacy-service__image--main img {
height: 290px;
}
.page-type-services .legacy-service__content {
padding: 19px 10px 0;
}
.page-type-services .legacy-service--reverse .legacy-service__content {
padding-left: 0;
}
.page-type-services .legacy-service__content h2 {
margin: 0 0 49px;
color: #333;
font-size: clamp(31px, 2.35vw, 38px);
font-weight: 500;
line-height: 1.2;
}
.page-type-services .legacy-service__description {
max-width: 525px;
color: #444;
font-size: 16px;
line-height: 1.75;
}
.page-type-services .legacy-service__description p {
margin: 0 0 20px;
}
.page-type-services .legacy-service__description p:last-child {
margin-bottom: 0;
}
.page-type-services .legacy-service__list {
column-count: 2;
column-gap: 25px;
margin: 43px 0 0;
padding: 0;
list-style: none;
}
.page-type-services .legacy-service__list li {
position: relative;
break-inside: avoid;
margin: 0 0 19px;
padding: 0 0 0 37px;
}
.page-type-services .legacy-service__list li::before {
content: "";
position: absolute;
top: .62em;
left: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--primary);
}
.page-type-services .legacy-service__list span {
display: inline-block;
color: #333;
font-size: 16px;
font-weight: 700;
text-decoration: underline;
}
/* Contact */
.page-type-contact .legacy-contact {
padding: 85px 15px 95px;
background: #fff;
}
.page-type-contact .legacy-contact__container {
width: min(1146px, 100%);
margin: 0 auto;
}
.page-type-contact .legacy-contact__heading {
text-align: center;
}
.page-type-contact .legacy-contact__heading h2 {
margin: 0;
color: #333;
font-size: clamp(31px, 2.35vw, 38px);
font-weight: 500;
line-height: 1.2;
}
.page-type-contact .legacy-contact__intro {
max-width: 760px;
margin: 20px auto 0;
color: #444;
font-size: 15px;
}
.page-type-contact .legacy-contact__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: 30px;
margin-top: 70px;
}
.page-type-contact .legacy-contact__form-column,
.page-type-contact .legacy-contact__information {
min-width: 0;
padding: 0 15px;
}
.page-type-contact .legacy-contact__form,
.page-type-contact .legacy-contact__information {
max-width: 451px;
width: 100%;
margin: 0 auto;
}
.page-type-contact .legacy-contact__information {
max-width: 445px;
margin-top: 7px;
}
.page-type-contact .legacy-contact__honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
}
.page-type-contact .legacy-contact__form > input:not([type="hidden"]):not([type="checkbox"]),
.page-type-contact .legacy-contact__form textarea {
display: block;
width: 100%;
min-height: 40px;
height: 40px;
margin: 0 0 20px;
padding: 0 16px;
border: 1px solid #d0d1d6;
border-radius: 0;
background: #fff;
color: #333;
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
box-shadow: none;
}
.page-type-contact .legacy-contact__form textarea {
height: 100px;
min-height: 100px;
padding: 16px;
resize: vertical;
}
.page-type-contact .legacy-contact__form input::placeholder,
.page-type-contact .legacy-contact__form textarea::placeholder {
color: #333;
opacity: 1;
}
.page-type-contact .legacy-contact__privacy {
display: flex;
align-items: flex-start;
gap: 9px;
margin: -2px 0 18px;
color: #555;
font-size: 12px;
font-weight: 400;
line-height: 1.45;
}
.page-type-contact .legacy-contact__privacy input {
flex: 0 0 auto;
width: 14px;
min-height: 14px;
height: 14px;
margin: 2px 0 0;
}
.page-type-contact .legacy-contact__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
margin-top: 8px;
}
.page-type-contact .legacy-contact__actions .button {
min-width: 181px;
min-height: 40px;
border-radius: 0;
font-size: 14px;
}
.page-type-contact .legacy-contact__booking-link {
color: var(--primary);
font-size: 13px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.page-type-contact .legacy-contact__form .form-status {
min-height: 24px;
margin: 14px 0 0;
color: var(--primary);
font-size: 13px;
}
.page-type-contact .legacy-contact__details {
display: grid;
gap: 17px;
}
.page-type-contact .legacy-contact__detail {
display: flex;
align-items: flex-start;
min-width: 0;
}
.page-type-contact .legacy-contact__icon {
display: flex;
flex: 0 0 30px;
width: 30px;
padding-top: 2px;
color: var(--primary);
}
.page-type-contact .legacy-contact__icon svg {
display: block;
width: 17px;
height: 17px;
fill: currentColor;
}
.page-type-contact .legacy-contact__detail--email .legacy-contact__icon svg {
width: 15px;
height: 15px;
}
.page-type-contact .legacy-contact__detail a {
min-width: 0;
color: #000;
font-size: 16px;
line-height: 1.45;
text-decoration: none;
}
.page-type-contact .legacy-contact__detail a:hover {
color: var(--primary);
}
.page-type-contact .legacy-contact__map {
width: 100%;
height: 332px;
margin-top: 37px;
overflow: hidden;
background: #eef1f3;
}
.page-type-contact .legacy-contact__map iframe {
display: block;
width: 100%;
height: 332px;
border: 0;
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Original SkillsHR Join Our Team strip */
.page-type-services .cta--join-team,
.page-type-contact .cta--join-team {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 106px 15px;
background: #0066a8;
color: #fff;
}
.page-type-services .cta--join-team::before,
.page-type-contact .cta--join-team::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 40px;
right: 40px;
background: #00558c;
transform: skewX(-16.5deg);
}
.page-type-services .cta--join-team .container,
.page-type-contact .cta--join-team .container {
display: grid;
grid-template-columns: minmax(220px, .75fr) minmax(360px, 1.55fr) 181px;
align-items: center;
gap: 45px;
width: min(1146px, 100%);
}
.page-type-services .cta--join-team .cta__copy,
.page-type-contact .cta--join-team .cta__copy {
display: contents;
}
.page-type-services .cta--join-team h2,
.page-type-contact .cta--join-team h2 {
margin: 0;
color: #fff;
font-size: clamp(30px, 2.35vw, 38px);
font-weight: 500;
line-height: 1.2;
}
.page-type-services .cta--join-team p,
.page-type-contact .cta--join-team p {
margin: 0;
color: #fff;
font-size: 16px;
line-height: 1.65;
}
.page-type-services .cta--join-team .button,
.page-type-contact .cta--join-team .button {
width: 181px;
min-height: 40px;
border-radius: 0;
background: #333;
font-size: 13px;
}
.page-type-services .cta--join-team .button:hover,
.page-type-contact .cta--join-team .button:hover {
background: #fff;
color: #333 !important;
}
@media (max-width: 991px) {
.page-type-contact .inner-banner--legacy-inner,
.page-type-services .inner-banner--legacy-inner {
min-height: 500px;
padding-top: 120px;
text-align: center;
}
.page-type-contact .inner-banner--legacy-inner::before,
.page-type-services .inner-banner--legacy-inner::before {
left: 0;
width: 100%;
clip-path: none;
background: rgba(0, 91, 151, .7);
}
.page-type-contact .inner-banner--legacy-inner::after,
.page-type-services .inner-banner--legacy-inner::after {
display: none;
}
.page-type-contact .inner-banner--legacy-inner .inner-banner__content,
.page-type-services .inner-banner--legacy-inner .inner-banner__content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px 15px;
}
.page-type-contact .inner-banner--legacy-inner h1,
.page-type-contact .inner-banner--legacy-inner p,
.page-type-contact .inner-banner--legacy-inner .inner-banner__text,
.page-type-services .inner-banner--legacy-inner h1,
.page-type-services .inner-banner--legacy-inner p,
.page-type-services .inner-banner--legacy-inner .inner-banner__text {
max-width: 620px;
text-align: center;
}
.page-type-services .legacy-service,
.page-type-services .legacy-service--reverse {
flex-direction: column;
align-items: center;
text-align: center;
}
.page-type-services .legacy-service__media,
.page-type-services .legacy-service__content {
width: 100%;
padding: 15px 0;
}
.page-type-services .legacy-service__media-grid,
.page-type-services .legacy-service--reverse .legacy-service__media-grid {
margin: 0 auto;
}
.page-type-services .legacy-service__description {
margin: 0 auto;
}
.page-type-services .legacy-service__list {
display: inline-block;
column-count: 1;
text-align: left;
}
.page-type-contact .legacy-contact__grid {
grid-template-columns: 1fr;
gap: 50px;
}
.page-type-contact .legacy-contact__form-column,
.page-type-contact .legacy-contact__information {
padding: 0;
}
.page-type-services .cta--join-team .container,
.page-type-contact .cta--join-team .container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
}
@media (max-width: 700px) {
.page-type-contact .inner-banner--legacy-inner,
.page-type-services .inner-banner--legacy-inner {
min-height: 420px;
padding-top: 90px;
}
.page-type-contact .legacy-contact {
padding: 62px 15px 72px;
}
.page-type-contact .legacy-contact__grid {
margin-top: 45px;
}
.page-type-services .legacy-services {
padding-top: 18px;
}
.page-type-services .legacy-service {
padding: 26px 0 45px;
}
.page-type-services .legacy-service__image img {
height: auto;
aspect-ratio: 212 / 141;
}
.page-type-services .legacy-service__image--main img {
height: auto;
aspect-ratio: 449 / 290;
}
.page-type-services .legacy-service__content h2 {
margin-bottom: 28px;
}
.page-type-services .cta--join-team,
.page-type-contact .cta--join-team {
padding: 72px 20px;
}
.page-type-services .cta--join-team::before,
.page-type-contact .cta--join-team::before {
left: 0;
right: 0;
transform: none;
}
}
/* ========================================================================
SkillsHR original header fidelity
======================================================================== */
.site-header {
position: relative;
top: auto;
left: auto;
width: 100%;
z-index: 1000;
background: #fff;
padding: 23px 43px;
min-height: var(--header-height, 138px);
border-bottom: 1px solid #eceff1;
}
.site-header .header-inner {
max-width: 1500px;
min-height: 92px;
margin: 0 auto;
align-items: center;
}
.site-header .site-logo {
width: var(--logo-width, 164px);
flex: 0 0 var(--logo-width, 164px);
}
.site-header .header-right { width: auto; flex: 1 1 auto; }
.site-header .header-topline {
min-height: 30px;
height: auto;
margin: 0 0 16px;
gap: 22px;
font-size: 14px;
line-height: 1.2;
}
.site-header .header-nav-row { min-height: 50px; }
.site-header .desktop-nav { flex-grow: 1; text-align: right; }
.site-header .desktop-nav > ul { gap: 0; }
.site-header .desktop-nav > ul > li { margin: 0 clamp(5px, 1.111vw, 16px); }
.site-header .desktop-nav > ul > li > a {
font-size: 18px;
font-weight: 500;
color: var(--dark);
}
.site-header .desktop-nav > ul > li:not(.nav-cta) > a::after { bottom: -5px; }
.site-header .nav-cta { margin-left: 17px; }
.site-header .nav-cta > a {
width: 181px;
min-width: 181px;
min-height: 50px;
padding: 0 18px;
border-radius: 0;
font-size: 14px;
}
.site-header.sticky {
position: fixed;
min-height: var(--header-sticky-height, 86px);
padding: 18px 43px;
background: #fff;
}
.site-header.sticky .header-inner { min-height: 50px; }
.site-header.sticky .header-topline { display: none; }
.site-header.sticky .site-logo { width: 105px; flex-basis: 105px; }
.site-header.sticky .header-right { width: calc(100% - 105px); }
.site-header.sticky .site-logo img { max-width: 105px; }
.site-header.sticky .header-nav-row { min-height: 50px; }
@media (max-width: 1050px) {
.site-header { min-height: 92px; padding: 15px 22px; }
.site-header .header-inner { min-height: 60px; }
.site-header .site-logo { width: 130px; flex-basis: 130px; }
.site-header .header-right { width: auto; }
}
/* ========================================================================
SkillsHR original Language Training page
======================================================================== */
.page-type-language-training main{
--refpro-container: 1320px;
--refpro-text: #1f2937;
--refpro-heading: #0f172a;
--refpro-muted: #6b7280;
--refpro-muted-2: #94a3b8;
--refpro-dark: #0f172a;
--refpro-blue: #16324f;
--refpro-blue-brand: #0f5ea8;
--refpro-blue-brand-dark: #0a4a86;
--refpro-blue-brand-deep: #083a6a;
--refpro-gold: #c79a2b;
--refpro-soft: #f8fafc;
--refpro-soft-2: #f3f6f9;
--refpro-line: rgba(15, 23, 42, 0.08);
--refpro-line-strong: rgba(15, 23, 42, 0.12);
--refpro-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
--refpro-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.05);
--refpro-radius: 28px;
--refpro-radius-sm: 22px;
--refpro-radius-xs: 18px;
color: var(--refpro-text);
overflow: hidden;
background:
linear-gradient(180deg, #ffffff 0%, #fbfcfe 38%, #f8fafc 100%);
}
.page-type-language-training main *{
box-sizing: border-box;
}
.refpro-wrap{
width: min(100% - 32px, var(--refpro-container));
margin-inline: auto;
}
.refpro-hero{
padding: 22px 0 10px;
}
.refpro-hero-box{
position: relative;
overflow: hidden;
min-height: 340px;
border-radius: 28px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 48px 24px;
background:
linear-gradient(135deg, var(--refpro-blue-brand-deep) 0%, var(--refpro-blue-brand-dark) 38%, var(--refpro-blue-brand) 100%);
box-shadow: var(--refpro-shadow);
border: 1px solid rgba(255,255,255,.10);
}
.refpro-hero-box::before{
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 16% 20%, rgba(255,255,255,.14), transparent 26%),
radial-gradient(circle at 84% 18%, rgba(255,255,255,.10), transparent 22%),
radial-gradient(circle at 78% 82%, rgba(255,255,255,.07), transparent 24%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
pointer-events: none;
}
.refpro-hero-box::after{
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(120deg, rgba(255,255,255,.04) 0%, transparent 34%, transparent 66%, rgba(255,255,255,.03) 100%);
pointer-events: none;
mix-blend-mode: screen;
}
.refpro-hero-inner{
position: relative;
z-index: 2;
width: min(100%, 860px);
color: #fff;
}
.refpro-eyebrow{
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.16);
font-size: 11px;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
color: rgba(255,255,255,.96);
backdrop-filter: blur(6px);
}
.refpro-hero h1{
margin: 0 0 14px;
font-size: clamp(28px, 3.1vw, 42px);
line-height: 1.18;
font-weight: 700;
color: #fff;
letter-spacing: -.02em;
}
.refpro-hero p{
margin: 0 auto;
max-width: 720px;
font-size: clamp(14px, 1.2vw, 17px);
line-height: 1.85;
color: rgba(255,255,255,.92);
}
.refpro-section{
padding: 76px 0 0;
}
.refpro-split{
display: grid;
grid-template-columns: 1.02fr .98fr;
gap: 54px;
align-items: center;
}
.refpro-split.reverse{
grid-template-columns: .98fr 1.02fr;
}
.refpro-split.reverse .refpro-card-media{
order: 2;
}
.refpro-split.reverse .refpro-card{
order: 1;
}
.refpro-card{
background: rgba(255,255,255,.92);
border: 1px solid var(--refpro-line);
border-radius: var(--refpro-radius);
box-shadow: var(--refpro-shadow);
padding: clamp(24px, 4vw, 42px);
backdrop-filter: blur(8px);
}
.refpro-card-media{
position: relative;
overflow: hidden;
min-height: 100%;
border-radius: var(--refpro-radius);
border: 1px solid var(--refpro-line);
box-shadow: var(--refpro-shadow);
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,252,.98));
padding: 22px;
}
.refpro-card-media::before{
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 10% 15%, rgba(199,154,43,.08), transparent 24%),
radial-gradient(circle at 88% 14%, rgba(15,94,168,.07), transparent 22%),
linear-gradient(180deg, rgba(255,255,255,0), rgba(15,23,42,.02));
pointer-events: none;
}
.refpro-card-media-inner{
position: relative;
z-index: 2;
display: grid;
gap: 18px;
}
.refpro-kicker{
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
font-size: 12px;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
color: #334155;
}
.refpro-kicker::before{
content: "";
width: 30px;
height: 1px;
background: rgba(51,65,85,.30);
}
.refpro-title{
margin: 0 0 16px;
font-size: clamp(24px, 2.8vw, 38px);
line-height: 1.18;
letter-spacing: -.02em;
color: var(--refpro-heading);
}
.refpro-text{
margin: 0 0 16px;
font-size: 16px;
line-height: 1.9;
color: var(--refpro-muted);
}
.refpro-text:last-child{
margin-bottom: 0;
}
.refpro-list{
list-style: none;
margin: 18px 0 0;
padding: 0;
}
.refpro-list li{
position: relative;
padding-left: 26px;
margin-bottom: 12px;
font-size: 15px;
line-height: 1.8;
color: #475569;
}
.refpro-list li:last-child{
margin-bottom: 0;
}
.refpro-list li::before{
content: "";
position: absolute;
left: 0;
top: .78em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--refpro-gold);
box-shadow: 0 0 0 5px rgba(199,154,43,.12);
}
.refpro-highlight-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 16px;
}
.refpro-highlight{
background: rgba(255,255,255,.92);
border: 1px solid var(--refpro-line);
border-radius: 20px;
box-shadow: var(--refpro-shadow-soft);
padding: 22px 18px;
}
.refpro-highlight strong{
display: block;
margin-bottom: 8px;
font-size: 16px;
line-height: 1.5;
color: var(--refpro-heading);
}
.refpro-highlight span{
display: block;
font-size: 14px;
line-height: 1.8;
color: var(--refpro-muted);
}
.refpro-stats{
padding: 68px 0 0;
}
.refpro-stats-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.refpro-stat{
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
border: 1px solid var(--refpro-line);
border-radius: 22px;
box-shadow: var(--refpro-shadow-soft);
padding: 28px 20px;
text-align: center;
}
.refpro-stat strong{
display: block;
margin-bottom: 10px;
font-size: clamp(26px, 2.8vw, 38px);
line-height: 1;
color: var(--refpro-blue);
letter-spacing: -.02em;
}
.refpro-stat span{
display: block;
font-size: 14px;
line-height: 1.75;
color: var(--refpro-muted);
}
.refpro-program-shell{
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,251,253,.98));
border: 1px solid var(--refpro-line);
border-radius: 30px;
box-shadow: var(--refpro-shadow);
padding: clamp(24px, 4vw, 36px);
}
.refpro-program-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.refpro-program-card{
background: #fff;
border: 1px solid var(--refpro-line);
border-radius: 24px;
box-shadow: var(--refpro-shadow-soft);
padding: 28px 24px;
}
.refpro-program-card h3{
margin: 0 0 12px;
font-size: 23px;
line-height: 1.3;
color: var(--refpro-heading);
letter-spacing: -.02em;
}
.refpro-program-card p{
margin: 0 0 14px;
font-size: 15px;
line-height: 1.85;
color: var(--refpro-muted);
}
.refpro-info-grid{
display: grid;
grid-template-columns: 1fr;
gap: 22px;
align-items: stretch;
}
.refpro-offer-card{
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid var(--refpro-line);
border-radius: 24px;
box-shadow: var(--refpro-shadow-soft);
padding: 28px 24px;
}
.refpro-cta{
padding: 84px 0 100px;
}
.refpro-cta-box{
position: relative;
overflow: hidden;
border-radius: 30px;
padding: 42px 28px;
background: linear-gradient(135deg, #132235, #1a2b40 62%, #24394f);
box-shadow: var(--refpro-shadow);
border: 1px solid rgba(255,255,255,.06);
}
.refpro-cta-box::before{
content: "";
position: absolute;
right: -90px;
bottom: -90px;
width: 250px;
height: 250px;
border-radius: 50%;
background: rgba(255,255,255,.05);
}
.refpro-cta-grid{
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.35fr auto;
gap: 28px;
align-items: center;
}
.refpro-cta h2{
margin: 0 0 12px;
font-size: clamp(24px, 2.8vw, 38px);
line-height: 1.18;
letter-spacing: -.02em;
color: #fff;
}
.refpro-cta p{
margin: 0;
max-width: 760px;
font-size: 15px;
line-height: 1.9;
color: rgba(255,255,255,.86);
}
.refpro-cta-actions{
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: flex-end;
align-items: center;
}
.refpro-btn{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 54px;
padding: 14px 24px;
border-radius: 999px;
background: #fff;
color: #0f172a;
text-decoration: none;
font-weight: 700;
font-size: 14px;
letter-spacing: .01em;
box-shadow: 0 12px 28px rgba(0,0,0,.14);
transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
border: 1px solid transparent;
}
.refpro-btn:hover{
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(0,0,0,.16);
background: #f8fafc;
}
.refpro-btn.refpro-btn-secondary{
background: transparent;
color: #fff;
border-color: rgba(255,255,255,.32);
box-shadow: none;
}
.refpro-btn.refpro-btn-secondary:hover{
background: rgba(255,255,255,.10);
color: #fff;
box-shadow: 0 16px 34px rgba(0,0,0,.12);
}
@media (max-width: 1100px){
.refpro-stats-grid{
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 991px){
.refpro-split,
.refpro-split.reverse,
.refpro-cta-grid,
.refpro-program-grid,
.refpro-info-grid{
grid-template-columns: 1fr;
gap: 28px;
}
.refpro-card-media{
order: initial !important;
}
.refpro-card{
order: initial !important;
}
.refpro-highlight-grid{
grid-template-columns: 1fr;
}
.refpro-cta-actions{
justify-content: stretch;
}
.refpro-btn{
width: 100%;
}
}
@media (max-width: 640px){
.refpro-wrap{
width: min(100% - 22px, var(--refpro-container));
}
.refpro-hero{
padding: 16px 0 0;
}
.refpro-hero-box{
min-height: 260px;
padding: 32px 16px;
border-radius: 22px;
}
.refpro-eyebrow{
font-size: 10px;
padding: 7px 12px;
}
.refpro-hero h1{
font-size: 24px;
line-height: 1.24;
}
.refpro-hero p{
font-size: 14px;
line-height: 1.72;
}
.refpro-section,
.refpro-stats,
.refpro-cta{
padding-top: 56px;
}
.refpro-stats-grid{
grid-template-columns: 1fr;
}
.refpro-card,
.refpro-card-media,
.refpro-program-shell,
.refpro-cta-box{
border-radius: 22px;
}
.refpro-title{
font-size: 26px;
line-height: 1.24;
}
.refpro-text{
font-size: 15px;
line-height: 1.85;
}
}
.page-type-language-training .refpro-page {
color: var(--refpro-text);
background: transparent;
overflow: visible;
}
.page-type-language-training .cms-section { background: transparent; }
.page-type-language-training .cms-section > section { padding-left: 0; padding-right: 0; }
.page-type-language-training .refpro-closing-text { margin-top: 18px; }
/* Restore the original spacing with the CMS wrapper's higher specificity. */
.page-type-language-training .cms-section > .refpro-hero { padding: 22px 0 10px; }
.page-type-language-training .cms-section > .refpro-section { padding: 76px 0 0; }
.page-type-language-training .cms-section > .refpro-stats { padding: 68px 0 0; }
.page-type-language-training .cms-section > .refpro-cta { padding: 84px 0 100px; }
@media (max-width: 640px) {
.page-type-language-training .cms-section > .refpro-hero { padding: 16px 0 0; }
.page-type-language-training .cms-section > .refpro-section,
.page-type-language-training .cms-section > .refpro-stats,
.page-type-language-training .cms-section > .refpro-cta { padding-top: 56px; }
.page-type-language-training .cms-section > .refpro-cta { padding-bottom: 72px; }
}
/* ========================================================================
SkillsHR header correction v1.0.4
- no phone/email row
- flag-only language selector
- Language Training nested under Our Services
======================================================================== */
.site-header .header-inner {
min-height: 92px;
}
.site-header .header-right {
display: flex;
align-items: center;
justify-content: flex-end;
}
.site-header .header-nav-row {
width: 100%;
min-height: 50px;
}
.site-header .desktop-nav > ul {
display: flex;
align-items: center;
justify-content: flex-end;
}
.site-header .desktop-nav li.has-children > a {
padding-right: 15px;
}
.site-header .desktop-nav li.has-children > a::before {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-68%) rotate(45deg);
}
.site-header .desktop-nav .submenu {
top: calc(100% + 10px);
left: 50%;
min-width: 200px;
padding: 0 !important;
background: transparent;
box-shadow: none;
text-align: center;
transform: translateX(-50%) translateY(-12px);
}
.site-header .desktop-nav .submenu li {
display: block;
margin: 0;
}
.site-header .desktop-nav .submenu a {
min-height: 36px;
padding: 8px 16px;
background: var(--primary);
color: #fff;
font-size: 16px;
font-weight: 500;
}
.site-header .desktop-nav .submenu a:hover,
.site-header .desktop-nav .submenu a:focus {
background: #f8f9fa;
color: var(--dark);
}
.site-header .desktop-nav .submenu .submenu {
top: 0;
left: 100%;
min-width: 200px;
transform: translateY(-12px);
}
.site-header .desktop-nav .submenu li:hover > .submenu,
.site-header .desktop-nav .submenu li:focus-within > .submenu {
transform: translateY(0);
}
.site-header .desktop-nav .submenu li.has-children > a {
padding-right: 28px;
}
.site-header .desktop-nav .submenu li.has-children > a::before {
right: 13px;
transform: translateY(-50%) rotate(-45deg);
}
.language-menu-item {
display: flex;
align-items: center;
margin: 0 4px 0 6px !important;
}
.language-flag-switcher {
position: relative;
}
.language-flag-switcher > summary {
width: 38px;
height: 32px;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
cursor: pointer;
list-style: none;
}
.language-flag-switcher > summary::-webkit-details-marker {
display: none;
}
.language-flag-switcher img {
display: block;
width: 19px;
height: 13px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(0,0,0,.10);
}
.language-flag-menu {
position: absolute;
z-index: 30;
top: calc(100% + 1px);
left: 50%;
width: 60px;
padding: 0;
background: var(--primary);
transform: translateX(-50%);
box-shadow: 0 8px 18px rgba(0,0,0,.14);
}
.language-flag-menu a {
min-height: 36px;
display: flex !important;
align-items: center;
justify-content: center;
padding: 8px !important;
}
.language-flag-menu a:hover {
background: #f8f9fa;
}
.site-header.sticky .header-right {
width: calc(100% - 105px);
}
.mobile-language-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 12px 18px;
}
.mobile-language-links a {
display: flex !important;
align-items: center;
gap: 8px;
}
.mobile-language-links img {
width: 22px;
height: 15px;
object-fit: cover;
}
@media (max-width: 1050px) {
.language-menu-item { display: none; }
.site-header .header-right { width: auto; }
}
/* ========================================================================
SkillsHR legacy design fidelity — Home testimonials v1.0.5
The CMS wrapper has stronger generic declarations, so these selectors are
intentionally scoped to the testimonial section wrapper.
======================================================================== */
.cms-section-testimonials > .testimonials-section {
position: relative;
display: flex;
align-items: center;
min-height: 500px;
width: 100%;
overflow: hidden;
padding: 104px 85px 78px;
background: var(--primary);
color: #fff !important;
text-align: center;
}
.cms-section-testimonials > .testimonials-section::before {
content: "";
position: absolute;
inset: 0 36px;
margin: auto;
width: auto;
height: 100%;
background: var(--dark);
transform: skewX(-8.5deg);
}
.cms-section-testimonials .testimonial-slider {
position: relative;
z-index: 2;
width: 100%;
max-width: 885px;
margin: auto;
color: #fff !important;
}
.cms-section-testimonials .testimonial {
display: none;
width: 100%;
color: #fff !important;
}
.cms-section-testimonials .testimonial.active {
display: flex;
flex-direction: column;
align-items: center;
animation: skillshrTestimonialFade 1s ease both;
}
@keyframes skillshrTestimonialFade {
from { opacity: 0; }
to { opacity: 1; }
}
.cms-section-testimonials .testimonial blockquote {
width: 100%;
margin: 0;
color: #fff !important;
font-size: 16px;
font-style: italic;
font-weight: 400;
line-height: 1.9;
}
.cms-section-testimonials .testimonial blockquote ol,
.cms-section-testimonials .testimonial blockquote ul {
width: fit-content;
max-width: 100%;
margin: 18px auto 0;
padding-left: 25px;
text-align: left;
}
.cms-section-testimonials .testimonial blockquote li {
margin: 7px 0;
}
.cms-section-testimonials .testimonial cite {
display: block;
margin: 36px 0 45px;
color: #fff !important;
font-size: 16px;
font-style: normal;
font-weight: 500;
}
.cms-section-testimonials .testimonial img {
display: block;
width: 100px;
height: 100px;
margin: auto;
overflow: hidden;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
.cms-section-testimonials .testimonial-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin: 30px 0 0;
}
.cms-section-testimonials .testimonial-controls button {
width: 14px;
height: 14px;
margin: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.3);
cursor: pointer;
transition: background-color .25s ease, transform .25s ease;
}
.cms-section-testimonials .testimonial-controls button:hover {
background: var(--primary);
transform: scale(1.08);
}
.cms-section-testimonials .testimonial-controls button.active {
background: #fff;
}
@media (max-width: 700px) {
.cms-section-testimonials > .testimonials-section {
min-height: auto;
padding: 80px 35px 64px;
}
.cms-section-testimonials > .testimonials-section::before {
inset: 0;
width: 100%;
transform: skewX(-8.5deg);
}
.cms-section-testimonials .testimonial blockquote {
font-size: 15px;
line-height: 1.75;
}
.cms-section-testimonials .testimonial cite {
margin: 28px 0 34px;
}
}
/* ================================================================
SkillsHR legacy design fidelity — Footer colour correction v1.0.6
The original footer uses a neutral charcoal (#363636), clearly
separated from the dark-blue testimonial panel above it.
================================================================ */
.site-footer {
background: #363636 !important;
background-color: #363636 !important;
background-image: none !important;
color: #ffffff !important;
position: relative;
z-index: 2;
margin-top: 0 !important;
}
.site-footer::before,
.site-footer::after {
display: none !important;
content: none !important;
}
.site-footer .footer-grid,
.site-footer .footer-column,
.site-footer .footer-bottom {
background: transparent !important;
background-color: transparent !important;
}
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer address,
.site-footer a {
color: #ffffff !important;
}
.site-footer .footer-bottom,
.site-footer .legal-links {
border-color: rgba(255, 255, 255, 0.16) !important;
}
.cms-section-testimonials {
position: relative;
z-index: 1;
}
/* ========================================================================
SkillsHR booking calendar — availability-aware public date and time picker
======================================================================== */
.booking-select-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.booking-calendar {
padding: 18px;
border: 1px solid #dbe2e8;
border-radius: 8px;
background: #f8fafc;
}
.booking-calendar-toolbar {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 42px;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.booking-calendar-toolbar strong {
color: var(--dark);
font-family: var(--heading-font);
font-size: 19px;
line-height: 1.2;
text-align: center;
text-transform: capitalize;
}
.booking-calendar-nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
min-height: 42px;
padding: 0;
border: 1px solid #cbd5df;
border-radius: 50%;
background: #fff;
color: var(--dark);
font-size: 29px;
line-height: 1;
cursor: pointer;
}
.booking-calendar-nav:hover:not(:disabled) {
border-color: var(--primary);
color: var(--primary);
}
.booking-calendar-nav:disabled {
opacity: .3;
cursor: not-allowed;
}
.booking-calendar-weekdays,
.booking-calendar-days {
display: grid;
grid-template-columns: repeat(7, 44px);
justify-content: center;
gap: 8px;
}
.booking-calendar-weekdays {
margin-bottom: 6px;
}
.booking-calendar-weekdays span {
color: #647384;
font-size: 12px;
font-weight: 800;
text-align: center;
text-transform: uppercase;
}
.booking-calendar-empty,
.booking-calendar-day {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
aspect-ratio: auto;
}
.booking-calendar-day {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: #a1acb7;
font: inherit;
font-weight: 700;
cursor: default;
}
.booking-calendar-day i {
position: absolute;
left: 50%;
bottom: 5px;
width: 5px;
height: 5px;
border-radius: 50%;
transform: translateX(-50%);
}
.booking-calendar-day.is-available,
.booking-calendar-day.is-fully-booked {
background: #fff;
cursor: pointer;
}
.booking-calendar-day.is-available {
border-color: rgba(0, 91, 151, .35);
color: var(--primary);
}
.booking-calendar-day.is-available i {
background: #26995c;
}
.booking-calendar-day.is-fully-booked {
border-color: #d7dde3;
color: #74808c;
background: #edf1f4;
}
.booking-calendar-day.is-fully-booked i {
background: #8d98a3;
}
.booking-calendar-day.is-available:hover,
.booking-calendar-day.is-fully-booked:hover {
border-color: var(--primary);
}
.booking-calendar-day.is-selected {
border-color: var(--primary);
background: var(--primary);
color: #fff;
box-shadow: 0 5px 14px rgba(0, 91, 151, .24);
}
.booking-calendar-day.is-selected i {
background: #fff;
}
.booking-calendar-day:disabled {
opacity: 1;
cursor: not-allowed;
}
.booking-calendar-legend {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
margin-top: 14px;
color: #667483;
font-size: 12px;
}
.booking-calendar-legend span {
display: inline-flex;
align-items: center;
gap: 7px;
}
.calendar-legend-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
}
.calendar-legend-dot.is-available {
background: #26995c;
}
.calendar-legend-dot.is-booked {
background: #8d98a3;
}
.booking-calendar-status {
min-height: 20px;
margin: 10px 0 0;
color: #667483;
font-size: 13px;
text-align: center;
}
.booking-times-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-top: 4px;
color: var(--dark);
}
.booking-times-heading span {
color: #687684;
font-size: 13px;
font-weight: 500;
text-align: right;
}
.slots {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.slot {
display: grid;
gap: 2px;
min-height: 54px;
border-radius: 5px;
}
.slot span {
font-size: 15px;
line-height: 1.1;
}
.slot small {
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
line-height: 1.1;
text-transform: uppercase;
}
.slot.is-available small {
color: #39815b;
}
.slot.is-available:hover small {
color: #fff;
}
.slot.is-booked,
.slot.is-booked[disabled] {
border-color: #d2d9df;
background: #edf1f4;
color: #7a8793;
opacity: 1;
cursor: not-allowed;
}
.slot.is-booked small {
color: #8b96a0;
}
@media (max-width: 700px) {
.booking-select-row {
grid-template-columns: 1fr;
}
.booking-calendar {
padding: 13px 10px;
}
.booking-calendar-weekdays,
.booking-calendar-days {
grid-template-columns: repeat(7, 38px);
gap: 4px;
}
.booking-calendar-empty,
.booking-calendar-day {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
}
.booking-calendar-day {
font-size: 13px;
}
.booking-times-heading {
display: grid;
}
.booking-times-heading span {
text-align: left;
}
.slots {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Booking calendar status distinction: unavailable days are not fully booked. */
.booking-calendar-day.is-unavailable {
color: #a8b3c0;
background: transparent;
border-color: transparent;
}
.booking-calendar-day.is-unavailable:hover {
background: transparent;
border-color: transparent;
transform: none;
}
.calendar-legend-dot.is-unavailable {
background: #a8b3c0;
}
/* Booking timezone conversion (v1.0.13) */
.booking-timezone-note {
margin: 0;
padding: 12px 15px;
border: 1px solid #cfdbe5;
border-left: 4px solid var(--primary);
border-radius: 8px;
background: #f4f8fb;
color: #43566a;
font-size: 14px;
line-height: 1.55;
}
.booking-timezone-note > strong,
.booking-timezone-note [data-office-timezone] {
color: var(--dark);
}
.booking-timezone-note.is-same-timezone .booking-timezone-separator,
.booking-timezone-note.is-same-timezone .booking-office-timezone {
display: none;
}
.slot em {
display: block;
margin-top: 2px;
color: #60758a;
font-size: 11px;
font-style: normal;
font-weight: 600;
line-height: 1.25;
}
.slot.is-available:hover em {
color: rgba(255,255,255,.85);
}
.slot.is-booked em {
color: #7f8d9a;
}
@media (max-width: 700px) {
.booking-timezone-note {
font-size: 13px;
}
.booking-timezone-separator {
display: none;
}
.booking-office-timezone {
display: block;
margin-top: 3px;
}
}