/* ============================================================ CPD Accreditation - site stylesheet Colour authority: badge navy + translucent lilac bands. Poster violet palette intentionally not used. ============================================================ */ :root{ --navy:#211A5E; /* core brand - sampled from badge */ --navy-deep:#171243; --lilac:#9A94D0; --lilac-strong:#7C74C4; --lilac-tint:#EFEEF8; --lilac-band:rgba(154,148,208,.38); --teal:#00D2C4; /* hero image-panel accent */ --teal-frame:rgba(0,210,196,.5); --ink:#1E2130; --ink-2:#4B4F63; --ink-3:#787D95; --paper:#FFFFFF; --paper-2:#F7F7FB; --surface:#FFFFFF; /* cards/header/tables — themed below (distinct from --paper page bg) */ --line:#E2E1EF; --ok:#0A7A6E; /* positive/pass = deep brand-family teal (white text passes AA; distinct from bright action teal) */ --ok-soft:#DEF4F1; --warn:#A3690A; --radius:0; --maxw:1120px; } /* ---------- accessibility colour themes (data-theme on ) ---------- Same model as the assessment tool: dark LIGHTENS --navy (it is both heading/link text AND the brand bands) so all of it stays legible; --surface carries card/header whites. */ :root[data-theme="dark"]{ --navy:#6a61c4; --navy-deep:#575099; --lilac:#9A94D0; --lilac-strong:#a49dde; --lilac-tint:#282641; --lilac-band:rgba(120,113,190,.30); --teal:#00D2C4; --ink:#e9e9f2; --ink-2:#b9b9cc; --ink-3:#8f8fa6; --paper:#14141c; --paper-2:#1a1a24; --surface:#1e1e29; --line:#353543; --ok:#2bb89f; --ok-soft:#123329; --warn:#e0a53a; } :root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3{color:#cfc9f5;} /* keep the big brand bands genuinely dark (the lightened --navy is for text/small accents, not full-bleed hero backgrounds — those would read as a bright purple "day" band) */ :root[data-theme="dark"] .hero,:root[data-theme="dark"] .page-hero, :root[data-theme="dark"] .navy-section,:root[data-theme="dark"] .topbar{background:#171233;} :root[data-theme="dark"] .compare thead th,:root[data-theme="dark"] .reg-table th{background:#241d47;} :root[data-theme="contrast"]{ --navy:#0a0819; --navy-deep:#000; --lilac-tint:#eeedff; --ink:#000; --ink-2:#000; --ink-3:#141414; --paper:#fff; --paper-2:#fff; --surface:#fff; --line:#000; --ok:#005a3a; --ok-soft:#dff5ee; --warn:#7a4a00; } :root[data-theme="contrast"] .card,:root[data-theme="contrast"] .compare,:root[data-theme="contrast"] input, :root[data-theme="contrast"] .reg-table,:root[data-theme="contrast"] header.site{border-color:#000 !important;} :root[data-theme="warm"]{ --lilac-tint:#efe6d4; --ink:#3a2f1e; --ink-2:#5a4a33; --ink-3:#7a6a50; --paper:#f6ecd9; --paper-2:#f0e6d0; --surface:#fbf3e2; --line:#e2d3b0; --ok-soft:#e2f0e0; } :root[data-a11y-motion="reduce"] *,:root[data-a11y-motion="reduce"] *::before,:root[data-a11y-motion="reduce"] *::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important;} *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ /* Space Grotesk: angular, boxy counters - matches the square frame device. Poppins stays loaded only for the recreated logo/badge SVG marks. */ font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); line-height:1.6; font-size:16px; } img,svg{display:block;max-width:100%;} a{color:var(--navy);} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;} h1,h2,h3{line-height:1.12;letter-spacing:-0.02em;font-weight:700;} h2{font-size:clamp(26px,3.6vw,38px);color:var(--navy);} h3{font-size:19px;color:var(--navy);} .kicker{ display:inline-block;font-size:12px;font-weight:700;letter-spacing:2.2px; text-transform:uppercase;color:var(--lilac-strong);margin-bottom:12px; } .lede{font-size:17.5px;color:var(--ink-2);max-width:62ch;} section{padding:72px 0;} /* ---------- buttons ---------- */ .btn{ display:inline-block;font-weight:600;font-size:15.5px;text-decoration:none; border-radius:0;padding:13px 26px;transition:transform .12s ease, box-shadow .12s ease; } .btn:hover{transform:translateY(-1px);} .btn-primary{background:var(--navy);color:#fff;box-shadow:0 6px 18px rgba(33,26,94,.28);} .btn-primary:hover{background:var(--navy-deep);} .btn-ghost{border:2px solid var(--navy);color:var(--navy);padding:11px 24px;} .btn-light{background:var(--surface);color:var(--navy);} .btn-lilac{background:var(--lilac);color:var(--navy-deep);} /* ---------- header / nav ---------- */ .topbar{background:var(--navy-deep);color:#CBC8E8;font-size:13px;padding:8px 0;} .topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;} .topbar a{color:#fff;text-decoration:none;font-weight:600;} .topbar a:hover{text-decoration:underline;} header.site{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;} header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px;} .logo{display:flex;align-items:center;gap:12px;text-decoration:none;} .logo svg{flex:none;} @media(max-width:640px){header.site .logo .wordmark small{display:none;}} .logo .wordmark{font-weight:700;color:var(--navy);font-size:15px;line-height:1.2;letter-spacing:-0.01em;} .logo .wordmark small{display:block;font-size:11px;font-weight:500;color:var(--ink-3);letter-spacing:.4px;} nav.main{display:flex;align-items:center;gap:26px;} nav.main a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:15px;} nav.main a:hover,nav.main a.active{color:var(--navy);} nav.main a.active{font-weight:700;} nav.main .btn{padding:10px 20px;} /* header Apply: teal, flat, navy text (WCAG 2.2 AA compliant, echoes badge) */ nav.main .btn-primary{background:var(--teal);color:var(--navy);box-shadow:none;} nav.main .btn-primary:hover{background:#00AFA3;color:var(--navy);} @media(max-width:860px){ nav.main{gap:16px;flex-wrap:wrap;justify-content:flex-end;} nav.main a{font-size:13.5px;} } /* ---------- hero: split panel with framed image ---------- */ /* Two full-bleed panels: navy content on the left, image on the right. A thin diagonal lilac "slit" divides them; a translucent square frames the image. Everything is sized against the panel (min()/clamp), so it holds together from small phones to wide desktops. */ .hero{ background:var(--navy);color:#fff;position:relative;overflow:hidden;isolation:isolate; display:grid;grid-template-columns:1fr 1fr;align-items:stretch; padding:0; /* override global section padding so the image fills top-to-bottom */ } /* left: content, aligned to the site container's left edge */ .hero-content{ display:flex;flex-direction:column;justify-content:center; /* text line-length is governed by the children (lede max-width:52ch), not an outer cap — so the container-alignment left gutter can't crush the column and balloon the hero height on wide screens. */ padding:clamp(40px,4.5vw,60px) clamp(28px,4vw,56px) clamp(44px,4.5vw,64px) max(24px, calc((100vw - var(--maxw)) / 2)); } .hero-content .kicker{color:var(--lilac);margin-bottom:16px;} .hero h1{ font-size:clamp(40px,5.4vw,68px);font-weight:700;letter-spacing:-0.03em;line-height:1.03; margin-bottom:20px; } .hero h1 .accent{color:var(--lilac);} .hero-content p{ font-size:clamp(16px,1.4vw,18.5px);color:#D9D6F0;max-width:52ch;margin-bottom:32px; } .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;} /* right: image panel. Lilac background shows through the diagonal clip as the slit. */ .hero-visual{ position:relative;min-height:420px;overflow:hidden; background:var(--teal); clip-path:polygon(7% 0, 100% 0, 100% 100%, 0 100%); } .hero-img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1; /* inset 5px from the panel's diagonal edge to reveal the lilac slit */ clip-path:polygon(calc(7% + 5px) 0, 100% 0, 100% 100%, 5px 100%); } /* navy tint for cohesion and text-safe contrast toward the seam */ .hero-visual::before{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(100deg, rgba(23,18,67,.55) 0%, rgba(23,18,67,0) 55%); } /* the translucent square window: flush to top, right and bottom of the image panel; its side equals the panel height, so it's a true square and whatever image sits to its left is the natural remainder. */ .hero-frame{ position:absolute;top:0;right:0;z-index:3; height:100%;aspect-ratio:1;width:auto;max-width:100%;box-sizing:border-box; border:clamp(30px,4.5vw,60px) solid var(--teal-frame); pointer-events:none; } /* subpage variant: same device, calibrated for longer headlines and no CTA row */ .hero-sub h1{font-size:clamp(32px,4.4vw,52px);} .hero-sub .hero-content p{margin-bottom:0;} .hero-sub .hero-visual{min-height:340px;} @media(max-width:860px){ .hero{grid-template-columns:1fr;} .hero-content{max-width:none;padding:48px 24px 40px; padding-left:max(24px, calc((100vw - var(--maxw)) / 2));} /* slit becomes a horizontal lilac accent between the stacked panels */ .hero-visual{clip-path:none;min-height:0;height:clamp(220px,44vw,300px); border-top:5px solid var(--teal);} .hero-img{clip-path:none;} .hero-visual::before{background:linear-gradient(180deg, rgba(23,18,67,.45) 0%, rgba(23,18,67,0) 60%);} .hero-frame{border-width:clamp(24px,7vw,42px);} } /* ---------- showcase: square image left, text right ---------- The visual column IS a square: the image is cropped to it, the lilac wash is confined to it (clipped box-shadow cast by the clean inner window), and the window sits with equal margins on all four sides. No leftover image, no wash outside the square. The content column takes all remaining width. */ .showcase{ display:flex;align-items:stretch; padding:0;background:var(--surface); } .showcase-visual{ flex:0 0 auto;aspect-ratio:1;min-height:480px; position:relative;overflow:hidden;background:var(--lilac); } .showcase-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .showcase-window{ /* inset clean window; equal margins all round inside the square panel. The wash outside it is its clipped 200vmax box-shadow. */ position:absolute;z-index:2; inset:clamp(24px,3.5vw,48px); box-shadow:0 0 0 200vmax rgba(154,148,208,.72); pointer-events:none; } .showcase-content{ flex:1;min-width:0; display:flex;flex-direction:column;justify-content:center; padding:clamp(36px,4vw,52px) max(24px, calc((100vw - var(--maxw)) / 2)) clamp(36px,4vw,52px) clamp(32px,5vw,72px); } .showcase-content .lede{max-width:56ch;} .showcase-items{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;margin-top:30px;} .showcase-items h3{font-size:17px;margin-bottom:5px;} .showcase-items p{font-size:14.5px;color:var(--ink-2);} @media(max-width:860px){ .showcase{flex-direction:column;} /* square image block on top, then the text; wash band twice as thick */ .showcase-visual{width:100%;aspect-ratio:1;min-height:0;height:auto;} .showcase-window{inset:clamp(48px,7vw,96px);} .showcase-content{padding:40px 24px 48px; padding-left:max(24px, calc((100vw - var(--maxw)) / 2));} } @media(max-width:600px){ .showcase-items{grid-template-columns:1fr;gap:22px;} } /* ---------- trust strip ---------- */ .trust-strip{background:var(--navy-deep);color:#fff;padding:22px 0;} .trust-strip ul{ list-style:none;display:flex;flex-wrap:wrap;gap:10px 36px;justify-content:center; font-size:14px;font-weight:600;letter-spacing:.2px; } .trust-strip li{display:flex;align-items:center;gap:9px;color:#DDDBF2;} .trust-strip .tick{ width:19px;height:19px;border-radius:0;background:var(--teal);color:var(--navy-deep); display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none; } /* ---------- cards ---------- */ .grid{display:grid;gap:20px;} .grid.cols-3{grid-template-columns:repeat(3,1fr);} .grid.cols-2{grid-template-columns:repeat(2,1fr);} @media(max-width:860px){.grid.cols-3{grid-template-columns:1fr 1fr;}} @media(max-width:600px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr;}} .card{ background:var(--surface);border:none;border-radius:var(--radius); padding:26px 26px 24px;position:relative;overflow:hidden; } /* the card's edge IS the hero-square device: a thick translucent teal inset frame, always on; it darkens on hover. */ .card::after{ content:"";position:absolute;inset:0;pointer-events:none; border:8px solid var(--teal-frame); transition:border-color .15s ease; } .card:hover::after{border-color:rgba(0,146,137,.75);} .card .icon{ width:46px;height:46px;border-radius:0;background:var(--lilac-tint); display:flex;align-items:center;justify-content:center;margin-bottom:16px; color:var(--navy);font-weight:700;font-size:18px; } .card h3{margin-bottom:8px;} .card p{font-size:14.5px;color:var(--ink-2);} .card .tag{font-size:12px;font-weight:700;color:var(--lilac-strong);letter-spacing:1px;text-transform:uppercase;} /* ---------- framework-at-a-glance: dark section, lilac frame around white panel ---------- */ .glance{background:var(--navy-deep);padding:0 clamp(20px,4vw,56px);} .glance-panel{ max-width:var(--maxw);margin:0 auto;background:var(--surface); /* same clamp as the hero square-frame device, so the two read as one family */ border:clamp(30px,4.5vw,60px) solid var(--lilac); padding:clamp(40px,6vw,64px) clamp(28px,5vw,64px); } .glance-grid{ list-style:none;counter-reset:glance;display:grid;grid-template-columns:1fr 1fr; column-gap:56px;row-gap:36px;margin-bottom:32px; } .glance-grid li{ counter-increment:glance;display:grid; grid-template-columns:26px 1fr;column-gap:14px;align-items:center; } .glance-grid li::before{ content:counter(glance);grid-column:1;grid-row:1;align-self:center; display:flex;align-items:center;justify-content:center; width:26px;height:26px;background:var(--teal);color:var(--navy); font-weight:700;font-size:13px; } .glance-grid h3{grid-column:2;grid-row:1;font-size:17px;} .glance-grid p{grid-column:1/-1;grid-row:2;margin-top:10px;font-size:14.5px;color:var(--ink-2);} @media(max-width:600px){.glance-grid{grid-template-columns:1fr;row-gap:28px;}} /* ---------- section shells ---------- */ .section-head{margin-bottom:40px;max-width:70ch;} .alt{background:var(--paper-2);} .navy-section{background:var(--navy);color:#fff;position:relative;overflow:hidden;} .navy-section h2{color:#fff;} .navy-section .lede{color:#D9D6F0;} .navy-section .band{ position:absolute;left:-5%;width:110%;height:90px;background:var(--lilac-band); transform:rotate(-4deg);pointer-events:none; } /* ---------- comparison table ---------- */ .compare{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--radius);overflow:hidden; box-shadow:0 2px 14px rgba(33,26,94,.07);font-size:14.5px;} .compare th,.compare td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);} .compare thead th{background:var(--navy);color:#fff;font-size:13px;letter-spacing:.8px;text-transform:uppercase;} .compare tbody tr:last-child td{border-bottom:0;} .compare td.yes{color:var(--ok);font-weight:700;} .compare td.no{color:var(--ink-3);} .compare td:first-child{font-weight:600;color:var(--ink);} /* ---------- process timeline ---------- */ .steps{list-style:none;counter-reset:step;display:grid;gap:0;} .steps li{ counter-increment:step;display:grid;grid-template-columns:56px 1fr;gap:18px; padding:20px 0;border-bottom:1px dashed var(--line);align-items:start; } .steps li:last-child{border-bottom:0;} .steps li::before{ content:counter(step);width:42px;height:42px;border-radius:0; background:var(--navy);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center; font-size:17px;margin-top:2px; } .steps h3{font-size:16.5px;margin-bottom:3px;} .steps p{font-size:14.5px;color:var(--ink-2);} /* ---------- stats band ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;} @media(max-width:700px){.stats{grid-template-columns:1fr 1fr;}} .stat .n{font-size:clamp(34px,4.5vw,52px);font-weight:700;color:var(--teal);letter-spacing:-0.03em;line-height:1;} .stat .l{font-size:13.5px;color:#D9D6F0;margin-top:8px;} /* ---------- verify box ---------- */ .verify-box{ background:var(--surface);border:2px solid var(--navy);border-radius:var(--radius); padding:28px;display:flex;gap:14px;flex-wrap:wrap;align-items:center; } .verify-box input{ flex:1;min-width:220px;border:1.5px solid var(--line);border-radius:0; padding:13px 16px;font-size:15.5px;font-family:inherit; background:var(--surface);color:var(--ink); } .verify-box input:focus{outline:2px solid var(--teal);border-color:var(--teal);} .verify-result{margin-top:14px;font-size:14.5px;display:none;border-radius:0;padding:14px 18px;} .verify-result.ok{display:block;background:var(--ok-soft);color:var(--ok);font-weight:600;} .verify-result.miss{display:block;background:#FBE9E7;color:#A6362D;font-weight:600;} /* ---------- standards list ---------- */ .standards{display:grid;gap:14px;} .standard{ background:var(--surface);border:2px solid var(--line);border-radius:0;padding:20px 24px; display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start; } .standard .no{ font-size:30px;font-weight:700;color:var(--lilac);letter-spacing:-0.03em;line-height:1; border-right:3px solid var(--lilac-tint);padding-right:16px;margin-top:4px; } .standard h3{font-size:17px;margin-bottom:4px;} .standard .std-count{ display:block;font-size:11.5px;font-weight:700;color:var(--ink-3); letter-spacing:1px;text-transform:uppercase;margin-bottom:8px; } .standard p{font-size:14.5px;color:var(--ink-2);} .standard .m{font-size:12px;font-weight:700;color:var(--warn);letter-spacing:.6px;} /* ---------- badge explainer ---------- */ .badge-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;} @media(max-width:700px){.badge-row{grid-template-columns:1fr;}} .badge-tile{ background:var(--lilac-tint);border-radius:var(--radius);padding:30px; display:grid;gap:16px;justify-items:start; } .badge-tile p{font-size:14.5px;color:var(--ink-2);} /* ---------- footer ---------- */ footer{background:var(--navy-deep);color:#B9B5DD;padding:56px 0 34px;font-size:14px;} footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px;} @media(max-width:800px){footer .cols{grid-template-columns:1fr 1fr;}} footer h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:1.4px;margin-bottom:14px;} footer a{color:#DDDBF2;text-decoration:none;display:block;padding:3px 0;} footer a:hover{color:#fff;text-decoration:underline;} footer .baseline{ border-top:1px solid rgba(255,255,255,.14);padding-top:22px; display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px; } footer .url{color:var(--lilac);font-weight:700;letter-spacing:.3px;} /* ---------- page hero (subpages) ---------- */ .page-hero{background:var(--navy);color:#fff;padding:64px 0;position:relative;overflow:hidden;} .page-hero::before{ content:"";position:absolute;left:-5%;width:110%;height:80px;background:var(--lilac-band); transform:rotate(-4deg);top:55%; } .page-hero .wrap{position:relative;z-index:2;} .page-hero h1{font-size:clamp(32px,5vw,52px);font-weight:700;letter-spacing:-0.03em;margin-bottom:12px;} .page-hero p{color:#D9D6F0;font-size:17px;max-width:62ch;} /* ---------- register table ---------- */ .reg-table{width:100%;border-collapse:collapse;background:var(--surface);font-size:14px;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 14px rgba(33,26,94,.07);} .reg-table th{background:var(--navy);color:#fff;text-align:left;padding:13px 16px;font-size:12px;letter-spacing:.8px;text-transform:uppercase;} .reg-table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;} .reg-table tr:last-child td{border-bottom:0;} .dot{display:inline-block;width:9px;height:9px;border-radius:0;margin-right:7px;} .dot.ok{background:var(--ok);} .dot.sus{background:var(--warn);} /* ---------- forms ---------- */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;} @media(max-width:640px){.form-grid{grid-template-columns:1fr;}} .field{display:grid;gap:6px;} .field label{font-size:13.5px;font-weight:600;color:var(--ink);} .field input,.field select,.field textarea{ border:1.5px solid var(--line);border-radius:0;padding:12px 14px;font-size:15px;font-family:inherit; background:var(--surface);color:var(--ink); } .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal);} .field.full{grid-column:1/-1;} .checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;} @media(max-width:640px){.checks{grid-template-columns:1fr;}} .checks label{ display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:0; padding:12px 14px;font-size:14px;font-weight:500;cursor:pointer; } .checks label:has(input:checked){border-color:var(--navy);background:var(--lilac-tint);} .demo-note{ margin-top:18px;font-size:12.5px;color:var(--ink-3); } .callout{ border-left:4px solid var(--navy);background:var(--lilac-tint);border-radius:0; padding:18px 22px;font-size:15px;margin-top:26px; } /* ============================================================ Accessibility widget: floating bottom-right button + slide-in right panel. DOM is injected by js/a11y.js so pages only add one