.acadame, .acadame * { box-sizing:border-box; font-family:Poppins,Arial,Helvetica,sans-serif !important; } body:has(.acadame) { margin:0 !important; padding:0 !important; background:#fff !important; } .acadame { --primary:#0F3069; --secondary:#113575; --blue:#3280FA; --text:#5B6675; --red:#E43348; --red-ink:#D12038; --red-on-navy:#FFC2CB; --light:#F5F7FB; --lb:#DCE8FF; --lr:#FFEEF0; --border:#DCE4EF; --radius:14px; --max:1200px; --gutter:20px; --tab:0px; --sh:0 10px 30px rgba(15,48,105,.08); margin:0 !important; padding:0 !important; color:var(--text) !important; background:#fff !important; font-size:15px !important; line-height:1.6 !important; -webkit-font-smoothing:antialiased; } .acadame h1,.acadame h2,.acadame h3,.acadame h4, .acadame .eyebrow { margin:0 0 8px !important; color:var(--primary) !important; font-weight:700 !important; letter-spacing:-.01em !important; text-transform:none !important; line-height:1.2 !important; } .acadame h1 { font-size:clamp(26px,2.8vw,34px) !important; font-weight:800 !important; line-height:1.15 !important; max-width:28ch; } .acadame h2 { font-size:clamp(20px,2vw,25px) !important; } .acadame h3 { font-size:16px !important; } .acadame h4, .acadame .eyebrow { font-size:12px !important; text-transform:uppercase !important; letter-spacing:.06em !important; color:var(--red-ink) !important; font-weight:700 !important; } /* WCAG AA: brand red #E43348 is 4.32:1 on white – below the 4.5 needed for small text. Fills and borders keep the brand red; text switches to --red-ink (5.3:1). */ .acadame .hero .eyebrow, .acadame .ftr .eyebrow, .acadame .live-head .eyebrow { color:var(--red-on-navy) !important; } .acadame p { margin:0 0 10px !important; font-size:15px !important; line-height:1.6 !important; max-width:70ch; } .acadame ul,.acadame ol { margin:0 !important; padding:0 !important; list-style:none !important; } .acadame a { color:inherit; text-decoration:none !important; } .acadame img { max-width:100% !important; height:auto; display:block; border:0; } .acadame button,.acadame input,.acadame select { font:inherit !important; text-transform:none !important; letter-spacing:normal !important; } .acadame button { background:none; border:0; padding:0; cursor:pointer; color:inherit; } .acadame .wrap { width:min(var(--max),calc(100% - (var(--gutter) + var(--tab)) * 2)); margin-inline:auto; } /* The Get in touch and Accessibility tabs are fixed to the left and right edges. Above 720px they are vertical side tabs, so the content column has to stop short of them or it slides underneath — which it did on any window narrower than about 1300px. Below 720px the tabs become a bottom pill and the extra gutter is given back to the content. */ .acadame .btn, .acadame a.btn, .acadame .ftr a.btn, .acadame button.btn { display:inline-flex !important; padding:9px 18px !important; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:9px 18px; border-radius:9px; border:1.5px solid transparent; font-weight:600 !important; font-size:14px !important; line-height:1.2 !important; transition:.18s; cursor:pointer; text-decoration:none !important; } .acadame .btn-red { background:var(--red-ink) !important; color:#fff !important; border-color:var(--red-ink) !important; } .acadame .btn-red:hover { background:#c92a3d !important; border-color:#c92a3d !important; } .acadame .btn-navy { background:var(--primary) !important; color:#fff !important; border-color:var(--primary) !important; } .acadame .btn-navy:hover { background:#0b2450 !important; } .acadame .btn.btn-line, .acadame a.btn-line, .acadame button.btn-line { background:transparent !important; color:var(--primary,#0F3069) !important; border-color:var(--primary,#0F3069) !important; } .acadame .btn.btn-line:hover, .acadame a.btn-line:hover, .acadame button.btn-line:hover { background:var(--primary,#0F3069) !important; color:#fff !important; } .acadame .btn-ghost { background:rgba(255,255,255,.12) !important; color:#fff !important; border-color:rgba(255,255,255,.3) !important; } .acadame .btn-ghost:hover { background:rgba(255,255,255,.22) !important; } .acadame .sm { font-size:13px !important; } .acadame .muted { color:var(--text); } .acadame .visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .acadame svg { width:1em; height:1em; } /* header */ .acadame .topbar { background:var(--red-ink); color:#fff; font-size:12.5px; text-align:center; padding:6px 0; } .acadame .topbar img { display:inline-block; height:14px; width:auto; vertical-align:-3px; margin:0 2px; } .acadame .topbar img[alt="Klarna"] { height:9px; vertical-align:-1px; margin-left:4px; } .acadame .topbar b { font-weight:600; } .acadame .hdr { position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--border); } /* The header used to carry top:var(--wp-admin--admin-bar--height) so it would clear the WordPress admin bar. On these pages something resolves its position to relative rather than sticky, and on a relatively positioned element that offset is not a sticky stop — it is a straight 32px shove down, which is the band of white that kept appearing above the logo for anyone logged in. Measured on the live home page: top bar ended at 64, header began at 96. It is pinned to 0 and forced sticky. */ .acadame .hdr { position:sticky !important; top:0 !important; } .acadame .hdr-in { display:flex; align-items:center; gap:20px; } .acadame .logo img { height:38px; width:auto; } .acadame .nav { display:flex; gap:2px; margin-left:auto; } .acadame .nav > li { position:relative; } .acadame .nav > li > a, .acadame .nav > li > button { display:inline-flex; flex-shrink:0; align-items:center; gap:5px; padding:10px 11px; border-radius:8px; font-weight:600; font-size:14px; color:var(--primary); white-space:nowrap; } .acadame .nav > li > button svg { width:14px; height:14px; transition:.18s; } .acadame .nav > li:hover > a, .acadame .nav > li:hover > button, .acadame .nav > li.open > button { background:var(--light); } .acadame .nav > li.open > button svg { transform:rotate(180deg); } .acadame .drop { display:none; position:absolute; top:100%; left:0; min-width:300px; max-height:var(--drop-max,70vh); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#B9C6DD transparent; padding:14px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--sh); z-index:70; } .acadame .drop.wide { width:min(640px,calc(100vw - 32px)); display:none; grid-template-columns:1fr 1fr; gap:18px; align-content:start; } .acadame .drop.flip { left:auto; right:0; } .acadame .drop::-webkit-scrollbar, .acadame .results::-webkit-scrollbar { width:8px; } .acadame .drop::-webkit-scrollbar-thumb, .acadame .results::-webkit-scrollbar-thumb { background:#B9C6DD; border-radius:8px; } .acadame .nav > li.open > .drop { display:block; } .acadame .nav > li.open > .drop.wide { display:grid; } .acadame .drop h4 { margin:2px 0 6px !important; } .acadame .drop a { display:flex; justify-content:space-between; gap:10px; padding:6px 8px; border-radius:7px; font-size:13.5px; color:var(--primary); } .acadame .drop a:hover { background:var(--light); } .acadame .drop a small { color:var(--text); font-size:12px; white-space:nowrap; } .acadame .drop .all { margin-top:6px; color:var(--red-ink) !important; font-weight:600; } .acadame .hdr-actions { display:flex; align-items:center; gap:8px; } .acadame .icon-btn { width:40px; height:40px; border-radius:50%; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; color:var(--primary); font-size:18px; } .acadame .icon-btn:hover { background:var(--light); } .acadame .burger { display:none; } .acadame .mobile-nav { display:none; border-top:1px solid var(--border); background:#fff; } .acadame .mobile-nav.open { display:block; } .acadame .mobile-nav a, .acadame .mobile-nav button { display:flex; justify-content:space-between; width:100%; text-align:left; padding:11px 0; border-bottom:1px solid var(--border); font-weight:600; color:var(--primary); font-size:14px; } .acadame .mobile-nav .sub { display:none; padding:4px 0 8px 12px; } .acadame .mobile-nav .sub.open { display:block; } .acadame .mobile-nav .sub a { font-weight:500; font-size:13.5px; border:0; padding:7px 0; } /* hero + finder */ .acadame .hero { background:var(--primary); color:#fff; padding:28px 0 36px; position:relative; overflow:hidden; } .acadame .hero::before { content:""; position:absolute; right:-160px; top:-160px; width:520px; height:520px; border-radius:50%; border:70px solid rgba(255,255,255,.04); pointer-events:none; } .acadame .hero-top { display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:end; margin-bottom:18px; } .acadame .hero h1 { color:#fff !important; margin-bottom:8px !important; } .acadame .hero .lede { color:#D9E3F5; font-size:15px !important; max-width:58ch; margin:0 0 14px !important; } .acadame .hero-cta { display:flex; gap:8px; flex-wrap:wrap; } .acadame .tag { display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; } .acadame .tag i { width:7px; height:7px; border-radius:50%; background:var(--red); } .acadame .trust { display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:flex-end; font-size:13px; color:#D9E3F5; } .acadame .trust b { color:#fff; font-weight:600; } .acadame .trust .stars, .acadame .review .stars { display:inline-flex; gap:1px; vertical-align:-2px; } .acadame .stars svg { width:15px; height:15px; color:#F5A623; fill:currentColor !important; } /* On the navy hero the gold reads muddy – white stars with the score in bold beside them. */ .acadame .hero .stars svg, .acadame .ftr .stars svg, .acadame .c-hero .stars svg { color:#FFFFFF; } .acadame .pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; } .acadame .pillar { display:flex; gap:12px; align-items:flex-start; padding:12px 14px 11px; border-radius:12px; background:#fff; color:var(--primary); border:1px solid var(--border); transition:.18s; } .acadame .pillar:hover { transform:translateY(-2px); box-shadow:var(--sh); border-color:var(--red); } .acadame .pillar.on { border-color:var(--red); box-shadow:0 0 0 3px rgba(228,51,72,.18), var(--sh); } .acadame .pillar.on em::after { content:" ▾"; } .acadame .chip.hint { animation:acadame-nudge 1.2s ease 2; } @keyframes acadame-nudge { 0%,100% { box-shadow:none; } 50% { box-shadow:0 0 0 4px rgba(228,51,72,.25); } } .acadame .pillar .pi { flex:0 0 40px; width:40px; height:40px; border-radius:10px; background:var(--lb); display:grid; place-items:center; font-size:20px; } .acadame .pillar strong { display:block; font-size:14.5px; line-height:1.2; } .acadame .pillar span { display:block; font-size:12.5px; color:var(--text); margin-top:3px; } .acadame .pillar em { display:block; font-style:normal; color:var(--red-ink); font-size:12.5px; font-weight:600; margin-top:6px; } .acadame .finder { scroll-margin-top:calc(var(--wp-admin--admin-bar--height,0px) + 80px); background:#fff; border-radius:var(--radius); box-shadow:var(--sh); color:var(--primary); overflow:hidden; } .acadame .finder-head { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding:16px 18px; border-bottom:1px solid var(--border); background:var(--light); } .acadame .finder-head h2 { font-size:16px !important; margin:0 !important; } .acadame .finder-head p { margin:2px 0 0 !important; font-size:13px !important; } .acadame .search { position:relative; width:min(460px,100%); } .acadame .search input { width:100%; height:44px; padding:0 42px 0 40px; border:1.5px solid var(--border); border-radius:10px; background:#fff; font-size:14px; color:#1a2740; } .acadame .search input::-webkit-search-cancel-button, .acadame .search input::-webkit-search-decoration { -webkit-appearance:none; appearance:none; display:none; } .acadame .search input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(50,128,250,.15); } .acadame .search > svg { position:absolute; left:13px; top:13px; width:18px; height:18px; color:var(--text); } .acadame .search .clear { position:absolute; right:8px; top:8px; width:28px; height:28px; border-radius:50%; display:none; place-items:center; color:var(--text); background:var(--light); font-size:16px; } .acadame .search.has .clear { display:grid; } .acadame .results { display:none; position:absolute; z-index:80; top:50px; left:0; right:0; max-height:var(--drop-max,380px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#B9C6DD transparent; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--sh); padding:6px; } .acadame .search.has .results { display:block; } .acadame .results a { display:flex; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:8px; font-size:13.5px; } .acadame .results a:hover, .acadame .results a.sel { background:var(--light); } .acadame .results a small { color:var(--text); font-size:12px; white-space:nowrap; } .acadame .results .none { padding:10px; font-size:13px; color:var(--text); } .acadame .results .cat { padding:6px 10px 2px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--red-ink); font-weight:600; } .acadame .modes { display:flex; gap:6px; padding:12px 18px 0; } .acadame .mode { padding:8px 14px; border-radius:999px; border:1px solid var(--border); font-size:13px; font-weight:600; color:var(--primary); background:#fff; } .acadame .mode[aria-selected="true"] { background:var(--primary); color:#fff; border-color:var(--primary); } .acadame .panel { display:none; padding:14px 18px 18px; } .acadame .panel.on { display:block; } .acadame .chips { display:flex; flex-wrap:wrap; gap:8px; } .acadame .chip { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--primary); font-size:13px; font-weight:600; transition:.15s; } .acadame .chip svg { width:15px; height:15px; color:var(--red); } .acadame .chip:hover { border-color:var(--red); background:var(--lr); } .acadame .chip[aria-expanded="true"] { background:var(--primary); color:#fff; border-color:var(--primary); } .acadame .chip[aria-expanded="true"] svg { color:#fff; } .acadame .reveal { display:none; margin-top:14px; padding-top:14px; border-top:1px dashed var(--border); } .acadame .reveal.on { display:block; } .acadame .reveal .q { font-size:13px !important; font-weight:600; color:var(--primary); margin-bottom:10px !important; } .acadame .reveal .desc { font-size:13px !important; margin-bottom:10px !important; } .acadame .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .acadame .grp { padding:12px; border:1px solid var(--border); border-radius:10px; background:#fff; } .acadame .grp h3 { font-size:13.5px !important; margin-bottom:6px !important; } .acadame .grp a, .acadame .list a { display:flex; justify-content:space-between; gap:8px; padding:5px 0; font-size:13px; color:var(--primary); border-bottom:1px solid #EEF2F8; } .acadame .grp a:last-child, .acadame .list a:last-child { border:0; } .acadame .grp a:hover, .acadame .list a:hover { color:var(--red-ink); } .acadame .grp a small, .acadame .list a small { color:var(--text); font-size:11.5px; white-space:nowrap; } .acadame .list { display:grid; grid-template-columns:repeat(3,1fr); gap:0 24px; } .acadame .crow { display:flex; align-items:center; gap:8px; border-bottom:1px solid #EEF2F8; } .acadame .crow > a { flex:1; border-bottom:0 !important; } .acadame .crow .dts { margin:0; flex:none; } .acadame .reveal .more { display:inline-block; margin-top:10px; color:var(--red-ink); font-weight:600; font-size:13px; } /* live dates strip in the finder */ .acadame .dts { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--red-ink); font-size:11.5px; font-weight:700; white-space:nowrap; } .acadame .dts::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--red); } .acadame .dts:hover { border-color:var(--red); background:var(--lr); } .acadame .results .row { display:flex; align-items:center; gap:6px; } .acadame .results .row a { flex:1; } .acadame .results .row .dts { margin:0 6px 0 0; } .acadame .live { display:none; margin:0 18px 18px; scroll-margin-top:calc(var(--wp-admin--admin-bar--height,0px) + 86px); border:1px solid var(--border); border-radius:14px; background:#fff; overflow:hidden; box-shadow:var(--sh); } .acadame .live.on { display:block; } .acadame .live-head { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; padding:14px 18px; background:var(--primary); color:#fff; } .acadame .live-head .lh { flex:1; min-width:220px; } .acadame .live-head em { display:block; font-style:normal; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#B9C6DD; margin-bottom:2px; } .acadame .live-head h3 { margin:0 !important; font-size:16px !important; color:#fff !important; } .acadame .live-head h3 a { color:#fff; } .acadame .live-head .btn { min-height:36px; } .acadame .live-head .x { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:18px; display:grid; place-items:center; } .acadame .live-head .x:hover { background:rgba(255,255,255,.26); } .acadame .live-locs { display:flex; flex-wrap:wrap; gap:6px; padding:12px 18px 0; } .acadame .live-locs button { padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--primary); font-size:12.5px; font-weight:600; } .acadame .live-locs button[aria-pressed="true"] { background:var(--primary); color:#fff; border-color:var(--primary); } .acadame .live-locs button:hover { border-color:var(--red); } .acadame .live-list { display:grid; gap:8px; padding:12px 18px 0; } .acadame .live-ev { display:grid; grid-template-columns:auto 1fr auto auto; gap:0 16px; align-items:center; padding:10px 14px 10px 10px; border:1px solid var(--border); border-radius:12px; transition:.15s; } .acadame .live-ev:hover { border-color:var(--red); box-shadow:var(--sh); } .acadame .live-ev .cal { width:52px; text-align:center; background:var(--lb); border-radius:10px; padding:6px 4px; color:var(--primary); line-height:1; } .acadame .live-ev .cal b { display:block; font-size:20px; font-weight:800; } .acadame .live-ev .cal span { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-top:3px; } .acadame .live-ev.online .cal { background:var(--lr); color:var(--red); } .acadame .live-ev strong { display:block; font-size:14px; color:var(--primary); } .acadame .live-ev small { display:block; font-size:12.5px; color:var(--text); margin-top:2px; } .acadame .live-ev .pill { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:700; background:var(--lr); color:var(--red-ink); vertical-align:middle; } .acadame .live-ev .pill.ok { background:#e6f6ec; color:#1b8a44; } .acadame .live-ev .pr { font-weight:800; font-size:15px; color:var(--primary); text-align:right; white-space:nowrap; } .acadame .live-ev .pr small { display:inline; font-weight:500; color:var(--text); font-size:11.5px; } .acadame .live-ev .btn { min-height:34px; padding:6px 14px !important; font-size:13px !important; } .acadame .live-ev.day { grid-template-columns:auto 1fr auto; } .acadame .times { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .acadame .tchip { display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:8px; background:var(--red); color:#fff; font-size:13px; font-weight:700; } .acadame .tchip:hover { background:#c92a3d; } .acadame .tchip i { font-style:normal; font-size:10.5px; font-weight:600; background:rgba(255,255,255,.22); padding:1px 6px; border-radius:999px; } .acadame .tchip.full { background:#fff; color:var(--text); border:1px solid var(--border); } .acadame .live-foot { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; padding:12px 18px 16px; font-size:13px; } .acadame .live-foot a { color:var(--red-ink); font-weight:600; } .acadame .live-foot .more-d { margin-left:auto; color:var(--primary); font-weight:600; background:var(--light); border-radius:999px; padding:6px 12px; } .acadame .live .empty { margin:0 18px; padding:14px; border:1px dashed var(--border); border-radius:10px; font-size:13.5px; color:var(--text); text-align:center; } .acadame .finder-reset { display:none; align-items:center; gap:6px; margin-left:auto; padding:6px 12px; border-radius:999px; border:1px solid var(--border); font-size:12.5px; font-weight:600; color:var(--text); background:#fff; } .acadame .finder-reset:hover { color:var(--red); border-color:var(--red); } .acadame .finder.dirty .finder-reset { display:inline-flex; } @media (max-width:640px) { .acadame .live { margin:0 12px 12px; } .acadame .live-ev { grid-template-columns:auto 1fr; gap:6px 12px; } .acadame .live-ev .pr { grid-column:2; text-align:left; } .acadame .live-ev .btn { grid-column:1/-1; } .acadame .live-head .lh { min-width:0; width:100%; } } /* sections */ .acadame section.sec { padding:56px 0; } .acadame section.alt { background:var(--light); } .acadame .sec-head { text-align:center; max-width:640px; margin:0 auto 28px; } .acadame .sec-head p { margin-inline:auto !important; } .acadame .sec-head p { font-size:15px !important; margin:0 !important; } .acadame .sec-head h4 { margin-bottom:6px !important; } .acadame .two { display:grid; grid-template-columns:1.1fr 1fr; gap:18px; } .acadame .card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:22px; } .acadame .card.red { border-color:var(--red); background:linear-gradient(160deg,#fff 0%,var(--lr) 100%); } .acadame .card.blue { background:linear-gradient(160deg,#fff 0%,var(--lb) 100%); } .acadame .card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; } .acadame .card-head h2 { margin:0 !important; font-size:20px !important; } .acadame .card-head img { height:34px; width:auto; } .acadame .card p { font-size:14px !important; } .acadame .courses { display:grid; gap:6px; margin:10px 0 14px !important; } .acadame .courses a { display:flex; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:9px; background:rgba(255,255,255,.9); border:1px solid var(--border); color:var(--primary); font-weight:600; font-size:13.5px; } .acadame .courses a:hover { border-color:var(--red); } .acadame .courses a small { font-weight:500; color:var(--text); font-size:12px; white-space:nowrap; } .acadame .acts { display:flex; gap:8px; flex-wrap:wrap; } .acadame /* Six across on the Home page, but a course page usually has four — a fixed six-column grid left them hanging to the left with two empty columns. Flex-wrap centres any number of them. */ .why { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; } .why > div { flex:1 1 180px; max-width:270px; } .acadame .why div { padding:14px 12px; background:#fff; border:1px solid var(--border); border-radius:12px; text-align:center; } .acadame .why .wi { width:36px; height:36px; margin:0 auto 8px; border-radius:50%; background:var(--lb); display:grid; place-items:center; font-size:18px; color:var(--primary); } .acadame .why strong { display:block; color:var(--primary); font-size:13.5px; line-height:1.25; margin-bottom:4px; } .acadame .why span { font-size:12.5px; } .acadame .logos { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 26px; margin-top:22px; } .acadame .logos img { height:34px; width:auto; filter:grayscale(1); opacity:.75; } .acadame .pop { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .acadame .pop a { display:flex; gap:12px; padding:14px; background:#fff; border:1px solid var(--border); border-radius:12px; color:var(--primary); transition:.15s; } .acadame .pop a:hover { border-color:var(--red); transform:translateY(-2px); box-shadow:var(--sh); } .acadame .pop .pi { flex:0 0 40px; width:40px; height:40px; border-radius:10px; background:var(--lb); display:grid; place-items:center; font-size:20px; } .acadame .pop em { display:block; font-style:normal; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--red-ink); font-weight:600; } .acadame .pop strong { display:block; font-size:14px; line-height:1.25; margin:2px 0 3px; } .acadame .pop span { font-size:12.5px; color:var(--text); } .acadame .split { display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:center; } .acadame .split img { border-radius:var(--radius); box-shadow:var(--sh); } .acadame .modes4 { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:14px 0; } .acadame .modes4 div { padding:12px; border-radius:10px; background:#fff; border:1px solid var(--border); font-size:13px; } .acadame .modes4 strong { display:block; color:var(--primary); font-size:14px; margin-bottom:2px; } .acadame .ticks li { position:relative; padding-left:24px; font-size:14px; margin-bottom:6px; } .acadame .ticks li::before { content:"✓"; position:absolute; left:0; top:2px; width:16px; height:16px; border-radius:50%; background:var(--red); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; } .acadame .band { background:linear-gradient(135deg,var(--lb) 0%,#F7FAFF 60%,var(--lr) 100%); border-top:1px solid #D6E3F6; border-bottom:1px solid #D6E3F6; padding:36px 0; } .acadame .band-in { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; } .acadame .band p { font-size:14px !important; max-width:640px; } .acadame .pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .acadame .pills span { padding:6px 11px; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:12.5px; font-weight:600; color:var(--primary); } .acadame .centres { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .acadame .centre { padding:16px; background:#fff; border:1px solid var(--border); border-radius:12px; display:flex; flex-direction:column; } .acadame .centre.hq { border-color:var(--red); } .acadame .centre .pi { width:34px; height:34px; border-radius:9px; background:var(--primary); color:#fff; display:grid; place-items:center; margin-bottom:10px; font-size:17px; } .acadame .centre h3 { margin-bottom:4px !important; } .acadame .centre .hq-tag { font-size:11px; color:var(--red-ink); vertical-align:middle; } .acadame .centre address { font-style:normal; font-size:13px; line-height:1.5; margin-bottom:10px; } .acadame .centre a { margin-top:auto; color:var(--red-ink); font-weight:600; font-size:13px; } .acadame .clients { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; align-items:center; } .acadame .clients div { background:#fff; border:1px solid var(--border); border-radius:10px; padding:14px; display:grid; place-items:center; min-height:70px; } .acadame .clients img { max-height:36px; width:auto; filter:grayscale(1); opacity:.8; } .acadame .reviews { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; } .acadame .review { display:flex; gap:14px; align-items:center; padding:14px 16px; background:#fff; border:1px solid var(--border); border-radius:12px; color:var(--primary); } .acadame .review b { font-size:26px; font-weight:800; line-height:1; } .acadame .review .stars svg { width:14px; height:14px; } .acadame .review p { margin:0 !important; font-size:13px !important; } .acadame .faq { max-width:820px; margin:0 auto; } .acadame .faq-item { border-bottom:1px solid var(--border); } .acadame .faq-q { width:100%; display:flex; justify-content:space-between; gap:12px; padding:13px 0; text-align:left; font-weight:600; font-size:14.5px; color:var(--primary); } .acadame .faq-q span:last-child { color:var(--red-ink); font-size:18px; line-height:1; } .acadame .faq-a { max-height:0; overflow:hidden; transition:max-height .25s ease; } .acadame .faq-a p { font-size:14px !important; padding-bottom:14px; margin:0 !important; } .acadame .news { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .acadame .news a { padding:16px; background:#fff; border:1px solid var(--border); border-radius:12px; color:var(--primary); } .acadame .news a:hover { border-color:var(--red); } .acadame .news em { display:block; font-style:normal; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--red-ink); font-weight:600; margin-bottom:6px; } .acadame .news strong { display:block; font-size:14.5px; line-height:1.3; margin-bottom:6px; } .acadame .news span { font-size:13px; color:var(--text); } /* footer */ .acadame .ftr { background:var(--primary); color:#fff; padding:40px 0 0; } .acadame .ftr-in { display:grid; grid-template-columns:1.3fr .8fr .8fr .8fr 1.1fr; gap:28px; padding-bottom:30px; } .acadame .ftr img.flogo { height:58px; width:auto; margin-bottom:16px; } .acadame .ftr p { font-size:13.5px !important; color:#D9E3F5; } .acadame .ftr h3 { color:#fff !important; font-size:14px !important; margin-bottom:10px !important; } .acadame .ftr a { display:block; font-size:13.5px; color:#D9E3F5; padding:3px 0; } .acadame .ftr a:hover { color:#fff; } .acadame .ftr-b { border-top:1px solid rgba(255,255,255,.12); padding:14px 0; font-size:12.5px; color:#B9C6DD; } .acadame .ftr-b .wrap { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; } .acadame .ftr-b a { display:inline-block; padding:10px 0 10px 18px; font-size:12.5px; min-height:24px; } @media (max-width:1024px) { .acadame .nav { display:none; } .acadame .burger { display:inline-flex; } .acadame .pillars, .acadame .why, .acadame .centres { grid-template-columns:repeat(2,1fr); } .acadame .grid3, .acadame .pop, .acadame .news { grid-template-columns:repeat(2,1fr); } .acadame .list { grid-template-columns:repeat(2,1fr); } .acadame .two, .acadame .split, .acadame .hero-top { grid-template-columns:1fr; } .acadame .trust { justify-content:flex-start; } .acadame .ftr-in { grid-template-columns:1fr 1fr; } .acadame .clients { grid-template-columns:repeat(3,1fr); } } @media (max-width:640px) { .acadame { font-size:14px !important; } .acadame .pillars, .acadame .why, .acadame .centres, .acadame .grid3, .acadame .pop, .acadame .news, .acadame .reviews, .acadame .modes4, .acadame .band-in { grid-template-columns:1fr; } .acadame .list { grid-template-columns:1fr; } .acadame .finder-head { grid-template-columns:1fr; } .acadame .search { width:100%; } .acadame .clients { grid-template-columns:repeat(2,1fr); } .acadame .ftr-in { grid-template-columns:1fr; } .acadame section.sec { padding:40px 0; } .acadame .hero { padding:22px 0 26px; } .acadame h1 { max-width:none; } .acadame .logo img { height:30px; } .acadame .hdr-actions .btn { display:none !important; } .acadame .hdr-in { gap:10px; } .acadame .hdr-actions { margin-left:auto; } .acadame .topbar { font-size:11.5px; } .acadame .topbar .pay { display:none; } .acadame .pillars { grid-template-columns:1fr 1fr; gap:8px; } .acadame .pillar { flex-direction:column; gap:6px; padding:12px; } .acadame .pillar > span:last-child > span { display:none; } .acadame .pillar em { margin-top:2px; } .acadame .modes { flex-direction:column; gap:6px; padding:12px 14px 0; } .acadame .mode { border-radius:10px; text-align:left; padding:10px 12px; } .acadame .hero-cta .btn { flex:1; } } @media (min-width:721px){ .acadame { --tab:60px; } } /* ---------------------------------------------------------------- mega menu Anchored to the header, not to the tab that opened it. A panel hung off a 90px-wide
  • either overflows the screen or has to be clipped, which is what was cutting category names in half. This spans the same column as the rest of the page, so it lines up with the logo and the content under it. Inside: a rail of groups, then that group's links. A group with too many to list flat (NPORS, and browsing by job) gets one more column of categories in between. Every grid child carries min-width:0, without which a CSS grid refuses to let its contents shrink and the text is truncated instead. */ .acadame .drop.mega { width:min(940px, calc(100vw - 32px)); padding:0 !important; overflow:hidden; } @media (min-width:981px) { .acadame .hdr { position:relative; } .acadame .nav > li { position:static; } .acadame .drop.mega { position:absolute; top:calc(100% - 6px); left:var(--gutter); right:var(--gutter); width:auto; max-width:var(--max); margin-inline:auto; padding:0 !important; overflow:hidden; border-radius:16px; box-shadow:0 24px 60px rgba(15,48,105,.18); border:1px solid var(--border); } } .acadame .drop.mega .mgrid { display:grid; grid-template-columns:250px minmax(0,1fr); align-items:stretch; } .acadame .drop.mega .mgrid > * { min-width:0; } /* the rail */ .acadame .drop.mega .mrail { border-right:1px solid var(--border); background:var(--light); padding:8px 0; max-height:min(74vh,580px); overflow-y:auto; } .acadame .drop.mega .mrail button { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 16px; color:var(--primary) !important; font-size:13.5px; font-weight:600; line-height:1.3; border-left:3px solid transparent; } .acadame .drop.mega .mrail button > span { flex:1 1 auto; min-width:0; } .acadame .drop.mega .mrail button small { display:block; font-size:11px; font-weight:500; color:var(--text) !important; } .acadame .drop.mega .mrail button i { flex:0 0 auto; font-style:normal; font-size:11px; font-weight:700; color:var(--text); background:#fff; border:1px solid var(--border); border-radius:999px; padding:1px 7px; margin-top:1px; } .acadame .drop.mega .mrail button svg { width:14px; height:14px; opacity:0; flex:0 0 14px; margin-top:3px; } /* the panes */ .acadame .drop.mega .mpanes { min-width:0; } .acadame .drop.mega .mpane { display:none; } .acadame .drop.mega .mpane.on { display:grid; } .acadame .drop.mega .mpane.one { grid-template-columns:minmax(0,1fr); } .acadame .drop.mega .mpane.two { grid-template-columns:228px minmax(0,1fr); } .acadame .drop.mega .mpane > * { min-width:0; } .acadame .drop.mega .mcats { border-right:1px solid var(--border); padding:8px 0; max-height:min(74vh,580px); overflow-y:auto; } .acadame .drop.mega .mcats button { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:6px 15px; font-size:12.8px; font-weight:600; color:var(--primary) !important; line-height:1.25; } .acadame .drop.mega .mcats button > span { flex:1 1 auto; min-width:0; } .acadame .drop.mega .mcats button i { flex:0 0 auto; font-style:normal; font-size:11px; font-weight:600; color:var(--text); margin-top:2px; } .acadame .drop.mega .mcolwrap { padding:16px 20px 18px; max-height:min(74vh,580px); overflow-y:auto; min-width:0; } .acadame .drop.mega .mcol { display:none; } .acadame .drop.mega .mcol.on { display:block; } .acadame .drop.mega .mcol > .eyebrow { margin:0 0 10px !important; } .acadame .drop.mega .mlinks { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:0 24px; align-content:start; } .acadame .drop.mega .mlinks .crow { min-width:0; } .acadame .drop.mega .mlinks .crow > a { padding:7px 8px; } /* the bar along the bottom */ .acadame .drop.mega .mfoot { display:flex; align-items:center; gap:14px; border-top:1px solid var(--border); background:var(--light); padding:11px 20px; } .acadame .drop.mega .msearch { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--primary) !important; background:#fff; border:1px solid var(--border); border-radius:999px; padding:7px 15px; } .acadame .drop.mega .msearch svg { width:15px; height:15px; } .acadame .drop.mega .msearch:hover { border-color:var(--primary); background:#fff; } .acadame .drop.mega .mall { margin-left:auto; font-size:13px; font-weight:700; color:var(--red-ink) !important; white-space:nowrap; } @media (max-width:1180px) { .acadame .drop.mega .mpane.two { grid-template-columns:200px minmax(0,1fr); } } /* mobile search row */ .acadame .mobile-nav .mob-search { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:13px 4px; font-size:15px; font-weight:600; color:var(--primary) !important; border-bottom:1px solid var(--border); } .acadame .mobile-nav .mob-search svg { width:18px; height:18px; } /* ---------------------------------------------------------------- header layout Logo left, navigation in the middle, the account and search on the right. */ @media (min-width:981px) { .acadame .hdr-in { display:grid; grid-template-columns:minmax(140px,1fr) auto minmax(140px,1fr); align-items:center; } .acadame .nav { margin:0 !important; justify-content:center; } .acadame .hdr-actions { justify-self:end; } } /* Link rows inside the mega menu. The base dropdown pushes the meta text to the far right, which reads fine in one wide column and badly in three narrow ones — the course name wraps to three lines while "10 days" floats away from it. Here the name leads, the duration sits under it, and the Dates button holds the right edge. */ .acadame .drop.mega .mlinks { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:0 28px; } .acadame .drop.mega .mlinks .crow { display:flex; align-items:center; gap:10px; border-bottom:1px solid #EEF2F8; } .acadame .drop.mega .mlinks .crow:last-child { border-bottom:0; } .acadame .drop.mega .mlinks .crow > a { flex:1 1 auto; min-width:0; display:block; padding:9px 8px; font-size:13.5px; line-height:1.35; color:var(--primary) !important; border-radius:7px; } .acadame .drop.mega .mlinks .crow > a small { display:block; margin-top:2px; font-size:11.5px; font-weight:500; color:var(--text) !important; white-space:normal; } .acadame .drop.mega .mlinks .crow .dts { flex:0 0 auto; font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:7px; border:1px solid var(--border); color:var(--red-ink) !important; background:#fff; } .acadame .drop.mega .mlinks .crow .dts:hover { background:var(--red-ink); color:#fff !important; border-color:var(--red-ink); } /* Second level inside the phone menu: the same groups as the desktop rail, collapsed. */ .acadame .mobile-nav .sub2 { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:10px 12px; font-size:14px; font-weight:600; color:var(--primary) !important; } .acadame .mobile-nav .sub2 em { font-style:normal; font-size:11px; font-weight:700; color:var(--text); background:#fff; border:1px solid var(--border); border-radius:999px; padding:1px 7px; } .acadame .mobile-nav .sub2 span { margin-left:auto; font-size:17px; color:var(--text); } .acadame .mobile-nav .sub .sub { padding-left:10px; } /* ---------------------------------------------------------------- mega menu: type and wrapping Two things broke this on real pages that an isolated test could never show. 1. The plugin's own reset, `.acadame button { font:inherit !important }`, wins on a