/* ========================================================================== Construction Skills Professionals — homepage styles Palette and type follow the approved "Direction 1a" design. ========================================================================== */ :root{ --navy-deep:#081422; --navy:#0B1B2E; --navy-mid:#13304F; --slate:#16283C; --slate-2:#3A4C61; --body-text:#51637A; /* --muted, --orange-deep and the two --whatsapp-text values below were darkened from their original design-file hex values to pass WCAG AA (4.5:1) at the small text sizes they're actually used at — see the accessibility audit referenced in /accessibility-statement/. Original values: --muted #8A99AB (2.9:1), --orange-deep #E8930C (2.4:1), --whatsapp-text #1DA851 (3.1:1), --whatsapp-text-hover #128C7E (4.1:1). */ --muted:#606B77; --border:#E4E9F0; --panel:#F5F7FA; --white:#FFFFFF; --orange:#F5A623; --orange-hover:#E09612; --orange-deep:#965F07; --green:#009639; --blue:#0072CE; --gold:#D4A017; --gold-text:#B98A1C; --black-card:#1A1A1A; --whatsapp:#25D366; --whatsapp-hover:#1EBE5A; --whatsapp-text:#178640; --whatsapp-text-hover:#0F6B32; --error-red:#C0392B; --header-h:80px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--panel); font-family:'Archivo',system-ui,sans-serif; color:var(--slate); -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} a:hover{color:var(--orange-deep)} button{font-family:inherit} h1,h2,h3,p{text-wrap:pretty} .container{max-width:1240px;margin:0 auto;padding:0 48px} .skip-link{ position:absolute;left:-999px;top:auto; background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;z-index:2000; } .skip-link:focus{left:0;top:0} /* ---------------- Header ---------------- */ .site-header{ position:sticky;top:0;z-index:500; display:flex;align-items:center;gap:32px; padding:0 48px;height:var(--header-h); background:#FFFFFF;border-bottom:1px solid var(--border); } .site-header .logo{flex:none;display:flex;align-items:center} .site-header .logo img{height:54px;width:auto} .main-nav{display:flex;align-items:center;gap:26px;margin-left:12px;font-size:14.5px;font-weight:600;color:var(--slate-2)} .main-nav a:hover{color:var(--navy)} /* ---------------- Mega-menu nav dropdowns (25 Jul 2026) ---------------- Card Pathways / NVQs / Plant Training / CITB Tests / Courses each show a dropdown of course name + price, one click from the pricing page instead of two. Desktop opens on hover (plus :focus-within for keyboard users) — no JS needed. .mega-menu sits flush against .nav-item (top:100%, no margin gap) so the hover state never drops crossing from the nav link down into the panel. See _nav_item_html()/_mobile_nav_item_html() in scripts/site_template.py for the shared data driving both this and the mobile accordion below. */ .main-nav .nav-item{position:relative;display:flex;align-items:center} .main-nav .nav-link{display:flex;align-items:center;gap:4px;color:inherit;font:inherit} .main-nav .nav-link:hover{color:var(--navy)} .main-nav > a,.main-nav .nav-link{position:relative;padding:8px 2px} .main-nav > a::after,.main-nav .nav-link::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange); border-radius:2px;transform:scaleX(0);transition:transform .15s ease; } .main-nav > a:hover::after,.main-nav .nav-link:hover::after, .nav-item.has-dropdown.open > .nav-link::after,.nav-item.has-dropdown:focus-within > .nav-link::after{transform:scaleX(1)} .nav-chevron{transition:transform .15s ease} .nav-item.has-dropdown:hover .nav-chevron,.nav-item.has-dropdown.open .nav-chevron, .nav-item.has-dropdown:focus-within .nav-chevron{transform:rotate(180deg)} .mega-menu{ position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px); background:#fff;border-radius:12px;box-shadow:0 20px 50px rgba(11,27,46,.18); padding:24px 28px;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .15s ease,transform .15s ease;z-index:600; } .nav-item.has-dropdown:hover .mega-menu,.nav-item.has-dropdown.open .mega-menu, .nav-item.has-dropdown:focus-within .mega-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} .mega-menu-inner{display:flex;gap:36px} .mega-col{min-width:210px} .mega-col-title{margin:0 0 10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);white-space:nowrap} .mega-link{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 10px;margin:0 -10px;border-radius:8px;font-size:14px;font-weight:600;color:var(--navy);white-space:nowrap} .mega-link:hover{background:#F5F7FA} .mega-link .mega-price{font-weight:800;color:var(--orange-deep);font-size:13px} .header-actions{margin-left:auto;display:flex;align-items:center;gap:22px} .header-phone{font-size:15px;font-weight:700;color:var(--navy);letter-spacing:.01em} .header-phone:hover{color:var(--orange-deep)} .header-whatsapp{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--whatsapp-text)} .header-whatsapp:hover{color:var(--whatsapp-text-hover)} .dot{width:8px;height:8px;border-radius:50%;background:var(--whatsapp);display:inline-block} .btn-cta{background:var(--orange);color:#101C2B;font-size:14.5px;font-weight:700;padding:12px 22px;border-radius:9px;border:none;cursor:pointer;display:inline-block} .btn-cta:hover{background:var(--orange-hover);color:#101C2B} .hamburger{display:none} /* ---------------- Hero ---------------- */ .hero{position:relative;background:var(--navy-deep);overflow:hidden} .hero-bg{position:absolute;inset:0;background:#0d1e30 url("/assets/images/site-briefing.jpg") center/cover no-repeat} .hero-scrim{position:absolute;inset:0;background:linear-gradient(88deg, rgba(6,16,28,.94) 0%, rgba(6,16,28,.78) 42%, rgba(6,16,28,.30) 78%, rgba(6,16,28,.12) 100%);pointer-events:none} .hero-inner{position:relative;z-index:2;padding:100px 48px 56px;max-width:760px} .hero-eyebrow{margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)} .hero h1{margin:0 0 20px;font-size:64px;line-height:1.04;font-weight:800;letter-spacing:-.015em;color:#fff} .hero-sub{margin:0 0 34px;font-size:19px;line-height:1.55;color:rgba(255,255,255,.82);max-width:600px} .hero-ctas{display:flex;align-items:center;gap:26px;margin-bottom:44px;flex-wrap:wrap} .btn-call{color:#fff;font-size:16px;font-weight:600;border-bottom:2px solid rgba(245,166,35,.6);padding-bottom:2px} .btn-call:hover{color:var(--orange)} .hero-picker{display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,.97);border-radius:12px;padding:14px 18px;box-shadow:0 12px 32px rgba(0,0,0,.35);max-width:560px} .hero-picker-label{font-size:14px;font-weight:700;color:var(--slate)} .hero-picker-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .hero-picker-group-label{flex:none;min-width:96px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .hero-picker-group-label-plant{color:var(--orange-deep)} .hero-picker-opts{display:flex;gap:8px;flex-wrap:wrap} .pill-link{font-size:13.5px;font-weight:600;color:var(--slate-2);background:#EEF2F7;padding:9px 15px;border-radius:8px} .pill-link:hover{background:var(--navy);color:#fff} .pill-link-plant{color:#7A4D0F;background:#FDF3DF} .pill-link-plant:hover{background:var(--orange-deep);color:#fff} /* ---------------- Trust bar ---------------- */ .trust-bar{display:flex;flex-direction:column;align-items:center;gap:20px;padding:32px 48px;background:#fff;border-bottom:1px solid var(--border)} .trust-label{margin:0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .trust-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px 18px} .trust-logo{display:flex;align-items:center;justify-content:center;height:68px;min-width:104px;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 1px 4px rgba(11,27,46,.08);padding:10px 16px} .trust-logo img{max-height:100%;max-width:130px;width:auto;height:auto;object-fit:contain} .trust-fineprint{margin:0;max-width:760px;text-align:center;font-size:12.5px;line-height:1.5;color:var(--muted)} /* ---------------- Most Popular Packages carousel (25 Jul 2026) ---------------- One slide visible at a time via a CSS transform on .popular-carousel-track; js/popular-carousel.js drives auto-advance/pause/keyboard/dot logic. Only the active slide's "View Course" link stays in the tab order (JS toggles tabindex) so keyboard/screen-reader users can't tab into off-screen slides. */ .popular-carousel{background:var(--navy);padding:48px 0 40px;overflow:hidden} .popular-carousel-heading{margin:0 0 28px;padding:0 20px;color:#fff;font-size:26px;font-weight:800;text-align:center;letter-spacing:-.01em} .popular-carousel-inner{position:relative;max-width:820px;margin:0 auto;padding:0 60px;outline-offset:4px} .popular-carousel-track{display:flex;transition:transform .4s ease} .popular-slide{flex:0 0 100%;text-align:center;padding:8px 20px 4px;color:#fff} .popular-badge{display:inline-block;background:var(--orange);color:#101C2B;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:6px 16px;border-radius:999px;margin-bottom:16px} .popular-slide h3{margin:0 0 8px;font-size:24px;font-weight:800} .popular-slide p{margin:0 0 6px;color:rgba(255,255,255,.75);font-size:15px} .popular-price{font-size:30px !important;font-weight:800;color:var(--orange) !important;margin:8px 0 22px !important} .popular-carousel-arrow{ position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12); border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:22px;line-height:1; cursor:pointer;display:flex;align-items:center;justify-content:center; } .popular-carousel-arrow:hover{background:rgba(255,255,255,.25)} .popular-carousel-prev{left:0} .popular-carousel-next{right:0} .popular-carousel-pause{ position:absolute;top:4px;right:12px;background:rgba(255,255,255,.12);border:none;color:#fff; width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:13px; } .popular-carousel-pause:hover{background:rgba(255,255,255,.25)} .popular-carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:22px} .popular-carousel-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);border:none;padding:0;cursor:pointer} .popular-carousel-dot.is-active{background:var(--orange)} .popular-carousel-inner:focus-visible,.popular-carousel-arrow:focus-visible, .popular-carousel-pause:focus-visible,.popular-carousel-dot:focus-visible{outline:2px solid #fff;outline-offset:3px} @media (prefers-reduced-motion:reduce){.popular-carousel-track{transition:none}} @media (max-width:640px){ .popular-carousel-inner{padding:0 44px} .popular-slide h3{font-size:20px} .popular-price{font-size:24px !important} .popular-carousel-arrow{width:34px;height:34px;font-size:18px} } /* ---------------- Stats ---------------- */ .stats{display:grid;grid-template-columns:repeat(5,1fr);background:var(--navy);padding:40px 48px} .stat{text-align:center;border-right:1px solid rgba(255,255,255,.09)} .stat:last-child{border-right:none} .stat-num{font-size:34px;font-weight:800;color:#fff;letter-spacing:-.01em} .stat-num.accent{color:var(--orange)} .stat-label{margin-top:6px;font-size:13px;font-weight:600;color:rgba(255,255,255,.6)} /* ---------------- Section shells ---------------- */ section{padding:88px 48px 80px} .section-title{margin:0 0 10px;font-size:38px;font-weight:800;letter-spacing:-.015em;color:var(--navy);text-align:center} .section-lead{margin:0 auto 48px;font-size:17px;line-height:1.55;color:var(--body-text);max-width:640px;text-align:center} /* ---------------- Pathways ---------------- */ .pathways-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} /* 5-across (CSCS Card Pathways: Green/Blue/Gold/Black/Other) and explicit 3x2 (Short Courses: 6 items) grids — dedicated classes rather than reusing .pathways-grid's inline-style-override pattern, since these two need their own responsive breakpoints (inline styles can't carry media queries and would otherwise block the shared mobile collapse rule below). */ .pathways-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:1200px;margin:0 auto} .pathways-grid-3x2{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:820px;margin:0 auto} .pathway-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(11,27,46,.05);display:flex;flex-direction:column} .pathway-bar{height:8px} .pathway-bar.green{background:var(--green)} .pathway-bar.blue{background:var(--blue)} .pathway-bar.gold{background:var(--gold)} .pathway-bar.black{background:var(--black-card)} .pathway-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1} .pathway-eyebrow{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .pathway-eyebrow.green{color:var(--green)} .pathway-eyebrow.blue{color:var(--blue)} .pathway-eyebrow.gold{color:var(--gold-text)} .pathway-eyebrow.black{color:var(--black-card)} .pathway-card h3{margin:0 0 8px;font-size:20px;font-weight:700;color:var(--navy)} .pathway-card p{margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--body-text)} .link-underline{font-size:14px;font-weight:700;color:var(--navy);border-bottom:2px solid var(--orange);padding-bottom:2px} .link-underline:hover{color:var(--orange-deep)} /* Pins the "View Courses/Course →" link (and whatever buy/enquire row follows it) to the bottom of the card, so both sit on a consistent line across a row regardless of how much body text sits above them — the leftover vertical space collects above the link via margin-top:auto. */ .pathway-body .link-underline{margin-top:auto} .pathway-buy-row{margin-top:14px} .btn-buy-course{ display:inline-block;font-family:inherit;background:var(--orange);border:none; color:#101C2B;font-size:13.5px;font-weight:700;padding:10px 16px;border-radius:8px; cursor:pointer;text-decoration:none; } .btn-buy-course:hover{background:var(--orange-hover)} /* ---------------- Hover-reveal photo variant ---------------- A modifier on top of the shared .pathway-card component. Used by both the /courses/ index CSCS Card Pathway + Short Course cards AND the homepage's "Your CSCS Card Pathway" section — same markup, same classes, deliberately not duplicated, so the two never drift out of sync. Cards elsewhere on the site (NVQ/plant-training listings, other-cscs-cards grid) that reuse the plain .pathway-card base class without this modifier are untouched. */ .pathway-card--photo{position:relative} .pathway-card--photo .pathway-bar,.pathway-card--photo .pathway-body{position:relative;z-index:2} .pathway-hover-media{ position:absolute;inset:0;z-index:1;background-size:cover;background-position:center; opacity:0;transform:scale(.96);transition:opacity .3s ease,transform .3s ease;pointer-events:none; } .pathway-hover-media::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(11,27,46,.35) 0%,rgba(9,18,30,.92) 100%); } @media (hover:hover){ .pathway-card--photo:hover .pathway-hover-media{opacity:1;transform:scale(1)} .pathway-card--photo:hover h3, .pathway-card--photo:hover p, .pathway-card--photo:hover .link-underline{color:#fff} } /* Touch/no-hover devices never trigger :hover, so the photo would otherwise never be seen at all — show it permanently at low opacity instead, as a subtle texture rather than the full reveal, and leave text colors alone since the card background is still mostly white underneath. */ @media (hover:none){ .pathway-card--photo .pathway-hover-media{opacity:.15} } @media (max-width:1024px){ .pathways-grid-5{grid-template-columns:repeat(3,1fr)} } @media (max-width:900px){ .pathways-grid-5{grid-template-columns:repeat(2,1fr)} .pathways-grid-3x2{grid-template-columns:repeat(2,1fr)} } @media (max-width:600px){ .pathways-grid-5{grid-template-columns:1fr} .pathways-grid-3x2{grid-template-columns:1fr} } /* ---------------- Why us ---------------- */ .why-section{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px} .why-icon{width:44px;height:44px;border-radius:10px;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:18px} .why-grid h3{margin:0 0 10px;font-size:19px;font-weight:700;color:var(--navy)} .why-grid p{margin:0;font-size:15px;line-height:1.6;color:var(--body-text)} /* ---------------- Pathway convergence diagram (Green Labourer page) ---------------- Two input boxes (Operative CSCS test / Level 1 course) converging via L-shaped connectors into the Green card output box. Box positions use the same 0–100%-of-container coordinate space as the SVG's viewBox (640×240, matched via aspect-ratio on the wrapper), so the connectors stay aligned with the boxes at any width. Below 640px the geometry collapses to a plain vertical stack — a fixed L-shaped SVG can't usefully reflow, so the SVG is hidden and a single "↓" stands in for both connections. */ .pathway-diagram-wrap{width:100%;max-width:820px;margin:0 auto} .pathway-diagram{position:relative;width:100%;max-width:640px;margin:0 auto;aspect-ratio:640/240} .pathway-diagram svg{position:absolute;inset:0;width:100%;height:100%} .pd-line{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round} @media (prefers-reduced-motion:no-preference){ .pd-line{stroke-dasharray:8 6;animation:pd-flow 2.5s linear infinite} } @keyframes pd-flow{to{stroke-dashoffset:-28}} .pd-box{position:absolute;left:0;width:36%;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 2px 8px rgba(11,27,46,.05);padding:14px 16px;text-align:center;display:flex;flex-direction:column;justify-content:center} .pd-box h3{margin:0;font-size:15.5px;font-weight:800;color:var(--navy);line-height:1.25} .pd-box p{margin:4px 0 0;font-size:12.5px;color:var(--muted)} .pd-box--top{top:0;height:37.5%} .pd-box--bottom{bottom:0;height:37.5%} .pd-box--output{left:auto;right:0;top:31.25%;height:37.5%;border:2px solid var(--green)} .pd-box--output h3{color:var(--green)} .pd-mobile-arrow{display:none;text-align:center;font-size:22px;line-height:1;color:var(--green)} @media (max-width:640px){ .pathway-diagram{position:static;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:320px} .pathway-diagram svg{display:none} .pd-box{position:static;width:100%;height:auto} .pd-mobile-arrow{display:block} } /* Side-by-side "How It All Connects" layout — diagram + the (unchanged) 6-step process list share one section/banner instead of stacking as two. Standard responsive collapse to a single column on smaller screens, same 900px breakpoint already used for the site's other two-column grids (e.g. .journey-grid). */ .connects-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1100px;margin:0 auto} .connects-steps .steps-list{max-width:420px} @media (max-width:900px){ .connects-grid{grid-template-columns:1fr;gap:36px} .connects-steps .steps-list{max-width:none;margin:0 auto} } /* ---------------- Funding quiz ---------------- */ .quiz-section{padding:76px 48px 4px} .quiz-card{max-width:680px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 32px rgba(11,27,46,.09);padding:38px 44px 36px} .quiz-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px} .quiz-kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep)} .quiz-step-label{font-size:13px;font-weight:600;color:var(--muted)} .quiz-panel{animation:quizIn .25s ease} .quiz-panel[hidden]{display:none} .quiz-panel h2{margin:0 0 10px;font-size:28px;font-weight:800;letter-spacing:-.01em;color:var(--navy)} .quiz-panel h3{margin:0 0 18px;font-size:21px;font-weight:700;color:var(--navy)} .quiz-panel > p{margin:0 0 24px;font-size:15.5px;line-height:1.6;color:var(--body-text)} .quiz-options{display:grid;gap:10px} .quiz-option{font-family:inherit;text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px 18px;font-size:15px;font-weight:600;color:var(--slate);cursor:pointer} .quiz-option:hover{border-color:var(--orange);background:#FFFDF6} .quiz-back{margin-top:18px;background:none;border:none;padding:0;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer} .quiz-back:hover{color:var(--navy)} .quiz-start-btn{font-family:inherit;background:var(--orange);color:#101C2B;font-size:15.5px;font-weight:700;padding:14px 30px;border:none;border-radius:10px;cursor:pointer} .quiz-start-btn:hover{background:var(--orange-hover)} .quiz-fineprint{margin:18px 0 0;font-size:12.5px;color:var(--muted)} .quiz-result-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .quiz-contact-form{margin:4px 0 18px;padding:18px 20px;background:var(--panel);border:1px solid var(--border);border-radius:12px} .quiz-contact-label{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--slate)} .quiz-contact-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px} .quiz-contact-row input{flex:1;min-width:160px;font-family:inherit;background:#fff;border:1px solid var(--border);border-radius:8px;padding:11px 14px;font-size:14px;color:var(--slate)} .quiz-contact-row input:focus-visible{outline:2px solid var(--orange);outline-offset:1px} .quiz-contact-error{display:block;margin:0 0 10px;font-size:13px;color:var(--error-red)} .quiz-contact-success{margin:0 0 18px;font-size:14.5px;font-weight:600;color:var(--green)} .quiz-restart{font-family:inherit;background:none;border:none;padding:0;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer} .quiz-restart:hover{color:var(--navy)} @keyframes quizIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---------------- Employers ---------------- */ .employers-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center} .eyebrow{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep)} .employers-section h2{margin:0 0 16px;font-size:36px;font-weight:800;letter-spacing:-.015em;color:var(--navy)} .employers-section > div:first-child > p{margin:0 0 26px;font-size:16.5px;line-height:1.6;color:var(--body-text)} .check-list{margin:0 0 32px;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px} .check-list li{display:flex;gap:12px;align-items:baseline;font-size:15.5px;color:var(--slate)} .check-dot{flex:none;width:8px;height:8px;background:var(--orange);border-radius:2px;position:relative;top:-2px} .check-icon{flex:none;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;position:relative;top:-1px} .check-icon svg{width:11px;height:11px;display:block} .btn-dark{display:inline-block;background:var(--navy);color:#fff;font-size:15.5px;font-weight:700;padding:15px 28px;border-radius:10px} .btn-dark:hover{background:var(--navy-mid);color:#fff} .media-frame{min-width:0;width:100%;height:420px;border-radius:14px;overflow:hidden;box-shadow:0 16px 40px rgba(11,27,46,.14)} .media-frame img{width:100%;height:100%;object-fit:cover;display:block} /* image placeholders standing in for image-slot components in the design */ .img-placeholder{ width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px; background:linear-gradient(135deg,#dfe6ee,#c8d3e0);color:#5d6b7d;font-size:13px;font-weight:600;line-height:1.4; } /* ---------------- Learner journey ---------------- */ .journey-section{background:var(--navy)} .journey-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:64px;align-items:start} .journey-media{min-width:0;width:100%;height:500px;border-radius:14px;overflow:hidden;box-shadow:0 20px 48px rgba(0,0,0,.4)} .journey-media img{width:100%;height:100%;object-fit:cover;display:block} .journey-section h2{margin:0 0 28px;font-size:38px;font-weight:800;letter-spacing:-.015em;color:#fff} .journey-eyebrow{color:var(--orange)} .journey-copy{display:flex;flex-direction:column;gap:18px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.82);max-width:680px} .journey-copy p{margin:0} .journey-attribution{margin:22px 0 0;font-size:15.5px;font-weight:700;color:#fff} .journey-path{display:flex;align-items:center;gap:12px;margin:26px 0 32px;flex-wrap:wrap} .path-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85)} .chip-dot{width:10px;height:10px;border-radius:3px} .path-arrow{color:rgba(255,255,255,.4);font-size:14px} .btn-orange{display:inline-block;background:var(--orange);color:#101C2B;font-size:15.5px;font-weight:700;padding:15px 28px;border-radius:10px} .btn-orange:hover{background:var(--orange-hover);color:#101C2B} /* ---------------- Testimonials ---------------- */ .reviews-section{background:#fff;border-top:1px solid var(--border)} .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .review-card{margin:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:28px} .stars{color:var(--orange);font-size:17px;letter-spacing:2px;margin-bottom:14px} .review-card blockquote{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--slate)} .review-card figcaption{font-size:14px;color:var(--body-text)} .review-card figcaption strong{color:var(--navy);font-weight:700} /* ---------------- Funding band ---------------- */ .funding-band{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:56px 48px;border-top:1px solid var(--border)} .funding-item{display:flex;align-items:center;gap:16px} .funding-icon{flex:none;width:40px;height:40px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;color:var(--orange);font-weight:800;font-size:16px} .funding-item h3{margin:0;font-size:16px;font-weight:700;color:var(--navy)} .funding-item p{margin:2px 0 0;font-size:13.5px;color:var(--body-text)} /* ---------------- FAQ ---------------- */ .faq-section{background:#fff;border-top:1px solid var(--border)} .faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px} .faq-list details{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:20px 24px} .faq-list summary{font-size:16.5px;font-weight:700;color:var(--navy);cursor:pointer} .faq-list summary::-webkit-details-marker{color:var(--orange)} .faq-list p{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--body-text)} /* ---------------- Blog teasers ---------------- */ .articles-section{border-top:1px solid var(--border)} .articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:36px} .article-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(11,27,46,.05);display:flex;flex-direction:column} .article-media{width:100%;height:180px} .article-media-placeholder{display:flex;align-items:center;justify-content:center;background:var(--panel)} .article-media-placeholder img{height:56px;width:auto;object-fit:contain;opacity:.85} .article-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1} .article-tag{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#B36F00;background:#FDF3DF;border-radius:6px;padding:5px 9px} .article-tag.guide{color:var(--slate-2);background:#EEF2F7} .article-body h3{margin:0;font-size:17.5px;line-height:1.35;font-weight:700;color:var(--navy)} .article-body p{margin:0;font-size:14px;line-height:1.55;color:var(--body-text);flex:1} .articles-cta{text-align:center} .btn-outline{display:inline-block;border:1.5px solid var(--navy);color:var(--navy);font-size:15px;font-weight:700;padding:13px 28px;border-radius:10px} .btn-outline:hover{background:var(--navy);color:#fff} /* ---------------- Final CTA ---------------- */ .final-cta{background:var(--navy);padding:72px 48px;text-align:center} .final-cta h2{margin:0 0 12px;font-size:40px;font-weight:800;letter-spacing:-.015em;color:#fff} .final-cta p{margin:0 0 30px;font-size:17px;color:rgba(255,255,255,.72)} .btn-final{display:inline-block;background:var(--orange);color:#101C2B;font-size:17px;font-weight:700;padding:17px 36px;border-radius:10px} .btn-final:hover{background:var(--orange-hover);color:#101C2B} /* ---------------- Get in Touch (split contact section) ---------------- */ .get-in-touch{background:var(--navy);padding:72px 48px} .get-in-touch-inner{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .get-in-touch-info h2{margin:0 0 12px;font-size:32px;font-weight:800;letter-spacing:-.015em;color:#fff} .get-in-touch-info > p{margin:0 0 24px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72)} .get-in-touch-contact{display:flex;flex-direction:column;gap:10px;margin:0 0 24px} .get-in-touch-contact a{font-size:15px;font-weight:600;color:#fff} .get-in-touch-contact a:hover{color:var(--orange)} .get-in-touch-address{margin:0 0 24px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.55)} .get-in-touch-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .get-in-touch-bullets li{position:relative;padding-left:20px;font-size:14.5px;color:rgba(255,255,255,.85)} .get-in-touch-bullets li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--orange)} .get-in-touch-form-card{background:#fff;border-radius:14px;padding:32px;box-shadow:0 20px 50px rgba(0,0,0,.25)} .get-in-touch-form-card h3{margin:0 0 6px;font-size:20px;font-weight:800;color:var(--navy)} .get-in-touch-form-card > p{margin:0 0 20px;font-size:14px;line-height:1.5;color:var(--body-text)} .get-in-touch-form-card .newsletter-form{flex-direction:column;align-items:stretch} /* !important: without it this ties in specificity with the base dark .newsletter-form input[type=X] rule further down this file (both resolve to 2 class/attribute selectors + 1 element), and since that rule comes later in source order it wins the tie — silently overriding this light variant with white-on-near-white text, which is why the Get in Touch card's inputs briefly looked "unstyled" (the typed/placeholder text was effectively invisible against the white card). Forcing it here removes the ambiguity instead of relying on rule ordering. */ .get-in-touch-form-card .newsletter-form input{width:100% !important;background:var(--panel) !important;border:1px solid var(--border) !important;color:var(--slate) !important} .get-in-touch-form-card .newsletter-form input::placeholder{color:var(--muted) !important} .get-in-touch-form-card .newsletter-form input:focus-visible{outline:2px solid var(--navy);outline-offset:1px} .get-in-touch-form-card .field-error{color:var(--error-red)} @media (max-width:860px){ .get-in-touch-inner{grid-template-columns:1fr} } /* ---------------- Footer ---------------- */ .site-footer{background:var(--navy-deep);padding:56px 48px 32px;color:rgba(255,255,255,.7)} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;margin-bottom:44px} .footer-logo{height:60px;width:auto;display:block;margin-bottom:16px} .footer-about p{margin:0 0 20px;font-size:14.5px;line-height:1.6;max-width:340px} .footer-about address{font-style:normal;font-size:14.5px;line-height:1.8} .footer-about address a{display:inline-flex;align-items:center;gap:7px} .footer-about address a:hover{color:var(--orange)} .footer-phone{color:#fff;font-weight:700} .footer-nav{display:flex;flex-direction:column;gap:10px;font-size:14.5px} .footer-heading{margin:0 0 6px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)} .footer-nav a:hover, .footer-badges + a:hover{color:var(--orange)} .footer-badges{display:flex;flex-wrap:wrap;gap:8px} .badge{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:6px 10px} .newsletter{border-top:1px solid rgba(255,255,255,.1);padding:26px 0;margin-bottom:2px} .newsletter-row{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap} .newsletter-copy h3{margin:0 0 4px;font-size:16.5px;font-weight:700;color:#fff} .newsletter-copy p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.6);max-width:440px} .newsletter-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start} .newsletter-field{display:flex;flex-direction:column;gap:4px} .newsletter-form input[type=email],.newsletter-form input[type=text],.newsletter-form input[type=tel]{ font-family:inherit;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2); border-radius:9px;padding:12px 15px;font-size:14px;color:#fff;outline:none; } .newsletter-form input[type=email]{width:260px} .newsletter-form input[type=text]{width:170px} .newsletter-form input[type=tel]{width:150px} .newsletter-form input[type=email]:focus-visible,.newsletter-form input[type=text]:focus-visible,.newsletter-form input[type=tel]:focus-visible{outline:2px solid #fff;outline-offset:1px} .newsletter-form input[type=email].has-error,.newsletter-form input[type=text].has-error,.newsletter-form input[type=tel].has-error{border-color:#F26666} /* Forced ID-based override — exact values copied from #callbackEmail's live computed style, !important to remove any possible doubt about a cascade conflict. The [type=X] rule above already produces these identical values; this is a defensive belt-and-suspenders duplicate, not a different rule. */ #callbackName, #callbackPhone, #callbackEmail{ background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.2) !important; color:#fff !important; border-radius:9px !important; padding:12px 15px !important; } #callbackName::placeholder, #callbackPhone::placeholder, #callbackEmail::placeholder{ color:rgba(255,255,255,.7) !important; } .newsletter-form button{font-family:inherit;background:var(--orange);border:none;color:#101C2B;font-size:14px;font-weight:700;padding:12px 24px;border-radius:9px;cursor:pointer} .newsletter-form button:hover{background:var(--orange-hover)} .field-error{font-size:12px;color:#F29C9C;min-height:16px} .newsletter .field-error{margin:10px 0 0} .newsletter-note{margin:12px 0 0;font-size:12px;color:rgba(255,255,255,.4)} .newsletter-note a{text-decoration:underline} .newsletter-note a:hover{color:var(--orange)} .newsletter-success{font-size:13.5px;font-weight:600;color:#8FE3A6;margin:0} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);padding-top:24px;font-size:13px;color:rgba(255,255,255,.45)} .footer-legal-links{display:flex;gap:20px;flex-wrap:wrap} .footer-legal-links a:hover{color:var(--orange)} .footer-disclaimer{margin:16px 0 0;font-size:11.5px;line-height:1.65;color:rgba(255,255,255,.55);max-width:1000px} /* ---------------- Cookie consent ---------------- */ .cookie-banner{ position:fixed;left:24px;right:100px;bottom:24px;z-index:1000; display:flex;align-items:center;flex-wrap:wrap;gap:18px; background:var(--navy);border:1px solid rgba(255,255,255,.12);border-radius:14px; padding:18px 24px;box-shadow:0 16px 40px rgba(0,0,0,.35);animation:quizIn .3s ease; } .cookie-banner[hidden]{display:none} .cookie-banner p{margin:0;flex:1;min-width:280px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.85)} .cookie-banner a{color:var(--orange);text-decoration:underline} .cookie-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .btn-ghost{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:13.5px;font-weight:600;padding:11px 18px;border-radius:9px;cursor:pointer} .btn-ghost:hover{border-color:#fff} .btn-accept{background:var(--orange);border:none;color:#101C2B;font-size:13.5px;font-weight:700;padding:12px 22px;border-radius:9px;cursor:pointer} .btn-accept:hover{background:var(--orange-hover)} .modal-overlay{position:fixed;inset:0;z-index:1100;background:rgba(8,20,34,.6);display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto} .modal-overlay[hidden]{display:none} .cookie-modal{width:460px;max-width:100%;background:#fff;border-radius:14px;padding:30px 32px;box-shadow:0 24px 60px rgba(0,0,0,.4);animation:quizIn .25s ease} .cookie-modal h3{margin:0 0 6px;font-size:20px;font-weight:800;color:var(--navy)} .cookie-modal > p{margin:0 0 22px;font-size:13.5px;line-height:1.55;color:var(--body-text)} .cookie-rows{display:flex;flex-direction:column;gap:14px;margin-bottom:24px} .cookie-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px 16px} .cookie-row-title{font-size:14.5px;font-weight:700;color:var(--navy)} .cookie-row-desc{font-size:12.5px;color:var(--muted)} .toggle{flex:none;position:relative;width:44px;height:24px;border-radius:999px;border:none;cursor:pointer;background:#C9D4E0;padding:0} .toggle.locked{background:var(--muted);opacity:.7;cursor:default} .toggle-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s ease} .toggle[aria-pressed="true"]{background:var(--orange)} .toggle[aria-pressed="true"] .toggle-knob{left:22px} .toggle.locked .toggle-knob{left:22px} .cookie-modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px} .btn-secondary{font-family:inherit;background:none;border:1px solid #C9D4E0;color:var(--slate);font-size:13.5px;font-weight:600;padding:11px 18px;border-radius:9px;cursor:pointer} .btn-secondary:hover{border-color:var(--navy)} /* ---------------- Course/site-wide enquiry popup ---------------- */ .csp-popup-overlay{ position:fixed; top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,0.6); z-index:9999; display:none; align-items:center; justify-content:center; overflow-y:auto; padding:24px; } .csp-popup-overlay.active{ display:flex; } .csp-popup-card{ background:#ffffff; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,0.3); padding:32px; max-width:420px; width:90%; position:relative; } .csp-popup-close{ position:absolute; top:12px;right:12px; background:none; border:none; font-size:24px; cursor:pointer; color:#333; } .csp-popup-close:hover{color:var(--navy)} .csp-popup-card h3{margin:0 0 8px;font-size:22px;font-weight:800;color:var(--navy);padding-right:20px} .csp-popup-card > p{margin:0 0 22px;font-size:14px;line-height:1.55;color:var(--body-text)} .csp-popup-card input{ display:block; width:100%; margin-bottom:12px; padding:12px; border:1px solid #ccc; border-radius:8px; font-family:inherit; font-size:14px; color:var(--slate); outline:none; box-sizing:border-box; } .csp-popup-card input:focus-visible{outline:2px solid var(--navy);outline-offset:1px} .csp-popup-card input.has-error{border-color:var(--error-red)} .csp-popup-card .field-error{color:var(--error-red)} .csp-popup-card .btn-amber{font-family:inherit;background:var(--orange);border:none;color:#101C2B;font-size:14.5px;font-weight:700;padding:13px;border-radius:9px;cursor:pointer;width:100%;margin-top:2px} .csp-popup-card .btn-amber:hover{background:var(--orange-hover)} .csp-popup-terms{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center} .csp-popup-terms a{color:var(--navy);text-decoration:underline} .csp-popup-success strong{display:block;margin-bottom:6px;font-size:16px;color:var(--navy)} .csp-popup-success p{margin:0;font-size:13.5px;color:var(--body-text)} /* ---------------- Chat widget & WhatsApp ---------------- */ .chat-fab{ position:fixed;right:24px;bottom:88px;z-index:980;width:52px;height:52px;border-radius:50%; background:var(--navy);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.28);cursor:pointer; } .chat-fab:hover{background:var(--navy-mid)} .chat-panel{ position:fixed;right:24px;bottom:152px;z-index:980;width:340px;max-width:calc(100vw - 48px);background:#fff; border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.35);overflow:hidden;animation:quizIn .25s ease; } .chat-panel[hidden]{display:none} .chat-head{background:var(--navy);padding:16px 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .chat-title{font-size:15px;font-weight:700;color:#fff} .chat-subtitle{margin-top:3px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.65)} .chat-close{font-family:inherit;flex:none;background:none;border:none;color:rgba(255,255,255,.6);font-size:18px;line-height:1;cursor:pointer;padding:2px} .chat-close:hover{color:#fff} .chat-success{padding:28px 20px;text-align:center} .chat-success strong{display:block;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:6px} .chat-success p{margin:0;font-size:13.5px;line-height:1.55;color:var(--body-text)} .chat-form{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px} .chat-form[hidden]{display:none} .chat-form input,.chat-form textarea{ font-family:inherit;background:var(--panel);border:1px solid var(--border);border-radius:9px;padding:11px 13px; font-size:14px;color:var(--slate);outline:none;resize:none; } .chat-form input:focus-visible,.chat-form textarea:focus-visible{outline:2px solid var(--navy);outline-offset:1px} .chat-form input.has-error,.chat-form textarea.has-error{border-color:var(--error-red)} .chat-form button{font-family:inherit;background:var(--orange);border:none;color:#101C2B;font-size:14px;font-weight:700;padding:12px;border-radius:9px;cursor:pointer} .chat-form button:hover{background:var(--orange-hover)} /* .field-error's base colour (#F29C9C) is tuned for the newsletter form's dark navy background — on this white chat panel it fails contrast, so scope a darker override here. */ .chat-form .field-error{color:var(--error-red)} .whatsapp-fab{ position:fixed;right:24px;bottom:24px;z-index:990;width:52px;height:52px;border-radius:50%; background:var(--whatsapp);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.28); } .whatsapp-fab:hover{background:var(--whatsapp-hover)} /* ---------------- Legal / info pages ---------------- */ .legal-page-header{background:#fff;border-bottom:1px solid var(--border);padding:64px 48px 44px} .legal-page-header .container{max-width:820px;margin:0 auto;padding:0} .legal-eyebrow{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep)} .legal-page-header h1{margin:0 0 8px;font-size:38px;font-weight:800;letter-spacing:-.015em;color:var(--navy)} .legal-updated{margin:0;font-size:14px;color:var(--muted);font-style:italic} .legal-page-main{padding:56px 48px 88px;background:var(--panel)} .legal-content{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:14px;padding:48px 56px;box-shadow:0 2px 8px rgba(11,27,46,.05)} .legal-content h2{margin:40px 0 16px;font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--navy)} .legal-content h2:first-child{margin-top:0} .legal-content h3{margin:28px 0 12px;font-size:18px;font-weight:700;color:var(--navy)} .legal-content p{margin:0 0 16px;font-size:15.5px;line-height:1.7;color:var(--slate-2)} .legal-content ul,.legal-content ol{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:8px} .legal-content li{font-size:15.5px;line-height:1.6;color:var(--slate-2)} .legal-content li > ul,.legal-content li > ol{margin:8px 0 0} .legal-content strong{color:var(--navy);font-weight:700} .legal-content a{color:var(--orange-deep);text-decoration:underline} .legal-content a:hover{color:var(--orange-hover)} .legal-content hr{border:none;border-top:1px solid var(--border);margin:32px 0} .legal-content blockquote{margin:0 0 16px;padding:14px 20px;border-left:3px solid var(--orange);background:var(--panel);border-radius:0 8px 8px 0;color:var(--slate-2);font-size:15px;line-height:1.65} .legal-content blockquote p:last-child{margin-bottom:0} .legal-content table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14px} .legal-content caption{caption-side:top;text-align:left;font-weight:700;color:var(--navy);margin-bottom:8px} .legal-content th,.legal-content td{text-align:left;padding:11px 14px;border:1px solid var(--border);vertical-align:top;line-height:1.5} .legal-content th{background:var(--panel);font-weight:700;color:var(--navy)} .legal-content tr:nth-child(even) td{background:#FAFBFD} /* Highlighted "needs a real value" marker — used on legal pages for [Insert...] placeholders, and reused anywhere else on the site an unconfirmed fact needs to stand out rather than blend in as finished content. */ mark.placeholder{ background:#FFF3B0;color:#5A4A00;font-weight:600;font-style:normal; padding:1px 6px;border-radius:4px;border:1px solid #E8D27A; font-size:0.95em; } /* ---------------- Course pathway pages ---------------- */ .course-hero{background:#fff;border-bottom:1px solid var(--border)} .course-hero-bar{height:8px} .course-hero-bar.green{background:var(--green)} .course-hero-bar.blue{background:var(--blue)} .course-hero-bar.gold{background:var(--gold)} .course-hero-bar.black{background:var(--black-card)} .course-hero-inner{max-width:820px;margin:0 auto;padding:56px 48px 44px} .breadcrumbs{display:block;margin:0 0 18px;font-size:13px;color:var(--muted)} .breadcrumbs a{color:var(--muted)} .breadcrumbs a:hover{color:var(--navy);text-decoration:underline} .breadcrumbs [aria-current="page"]{color:var(--slate);font-weight:600} .breadcrumb-sep{margin:0 8px;color:var(--border)} .course-eyebrow{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .course-eyebrow.green{color:var(--green)} .course-eyebrow.blue{color:var(--blue)} .course-eyebrow.gold{color:var(--gold-text)} .course-eyebrow.black{color:var(--black-card)} .course-hero-inner h1{margin:0 0 14px;font-size:38px;font-weight:800;letter-spacing:-.015em;color:var(--navy)} .course-intro{margin:0;font-size:17px;line-height:1.6;color:var(--body-text);max-width:640px} /* Photo variant — bg_image param on hero_html(). Photo + dark scrim replace the flat colour bar; the accent colour lives on in the eyebrow text instead (see PHOTO_EYEBROW_* in site_template.py). */ .course-hero--photo{position:relative;overflow:hidden;background:var(--navy-deep);border-bottom:none} .course-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center} .course-hero-scrim{position:absolute;inset:0;background:linear-gradient(88deg, rgba(6,16,28,.92) 0%, rgba(6,16,28,.74) 42%, rgba(6,16,28,.38) 78%, rgba(6,16,28,.18) 100%)} .course-hero--photo .course-hero-inner{position:relative} .course-hero--photo .course-hero-inner h1{color:#fff} .course-hero--photo .course-intro{color:rgba(255,255,255,.85)} .course-hero--photo .breadcrumbs{color:rgba(255,255,255,.65)} .course-hero--photo .breadcrumbs a{color:rgba(255,255,255,.65)} .course-hero--photo .breadcrumbs a:hover{color:#fff} .course-hero--photo .breadcrumbs [aria-current="page"]{color:#fff} .course-hero--photo .breadcrumb-sep{color:rgba(255,255,255,.35)} .course-hero-cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px} /* Green Card hero's journey-icon and CTA rows sit under a centered intro sentence, so centering them (rather than the homepage's left-aligned case-study use of .journey-path) reads intentional. Scoped to .course-hero--photo since that's the only place these two classes combine — the homepage's .journey-path lives outside .course-hero--photo. */ .course-hero--photo .journey-path{justify-content:center} .course-hero--photo .course-hero-cta-row{justify-content:center} /* ---------------- Numbered "How It Works" steps ---------------- */ .steps-list{list-style:none;margin:0;padding:0;counter-reset:step;display:flex;flex-direction:column;gap:18px} .steps-list li{display:flex;gap:16px;align-items:flex-start} .steps-list li::before{ counter-increment:step;content:counter(step);flex:none;width:32px;height:32px;border-radius:50%; background:var(--navy);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center; } .steps-list li p{margin:5px 0 0;font-size:14.5px;line-height:1.55;color:var(--body-text)} /* ---------------- Tiered pricing comparison (Green Card page) ---------------- */ .pricing-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1180px;margin:0 auto} .pricing-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:28px 24px;display:flex;flex-direction:column;position:relative} .pricing-card.highlighted{background:var(--navy);border-color:var(--navy);box-shadow:0 20px 50px rgba(11,27,46,.28)} .pricing-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--orange);color:#101C2B;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:6px 16px;border-radius:999px;white-space:nowrap} .pricing-card h3{margin:0 0 10px;font-size:18px;font-weight:800;color:var(--navy)} .pricing-card.highlighted h3{color:#fff} .pricing-price{font-size:28px;font-weight:800;color:var(--navy);margin:0} .pricing-card.highlighted .pricing-price{color:#fff} .pricing-price-alt{font-size:14px;font-weight:700;color:var(--body-text);margin:2px 0 0} .pricing-card.highlighted .pricing-price-alt{color:rgba(255,255,255,.75)} .pricing-subtext{font-size:13.5px;color:var(--muted);margin:10px 0 22px} .pricing-card.highlighted .pricing-subtext{color:rgba(255,255,255,.65)} .pricing-features{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1} .pricing-features li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.4;color:var(--slate)} .pricing-card.highlighted .pricing-features li{color:rgba(255,255,255,.92)} .pricing-features li.excluded{color:var(--muted);text-decoration:line-through} .pricing-features li .feat-icon{flex:none;font-weight:800;margin-top:1px} .pricing-features li.excluded .feat-icon{color:var(--muted)} .pricing-card .btn-buy-course,.pricing-card .btn-final{width:100%;text-align:center;justify-content:center} /* Plain-link Buy buttons (buy_button_with_icons_html() in individual_page.py) replaced the embedded widget — the widget rendered its own duplicate product name/price on top of what the page already shows above it. Reuses .btn-buy-course's existing look so it matches every other button on the site. */ .payment-icons-row{display:flex;gap:7px;align-items:center;justify-content:center;margin-top:8px;opacity:.55} .payment-icons-row svg{width:18px;height:18px;flex:none} .pricing-card.highlighted .payment-icons-row{filter:invert(1) brightness(1.8)} /* Full Package tile's two-tab toggle (2 Instalments / Pay in Full) — CSS-only radio+label tabs, no JS. Selectors use classes (not the per-page-unique ids/names), so this one shared stylesheet rule drives every page's toggle regardless of its actual id/name values. */ .fp-toggle{position:relative;margin-top:4px} .fp-toggle-radio{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .fp-tabs{display:flex;gap:8px;margin:0 0 16px} .fp-tab{flex:1;text-align:center;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;background:rgba(255,255,255,.09);color:rgba(255,255,255,.7);transition:background .15s ease,color .15s ease;user-select:none} .fp-panel{display:none} .fp-radio-1:checked ~ .fp-tabs .fp-tab-1{background:#fff;color:var(--navy)} .fp-radio-2:checked ~ .fp-tabs .fp-tab-2{background:#fff;color:var(--navy)} .fp-radio-1:checked ~ .fp-panel-1{display:block} .fp-radio-2:checked ~ .fp-panel-2{display:block} .cpcs-scheme .fp-tab{background:rgba(255,255,255,.06)} .cpcs-scheme .fp-radio-1:checked ~ .fp-tabs .fp-tab-1, .cpcs-scheme .fp-radio-2:checked ~ .fp-tabs .fp-tab-2{background:#F5C400;color:#1C1C1E} /* SSSTS/SMSTS Stripe-primary pricing panel (stripe_short_course_pricing_html in scripts/individual_page.py) — each price tier gets either a real Buy link (Online) or a plain Enquire Now button (Classroom, per the A3 "split by scheduling risk" decision), both styled identically. */ .price-row-stripe{display:flex;gap:36px;flex-wrap:wrap;margin:4px 0 22px} .price-item-stripe{display:flex;flex-direction:column;gap:3px;min-width:200px;flex:1} .price-item-stripe .btn-buy-course{width:100%;margin-top:10px;text-align:center;justify-content:center} .btn-plain{background:none;border:none;padding:0;font:inherit;cursor:pointer} /* ---------------- CPCS/NPORS pricing-tile variant (25 Jul 2026 pricing-tile copy doc, "Visual identity" section) ---------------- Deliberately distinct from the CSCS four-tile pattern above (graphite/ amber/steel-grey vs. navy/gold, sharp outlined badge vs. rounded filled, hazard-stripe card border, "plate"-boxed Full Package price) so a plant operator and a CSCS trades learner never mistake which card scheme's page they're on — this matters most for the two pages priced/levelled identically to their CSCS counterparts (Plant Operations NVQ L2 vs Blue Card, both £749 Level 2). Scoped under .cpcs-scheme so none of it leaks into the 8 CSCS four-tile pages. */ .cpcs-scheme .section-title{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap} .cpcs-scheme .pricing-card{border-color:#4A5A67;padding-top:34px;padding-bottom:34px} .cpcs-scheme .pricing-card.highlighted{background:#1C1C1E;border-color:#1C1C1E;box-shadow:0 20px 50px rgba(0,0,0,.35)} /* Solid background (not outline-only — illegible against the page behind it) and pushed further up so it clears the hazard-stripe top border (::before, 0 to 6px) instead of overlapping it. */ .cpcs-scheme .pricing-badge{background:#F5C400;color:#1C1C1E;border:none;border-radius:3px;top:-30px} .cpcs-scheme .pricing-card .feat-icon{color:#B8860B} .cpcs-scheme .pricing-card.highlighted .feat-icon{color:#F5C400} .cpcs-scheme .price-plate{display:inline-block;border:2px solid #4A5A67;border-radius:4px;padding:6px 16px;margin:0 0 2px} .cpcs-scheme .pricing-card.highlighted .price-plate{border-color:#F5C400} .cpcs-scheme .pricing-card::before,.cpcs-scheme .pricing-card::after{ content:"";position:absolute;left:0;right:0;height:6px; background:repeating-linear-gradient(45deg,#F5C400 0,#F5C400 8px,#1C1C1E 8px,#1C1C1E 16px); } .cpcs-scheme .pricing-card::before{top:0;border-radius:13px 13px 0 0} .cpcs-scheme .pricing-card::after{bottom:0;border-radius:0 0 13px 13px} @media (max-width:1024px){ .pricing-tiers{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .pricing-tiers{grid-template-columns:1fr} } /* Scroll-entrance reveal + hover lift for the pricing cards (js/pricing-reveal.js toggles .is-visible via IntersectionObserver). Entrance animation is scoped inside prefers-reduced-motion:no-preference — outside it [data-observe] is never styled hidden, so reduced-motion visitors (and the