1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <link rel="apple-touch-icon" sizes="76x76" href="https://static.studyladder.co.uk/cdn/site/2e/fb7b4b5af2aa.png" /> 7 <link rel="apple-touch-icon" sizes="120x120" href="https://static.studyladder.co.uk/cdn/site/c5/21378bb6616f.png" /> 8 <link rel="apple-touch-icon" sizes="152x152" href="https://static.studyladder.co.uk/cdn/site/67/2d9c8f4113ad.png" /> 9 <link rel="apple-touch-icon" sizes="180x180" href="https://static.studyladder.co.uk/cdn/site/f0/67c0f8d932e1.png" /> 10 <link rel="shortcut icon" sizes="192x192" href="https://static.studyladder.co.uk/cdn/site/d5/5ccd0010bcfa.png"> 11 <meta name="description" content="Home Plus pricing — Monthly, Quarterly and Annual options. Single-student and family (up to 4 kids) plans. 7-day free trial on every plan." /> 12 <meta name="keywords" content="studyladder, smartkiddies, study ladder, english, literacy, maths, mathematics, kids games, worksheets, lesson plans, kids activities, algebra, multiplication, geometry, comprehension, United Kingdom." /> 13 <meta name="rating" content="General" /> 14 <meta name="robots" content="all" /> 15 <meta name="google-site-verification" content="D8IxNaFFb30mlpk1W9ckC7yBm3szytFOoXiHyo2Cpm8" /> 16 <meta name="author" content="Studyladder" /> 17 <meta name="geo.position" content="51;-0"> 18 <meta name="geo.country" content="GB"> 19 <meta name="geo.placename" content="Studyladder UK"> 20 <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 21 <meta http-equiv="X-UA-Compatible" content="IE=edge; text/html; charset=utf-8" /> 22 <meta charset="utf-8"> 23 <!-- Google Tag Manager --> 24
24<script>
vendor: 387 bytes, lines 24-28
24 25 (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'}); 26 var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:''; 27 j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); 28 })(window,document,'script','dataLayer','
28GTM-MRVSQXKH
vendor: 12 bytes, lines 28-29
28'); 29
29</script>
29 30 31 32
32<script> 33 window.dataLayer = window.dataLayer || []; 34 function gtag(){dataLayer.push(arguments);} 35 gtag('config', 'AW-1071699385'); 36 </script>
36 37 38 <!-- End Google Tag Manager --> 39 40 <title>Studyladder Home Plus | Pricing & family plans</title> 41 42
42<script type="text/javascript" src="/cdn/lib/vendor/jquery/jquery-3.7.1-v1.min.js"></script>
42 43
43<script type="text/javascript" src="/cdn/lib/vendor/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
43 44
44<script type="module"> 45 import { DotLottie } from "https://static.studyladder.co.uk/cdn/site/94/e40a4cda63bc.js";//"https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm"; 46 window.DotLottie = DotLottie; // Attach DotLottie to the window object for global access 47 </script>
47 48
48<script type="text/javascript" src="https://static.studyladder.co.uk/cdn/site/2f/978ac60cd6ed.js"></script>
48 49 50
50<script type="text/javascript" src="https://static.studyladder.co.uk/cdn/site/0a/24d5b043bd4d.js"></script>
50 51
51<script type="text/javascript" src="https://static.studyladder.co.uk/cdn/site/6b/6f6a16f17ffa.js"></script>
51 52
52<script type="text/javascript" src="https://static.studyladder.co.uk/cdn/site/85/8149e1190b9d.js"></script>
52 53 <link rel="preconnect" href="https://fonts.gstatic.com"> 54 <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@800&display=swap" rel="stylesheet"> 55 <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet"> 56 <link href='https://fonts.googleapis.com/css?family=ABeeZee:400,400italic' rel='stylesheet' type='text/css'> 57 <link href="https://fonts.googleapis.com/css?family=Muli|Quicksand:400,500,700" rel="stylesheet"> 58 <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 59 <link rel="stylesheet" type="text/css" href="/cdn/lib/vendor/font-awesome/pro-5.5.00-web/css/fontawesome-solid-regular.min.css"/> 60 <link rel="stylesheet" href="https://static.studyladder.co.uk/cdn/dist/scss/ad0326d857b829a3/scss/bootstrap.min.css"/> 61 62 <link rel="stylesheet" type="text/css" href="https://static.studyladder.co.uk/cdn/dist/scss/b0d969d290c3b536/global.min.css"/> 63 <link rel="stylesheet" type="text/css" href="https://static.studyladder.co.uk/cdn/dist/scss/47bf43b33f3c98b5/scss/sl-marketing.min.css"/> 64 <link rel="stylesheet" type="text/css" href="https://static.studyladder.co.uk/cdn/dist/scss/f803f3dedb7b631b/account/parent-pricing.min.css"/> 65
65<script type="text/javascript" src="https://www.studyladder.co.uk/secure/stripe-purchase-client?v=20260925-1"></script>
65 66 67
67<script> gtag('event', 'conversion', {'send_to': 'AW-1071699385/DQ0SCL-pjO0ZELmrg_8D'}); </script>
67 68
68<script> 69 window.MathJax = { 70 loader: { 71 paths: { 72 mathjax: "\/lib\/vendor\/mathjax\/3.2.2\/es5" } 73 }, 74 tex: { 75 inlineMath: [['\\(', '\\)']], 76 }, 77 svg: { 78 fontCache: 'global' 79 } 80 }; 81 </script>
81 82 83
83<script src="https://static.studyladder.co.uk/cdn/site/cf/b8e18acf40a7.js" async></script>
83 84 85 </head> 86 <body style="" class=" sl-marketing"> 87
87<script>var animation; var swalAnimation; var cacheVersion = 0.01</script>
87 88 89 <!-- Google Tag Manager (noscript) -->
vendor: 89 bytes, lines 89-91
89 90 <noscript> 91 <iframe src="https://www.googletagmanager.com/ns.html?id=
91GTM-MRVSQXKH
vendor: 92 bytes, lines 91-92
91" height="0" width="0" style="display:none;visibility:hidden"></iframe> 92 </noscript>
92<!-- End Google Tag Manager (noscript) --> 93 <header id="site-header" class="site-header-container public "> 94 <nav class="site-header"> 95 <div class="">
96<script> 97 // Set data-locale on <html> as early as possible so .au-only / .intl-only 98 // spans render correctly without a flash of wrong content. 99 (function(){ 100 try { document.documentElement.setAttribute('data-locale', "intl"); } catch(e){} 101 })(); 102</script>
102 103 104<style> 105/* âââ Country bar (top strip) ââââââââââââââââââââââââââââââââââââââ */ 106.country-bar { 107 background: #F8FAFC; 108 border-bottom: 1px solid #E2E8F0; 109 padding: 2px 0; 110 font-size: 12px; 111 color: #475569; 112 line-height: 1.2; 113} 114.country-bar-inner { 115 max-width: 1280px; 116 margin: 0 auto; 117 padding: 0 20px; 118 display: flex; 119 align-items: center; 120 justify-content: flex-end; 121 gap: 12px; 122} 123.country-selector { 124 display: inline-flex; 125 align-items: center; 126 gap: 6px; 127 position: relative; 128} 129.country-flag { 130 display: inline-flex; 131 align-items: center; 132 justify-content: center; 133 width: 18px; 134 height: 12px; 135 overflow: hidden; 136 border-radius: 2px; 137 flex: 0 0 auto; 138} 139.country-flag img { 140 width: 18px !important; 141 height: auto !important; 142 max-width: 18px !important; 143 display: block; 144} 145.country-select { 146 background: transparent; 147 border: 0; 148 padding: 2px 20px 2px 6px; 149 font: inherit; 150 font-size: 12px; 151 color: #0F172A; 152 cursor: pointer; 153 -webkit-appearance: none; 154 appearance: none; 155 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); 156 background-repeat: no-repeat; 157 background-position: right 4px center; 158 line-height: 1.2; 159} 160.country-select:hover { color: #2D5BFF; } 161.country-caret { display: none; } /* selector renders its own arrow */ 162 163/* âââ Main nav âââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 164nav.top { 165 background: #FFFFFF; 166 border-bottom: 1px solid #E2E8F0; 167 position: relative; 168 z-index: 100; 169} 170nav.top .nav-inner { 171 max-width: 1280px; 172 margin: 0 auto; 173 padding: 8px 20px; 174 display: flex; 175 align-items: center; 176 gap: 24px; 177} 178nav.top .logo { 179 display: inline-flex; 180 align-items: center; 181 flex: 0 0 auto; 182} 183nav.top .logo img { 184 height: 36px; 185 width: auto; 186 display: block; 187} 188nav.top .nav-links { 189 list-style: none; 190 margin: 0; 191 padding: 0; 192 display: flex; 193 align-items: center; 194 gap: 4px; 195 flex: 1 1 auto; 196} 197nav.top .nav-links > li { position: relative; } 198nav.top .nav-links > li > a, 199nav.top .nav-links > li > .nav-dropdown-trigger { 200 display: inline-flex; 201 align-items: center; 202 gap: 4px; 203 padding: 10px 14px; 204 font-size: 14px; 205 font-weight: 500; 206 color: #475569; 207 text-decoration: none; 208 border-radius: 8px; 209 transition: background .15s ease, color .15s ease;
210 cursor: pointer; 211} 212nav.top .nav-links > li > a:hover, 213nav.top .nav-links > li > .nav-dropdown-trigger:hover { 214 color: #0F172A; 215 background: #F8FAFC; 216} 217nav.top .nav-caret { 218 font-size: 14px; 219 opacity: 0.8; 220 margin-left: 2px; 221 display: inline-block; 222 line-height: 1; 223 transition: transform .15s ease; 224} 225nav.top .nav-dropdown:hover .nav-caret { transform: rotate(180deg); } 226nav.top .nav-dropdown-menu { 227 display: none; 228 position: absolute !important; 229 top: 100% !important; 230 left: 50% !important; 231 transform: translateX(-50%) !important; 232 margin-top: 5px !important; 233 min-width: 220px; 234 background: #FFFFFF; 235 border: 1px solid #E2E8F0; 236 border-radius: 12px; 237 box-shadow: 0 12px 32px -8px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.06); 238 padding: 8px; 239 z-index: 200; 240} 241/* Hover-bridge so mouse can travel from trigger to dropdown without losing hover */ 242nav.top .nav-dropdown::after { 243 content: ""; 244 position: absolute; 245 top: 100%; 246 left: 0; 247 right: 0; 248 height: 8px; 249 pointer-events: auto; 250} 251nav.top .nav-dropdown:hover .nav-dropdown-menu, 252nav.top .nav-dropdown:focus-within .nav-dropdown-menu { display: block; } 253nav.top .nav-dropdown-menu a { 254 display: flex; 255 align-items: center; 256 gap: 10px; 257 padding: 10px 12px; 258 border-radius: 8px; 259 font-size: 14px; 260 color: #0F172A; 261 text-decoration: none; 262 transition: background .15s ease; 263} 264nav.top .nav-dropdown-menu a:hover { background: #F1F5F9; } 265nav.top .nav-dropdown-icon { 266 display: inline-flex !important; 267 align-items: center !important; 268 justify-content: center !important; 269 width: 28px !important; 270 height: 28px !important; 271 min-width: 28px !important; 272 border-radius: 6px !important; 273 font-size: 14px !important; 274 font-weight: 700 !important; 275 flex: 0 0 28px !important; 276 line-height: 1 !important; 277 text-transform: none !important; 278 font-family: inherit !important; 279} 280/* Soft pastel backgrounds with deep coloured letters â matches subject-page topic-card-icon style */ 281nav.top .nav-dropdown-icon.maths { background: #DBE6FF !important; color: #2D5BFF !important; } /* blue */ 282nav.top .nav-dropdown-icon.english { background: #D1FAE5 !important; color: #059669 !important; } /* green */ 283nav.top .nav-dropdown-icon.science { background: #FED7AA !important; color: #EA580C !important; } /* orange */ 284nav.top .nav-dropdown-icon.parent { background: #FED7AA !important; color: #EA580C !important; } /* orange */ 285nav.top .nav-dropdown-icon.teacher { background: #DBE6FF !important; color: #2D5BFF !important; } /* blue */ 286nav.top .nav-dropdown-icon.school { background: #D1FAE5 !important; color: #059669 !important; } /* green */ 287 288nav.top .nav-cta { 289 display: flex; 290 align-items: center; 291 gap: 8px; 292 flex: 0 0 auto; 293} 294nav.top .nav-cta .btn { 295 font-size: 14px; 296 padding: 8px 16px; 297 border-radius: 999px; 298 font-weight: 600; 299 text-decoration: none; 300 display: inline-flex; 301 align-items: center; 302} 303nav.top .nav-cta .btn-ghost { 304 background: transparent; 305 color: #0F172A; 306 border: 1px solid transparent; 307} 308nav.top .nav-cta .btn-ghost:hover { background: #F1F5F9; } 309nav.top .nav-cta .btn-primary { 310 background: #2D5BFF; 311 color: #FFFFFF; 312 border: 1px solid #2D5BFF; 313} 314nav.top .nav-cta .btn-primary:hover { background: #1E40AF; border-color: #1E40AF; } 315 316nav.top .nav-menu-toggle { 317 display: none; 318 background: transparent; 319 border: 0; 320 width: 40px; 321 height: 40px; 322 padding: 8px; 323 cursor: pointer; 324 flex-direction: column; 325 justify-content: space-between; 326 align-items: stretch; 327} 328nav.top .nav-menu-toggle span { 329 display: block; 330 height: 2px; 331 width: 100%; 332 background: #0F172A; 333 border-radius: 2px; 334 transition: transform .2s ease, opacity .2s ease; 335} 336 337.nav-mobile-only { display: none; } 338 339/* Force white text on the mobile Join Now button, regardless of viewport width. 340 sl-marketing.scss's mobile nav kicks in at â¤1024px and its `.sl-marketing a { color: blue }` 341 base rule would otherwise leave the button reading blue-on-blue. */ 342nav.top .nav-mobile-only .nav-mobile-join, 343nav.top .nav-mobile-only .nav-mobile-join:link, 344nav.top .nav-mobile-only .nav-mobile-join:visited, 345nav.top .nav-mobile-only .nav-mobile-join:hover, 346nav.top .nav-mobile-only .nav-mobile-join:focus, 347nav.top .nav-mobile-only .nav-mobile-join:active { 348 color: #FFFFFF !important; 349 background: #2D5BFF !important; 350} 351 352/* âââ Mobile breakpoint ââââââââââââââââââââââââââââââââââââââââââââ */ 353/* Aligned to sl-marketing.scss's own 1024px nav breakpoint so both stylesheets 354 flip to mobile at the same viewport width. Also toggles on `.open` (the 355 class name sl-marketing already targets) instead of a bespoke `.is-open`. */ 356@media (max-width: 1024px) { 357 nav.top .nav-links { 358 display: none; 359 position: absolute; 360 top: 100%; 361 left: 0; 362 right: 0; 363 flex-direction: column; 364 align-items: stretch; 365 background: #FFFFFF; 366 border-bottom: 1px solid #E2E8F0; 367 padding: 12px 16px; 368 gap: 4px; 369 box-shadow: 0 12px 24px -10px rgba(15,23,42,0.15); 370 max-height: calc(100vh - 80px); 371 overflow-y: auto; 372 } 373 nav.top .nav-links.open, 374 nav.top .nav-links.is-open { display: flex; } 375 nav.top .nav-links > li > a, 376 nav.top .nav-links > li > .nav-dropdown-trigger { padding: 12px 10px; font-size: 16px; } 377 nav.top .nav-dropdown-menu { 378 display: none !important; 379 position: static !important; 380 top: auto !important; 381 left: auto !important; 382 right: auto !important; 383 transform: none !important; 384 margin: 0 !important; 385 box-shadow: none !important; 386 border: 0 !important; 387 border-radius: 0 !important; 388 padding: 4px 0 8px 24px !important; 389 background: transparent !important; 390 min-width: 0 !important; 391 width: 100% !important; 392 } 393 /* Kill desktop hover/focus reveal on mobile (touch devices shouldn't use hover) */ 394 nav.top .nav-dropdown:hover > .nav-dropdown-menu, 395 nav.top .nav-dropdown:focus-within > .nav-dropdown-menu, 396 nav.top .nav-dropdown:hover .nav-dropdown-menu, 397 nav.top .nav-dropdown:focus-within .nav-dropdown-menu { display: none !important; } 398 /* .open wins via source order over the hover/focus block above */ 399 nav.top .nav-dropdown.open > .nav-dropdown-menu, 400 nav.top .nav-dropdown.open:hover > .nav-dropdown-menu, 401 nav.top .nav-dropdown.open:focus-within > .nav-dropdown-menu { display: block !important; } 402 nav.top .nav-dropdown.open > .nav-dropdown-trigger .nav-caret { transform: rotate(180deg); } 403 nav.top .nav-dropdown::after { display: none; } 404 nav.top .nav-dropdown { position: static !important; } 405 .nav-mobile-only .nav-mobile-join, 406 .nav-mobile-only .nav-mobile-join:hover, 407 .nav-mobile-only .nav-mobile-join:focus, 408 .nav-mobile-only .nav-mobile-join:active { color: #FFFFFF !important; background: #2D5BFF !important; } 409 nav.top .nav-menu-toggle { display: flex; } 410 nav.top .nav-cta .btn-ghost, 411 nav.top .nav-cta .btn-primary { display: none; } 412 .nav-mobile-only { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid #E2E8F0; } 413 .nav-mobile-only .btn { display: block; width: 100%; text-align: center; margin: 6px 0; font-size: 15px; padding: 12px 16px; border-radius: 10px; text-decoration: none; } 414 .nav-mobile-only .nav-mobile-join { background: #2D5BFF; color: #FFFFFF; } 415 .nav-mobile-only .nav-mobile-login { background: #FFFFFF; color: #0F172A; border: 1px solid #E2E8F0; }
416 body.nav-open { overflow: hidden; } 417} 418 419/* âââ Short viewports â pin Join Now / Login to the top of the menu ââââ 420 On landscape phones / small laptops (Nest Hub etc.) the CTA row at the 421 bottom of the menu can fall below the fold. Flex `order` moves it to 422 the top of the column without touching the DOM. */ 423@media (max-width: 1024px) and (max-height: 650px) { 424 nav.top .nav-links .nav-mobile-cta { 425 order: -1; 426 margin-top: 0; 427 padding-top: 0; 428 border-top: 0; 429 margin-bottom: 10px; 430 padding-bottom: 10px; 431 border-bottom: 1px solid #E2E8F0; 432 } 433} 434</style> 435 436<!-- COUNTRY BAR â thin strip at the top, replaces the old dark navbar --> 437<div class="country-bar"> 438 <div class="country-bar-inner"> 439 <form class="country-selector" id="lcForm"> 440 <span class="country-flag" aria-hidden="true"> 441 <img src="https://static.studyladder.co.uk/cdn/site/66/a8cfb86cfc1b.png" alt=""> 442 </span> 443 <select id="lc_select" name="lc_set" class="country-select" aria-label="Change country"> 444 <option value="https://www.studyladder.com.au/account/parent-pricing">Australia</option> 445 <option value="https://www.studyladder.ca/account/parent-pricing">Canada</option> 446 <option value="https://www.studyladder.co.nz/account/parent-pricing">New Zealand</option> 447 <option value="https://www.studyladder.co.uk/account/parent-pricing" selected="selected">United Kingdom</option> 448 <option value="https://www.studyladder.com/account/parent-pricing">United States</option> 449 </select> 450 <span class="country-caret" aria-hidden="true">▾</span> 451 </form> 452 </div> 453</div> 454
455<script> 456 // Locale switcher â submit to the selected URL 457 document.getElementById('lc_select').addEventListener('change', function(){ 458 var u = this.value; 459 var f = document.getElementById('lcForm'); 460 f.setAttribute('action', u); 461 f.submit(); 462 }); 463</script>
463 464 465<!-- MAIN NAV â new marketing design --> 466<nav class="top"> 467 <div class="nav-inner"> 468 <a href="/" class="logo"> 469 <img src="https://static.studyladder.co.uk/cdn/site/13/6f597fea9532.png" alt="Studyladder"> 470 </a> 471 472 <ul class="nav-links" id="primaryNav"> 473 <li><a href="/about/parent">Parents</a></li> 474 <li><a href="/about/teacher">Teachers</a></li> 475 <li><a href="/about/schools">Schools</a></li> 476 477 <li class="nav-dropdown"> 478 <a href="/about/subjects" class="nav-dropdown-trigger">Subjects <span class="nav-caret">▾</span></a> 479 <div class="nav-dropdown-menu"> 480 <a href="/about/subjects-mathematics"><span class="nav-dropdown-icon maths">M</span>Mathematics</a> 481 <a href="/about/subjects-english"><span class="nav-dropdown-icon english">E</span>English</a> 482 <a href="/about/subjects-science"><span class="nav-dropdown-icon science">S</span>Science</a> 483 </div> 484 </li> 485 486 <li><a href="/info/curriculum-aligned?jurisdiction=gb">Curriculum</a></li> 487 488 <li class="nav-dropdown"> 489 <a href="#pricing" class="nav-dropdown-trigger">Pricing <span class="nav-caret">▾</span></a> 490 <div class="nav-dropdown-menu"> 491 <a href="/account/parent-pricing"><span class="nav-dropdown-icon parent">P</span>For parents</a> 492 <a href="/about/teacher-school-pricing?t=t"><span class="nav-dropdown-icon teacher">T</span>For teachers</a> 493 <a href="/about/teacher-school-pricing?t=s"><span class="nav-dropdown-icon school">S</span>For schools</a> 494 </div> 495 </li> 496 497 <li><a href="/about/contact-us">Support</a></li> 498 499 <!-- Mobile-only CTAs (collapse into the menu when open on small screens) --> 500 <li class="nav-mobile-only nav-mobile-cta"> 501 <a href="#joinNow" data-toggle="modal" class="btn btn-primary nav-mobile-join">Join Now</a> 502 <a href="/login/account" class="btn btn-secondary nav-mobile-login">Login</a> 503 </li> 504 </ul> 505 506 <div class="nav-cta"> 507 <a href="/login/account" class="btn btn-ghost">Login</a> 508 <a href="#joinNow" data-toggle="modal" class="btn btn-primary nav-join-btn">Join Now</a> 509 <button type="button" class="nav-menu-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="primaryNav"> 510 <span></span> 511 <span></span> 512 <span></span> 513 </button> 514 </div> 515 </div> 516</nav> 517
518<script> 519 // Mobile menu toggle â opens / closes the primary nav on small screens 520 (function(){ 521 var toggle = document.querySelector('.nav-menu-toggle'); 522 var nav = document.getElementById('primaryNav'); 523 if (!toggle || !nav) return; 524 toggle.addEventListener('click', function(){ 525 var open = nav.classList.toggle('is-open'); 526 nav.classList.toggle('open', open); // matches sl-marketing.scss's `.nav-links.open` rule 527 toggle.setAttribute('aria-expanded', open ? 'true' : 'false'); 528 document.body.classList.toggle('nav-open', open); 529 }); 530 531 // Mobile = the burger button is currently rendered 532 function isMobileNav(){ 533 return toggle && toggle.offsetParent !== null; 534 } 535 536 // Bind tap-to-toggle directly on each dropdown trigger so it runs before any 537 // delegated handlers and we can stopPropagation reliably. 538 nav.querySelectorAll('.nav-dropdown-trigger').forEach(function(trig){ 539 trig.addEventListener('click', function(e){ 540 if (!isMobileNav()) return; // desktop: link navigates as normal 541 e.preventDefault(); 542 e.stopPropagation(); 543 var parent = trig.parentElement; 544 if (!parent || !parent.classList.contains('nav-dropdown')) return; 545 // Close other open dropdowns (accordion behaviour) 546 nav.querySelectorAll('.nav-dropdown.open').forEach(function(d){ 547 if (d !== parent) d.classList.remove('open'); 548 }); 549 parent.classList.toggle('open'); 550 }); 551 }); 552 553 // Close burger menu when a child link inside a submenu is clicked 554 nav.addEventListener('click', function(e){ 555 var t = e.target; 556 if (!t || !t.closest) return; 557 if (t.closest('.nav-dropdown-trigger')) return; // handled above 558 var link = t.closest('a'); 559 if (!link) return; 560 nav.classList.remove('is-open'); 561 nav.classList.remove('open'); 562 toggle.setAttribute('aria-expanded', 'false'); 563 document.body.classList.remove('nav-open'); 564 nav.querySelectorAll('.nav-dropdown.open').forEach(function(d){ d.classList.remove('open'); }); 565 }); 566 })(); 567 568 // Clear stale dashboard localStorage flags (preserved from original) 569 try { 570 localStorage.removeItem('liveClassroomOpen'); 571 localStorage.removeItem('teacherDashboardOpen'); 572 } catch (e) {} 573</script>
573 574 <style> 575 main p, 576 main b, 577 main span, 578 main label, 579 main li, 580 main h1, 581 main h2, 582 main h3, 583 main h4, 584 main h5, 585 main h6, 586 main small { 587 opacity: 0; 588 transition: opacity 0.2s ease-in; 589 } 590 </style> 591 592 593
594<script> 595document.addEventListener("DOMContentLoaded", function () { 596 // Idempotency guard â the copy-localisation partial can end up rendered twice 597 // via the header include chain, which would swap the same text twice 598 // (e.g. "English" â "English Language Arts" â "English Language Arts Language Arts"). 599 if (window.__slLocalisationRan) return; 600 window.__slLocalisationRan = true; 601 602 const country = "GB"; // AU, US, GB, NZ, CA 603//if(country=="GB"){country="UK";} 604 605console.log("country="+country); 606 if (country !== "AU") { 607const terms = { 608 "Foundation / Prep": { US: "Kindergarten", GB: "Reception", CA: "Kindergarten", NZ: "Year 1" }, 609 "Foundation": { US: "Kindergarten", GB: "Reception", CA: "Kindergarten", NZ: "Year 1" }, 610 "Year": { US: "Grade", GB: "Year", CA: "Grade", NZ: "Year" }, 611 "Kindergarten â Year 6": { US: "Kindergarten â Grade 6",GB: "Reception â Year 6",CA: "Kindergarten â Grade 6",NZ: "Year 1 â Year 6" }, 612 "K-6": { US: "Kâ6",GB: "Râ6",CA: "Kâ6",NZ: "1â6" }, 613 "FâYr 6": { US: "Kâ6",GB: "Râ6",CA: "Kâ6",NZ: "Yr1âYr6" }, 614 "Primary School": { US: "Elementary School", GB: "Primary School", CA: "Elementary School", NZ: "Primary School" }, 615 "High School": { US: "High School", GB: "Secondary School", CA: "High School", NZ: "Secondary School" }, 616 //"Year 12": { US: "Grade 12", GB: "Year 13 / Sixth Form", CA: "Grade 12", NZ: "Year 13" }, 617 "Principal": { US: "Principal", GB: "Headteacher", CA: "Principal", NZ: "Principal" }, 618 "Deputy Principal": { US: "Vice Principal", GB: "Deputy Headteacher", CA: "Vice Principal", NZ: "Deputy Principal" }, 619 "Student": { US: "Student", GB: "Student", CA: "Student", NZ: "Student" }, 620 //"Class": { US: "Class", GB: "Class", CA: "Homeroom", NZ: "Class" }, 621 "Class Teacher": { US: "Homeroom Teacher", GB: "Form Tutor", CA: "Homeroom Teacher", NZ: "Class Teacher" }, 622 "Marking": { US: "Grading", GB: "Marking", CA: "Grading", NZ: "Marking" }, 623 "Mark": { US: "Grade", GB: "Mark", CA: "Grade", NZ: "Mark" }, 624 "School Report": { US: "Report Card", GB: "School Report", CA: "Report Card", NZ: "School Report" }, 625 "Revision": { US: "Review", GB: "Revision", CA: "Studying", NZ: "Revision" }, 626 // "Exam": { US: "Test / Exam", GB: "Exam", CA: "Exam", NZ: "Exam" }, 627 "Maths": { US: "Math", GB: "Maths", CA: "Math", NZ: "Maths" }, 628 "Digital Technologies": { US: "Computer Class", GB: "ICT", CA: "Tech Ed / ICT", NZ: "Digital Technologies" },
629 "English": { US: "English Language Arts", GB: "English", CA: "English", NZ: "English" }, 630 "History": { US: "Social Studies", GB: "History", CA: "Social Studies", NZ: "Social Studies" }, 631 "School Holidays": { US: "Vacation", GB: "School Holidays", CA: "School Holidays", NZ: "School Holidays" }, 632 633 "Programme": { US: "Program", GB: "Programme", CA: "Programme", NZ: "Programme" }, 634 "Centre": { US: "Center", GB: "Centre", CA: "Centre", NZ: "Centre" }, 635 "Practice": { US: "Practice", GB: "Practice", CA: "Practice", NZ: "Practice" }, 636 "practising": { US: "practicing", GB: "practising", CA: "practicing", NZ: "practising" }, 637 "Honours": { US: "Honors", GB: "Honours", CA: "Honours", NZ: "Honours" }, 638 "Colour": { US: "Color", GB: "Colour", CA: "Colour", NZ: "Colour" }, 639 "Judgement": { US: "Judgment", GB: "Judgement", CA: "Judgement", NZ: "Judgement" }, 640 "Learnt": { US: "Learned", GB: "Learnt", CA: "Learnt", NZ: "Learnt" }, 641 642 "Customise": { US: "Customize", GB: "Customise", CA: "Customise", NZ: "Customise" }, 643 "Personalise": { US: "Personalize", GB: "Personalise", CA: "Personalise", NZ: "Personalise" }, 644 "Personalised": { US: "Personalized", GB: "Personalised", CA: "Personalised", NZ: "Personalised" }, 645 "Behaviour": { US: "Behavior", GB: "Behaviour", CA: "Behaviour", NZ: "Behaviour" }, 646 "Organisation": { US: "Organization", GB: "Organisation", CA: "Organisation", NZ: "Organisation" }, 647 "Analyse": { US: "Analyze", GB: "Analyse", CA: "Analyse", NZ: "Analyse" }, 648 "Specialisation": { US: "Specialization", GB: "Specialisation", CA: "Specialisation", NZ: "Specialisation" }, 649 "Recognise": { US: "Recognize", GB: "Recognise", CA: "Recognise", NZ: "Recognise" }, 650 "Utilise": { US: "Utilize", GB: "Utilise", CA: "Utilise", NZ: "Utilise" }, 651 "Utilising": { US: "Utilizing", GB: "Utilising", CA: "Utilising", NZ: "Utilising" }, 652 "Authorisation": { US: "Authorization", GB: "Authorisation", CA: "Authorisation", NZ: "Authorisation" }, 653 "Authorise": { US: "Authorize", GB: "Authorise", CA: "Authorise", NZ: "Authorise" }, 654 "Memorise": { US: "Memorize", GB: "Memorise", CA: "Memorise", NZ: "Memorise" }, 655 "Optimise": { US: "Optimize", GB: "Optimise", CA: "Optimise", NZ: "Optimise" }, 656 "Realise": { US: "Realize", GB: "Realise", CA: "Realise", NZ: "Realise" }, 657 "Initialise": { US: "Initialize", GB: "Initialise", CA: "Initialise", NZ: "Initialise" }, 658 659 "Defence": { US: "Defense", GB: "Defence", CA: "Defence", NZ: "Defence" }, 660 "Organising": { US: "Organizing", GB: "Organising", CA: "Organizing", NZ: "Organising" }, 661 "Organisational": { US: "Organizational",GB: "Organisational",CA: "Organizational",NZ: "Organisational" }, 662 "Analysed": { US: "Analyzed", GB: "Analysed", CA: "Analyzed", NZ: "Analysed" }, 663 "Apologise": { US: "Apologize", GB: "Apologise", CA: "Apologize", NZ: "Apologise" }, 664 "Dialogue": { US: "Dialog", GB: "Dialogue", CA: "Dialogue", NZ: "Dialogue" }, 665 "Catalogue": { US: "Catalog", GB: "Catalogue", CA: "Catalogue", NZ: "Catalogue" }, 666 "Aluminium": { US: "Aluminum", GB: "Aluminium", CA: "Aluminium", NZ: "Aluminium" }, 667 "Traveller": { US: "Traveler", GB: "Traveller", CA: "Traveller", NZ: "Traveller" }, 668 "Travelling": { US: "Traveling", GB: "Travelling", CA: "Travelling", NZ: "Travelling" }, 669 "Cancelled": { US: "Canceled", GB: "Cancelled", CA: "Cancelled", NZ: "Cancelled" }, 670 "Cancelling": { US: "Canceling", GB: "Cancelling", CA: "Cancelling", NZ: "Cancelling" }, 671 "Fuelled": { US: "Fueled", GB: "Fuelled", CA: "Fuelled", NZ: "Fuelled" }, 672 "Enrol": { US: "Enroll", GB: "Enrol", CA: "Enrol", NZ: "Enrol" }, 673 "Fulfil": { US: "Fulfill", GB: "Fulfil", CA: "Fulfill", NZ: "Fulfil" }, 674 "Instalment": { US: "Installment", GB: "Instalment", CA: "Instalment", NZ: "Instalment" }, 675 "Practise": { US: "Practice", GB: "Practise", CA: "Practise", NZ: "Practise" }, 676 "Acknowledgement":{ US: "Acknowledgment",GB: "Acknowledgement",CA: "Acknowledgment",NZ: "Acknowledgement" }, 677 "Manoeuvre": { US: "Maneuver", GB: "Manoeuvre", CA: "Manoeuvre", NZ: "Manoeuvre" }, 678 "Paediatric": { US: "Pediatric", GB: "Paediatric", CA: "Paediatric", NZ: "Paediatric" } 679 680/* 681 "Recess / Break": { US: "Recess", GB: "Break Time", CA: "Recess", NZ: "Morning Tea /
681Lunch" }, 682 "Relief Teacher": { US: "Substitute Teacher", GB: "Supply Teacher", CA: "Substitute Teacher", NZ: "Relief Teacher" }, 683 "PE": { US: "PE / Gym", GB: "PE", CA: "PE", NZ: "PE" }, 684 "Timetable": { US: "Schedule", GB: "Timetable", CA: "Schedule", NZ: "Timetable" }, 685 "Learning Support": { US: "SPED", GB: "SEN", CA: "Special Education", NZ: "SEN / Learning Support"}, 686 "Gifted & Talented": { US: "Gifted and Talented", GB: "More Able / G&T", CA: "Gifted", NZ: "Extension / Gifted" }, 687 "Enrolment": { US: "Enrollment", GB: "Enrolment", CA: "Enrolment", NZ: "Enrolment" }, 688 "Labour": { US: "Labor", GB: "Labour", CA: "Labour", NZ: "Labour" }, 689 "Licence": { US: "License", GB: "Licence", CA: "Licence", NZ: "Licence" }, 690 "Ageing": { US: "Aging", GB: "Ageing", CA: "Ageing", NZ: "Ageing" }, 691 "Tonne": { US: "Ton", GB: "Tonne", CA: "Tonne", NZ: "Tonne" }, 692 "Modelled": { US: "Modeled", GB: "Modelled", CA: "Modelled", NZ: "Modelled" }, 693 "Fulfil": { US: "Fulfill", GB: "Fulfil", CA: "Fulfil", NZ: "Fulfil" }, 694 "Counsellor": { US: "Counselor", GB: "Counsellor", CA: "Counsellor", NZ: "Counsellor" }, 695 "Dialogue": { US: "Dialog", GB: "Dialogue", CA: "Dialogue", NZ: "Dialogue" } 696 */ 697 698}; 699 700 701 702 function preserveCase(from, to) { 703 if (from === from.toUpperCase()) return to.toUpperCase(); 704 if (from === from.toLowerCase()) return to.toLowerCase(); 705 if (from[0] === from[0].toUpperCase()) return to[0].toUpperCase() + to.slice(1); 706 return to; 707 } 708 709 function replaceTerms(countryCode) { 710 // Walk every text node in the document body once. Skip nodes inside site chrome 711 // (nav/header/footer/country-bar/modals/dropdowns), script/style/noscript, and anything opted out via .no-change. 712 // This captures text directly inside any element â including <div> wrappers that don't use <p>/<span>. 713 const EXCLUDE_SEL = "nav, header, footer, script, style, noscript, .no-change, .country-bar, .modal, .nav-dropdown-menu, .nav-links"; 714 715 const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, { 716 acceptNode: (node) => { 717 if (!node.parentElement) return NodeFilter.FILTER_REJECT; 718 if (!node.nodeValue || !node.nodeValue.trim()) return NodeFilter.FILTER_REJECT; 719 if (node.parentElement.closest(EXCLUDE_SEL)) return NodeFilter.FILTER_REJECT; 720 return NodeFilter.FILTER_ACCEPT; 721 } 722 }); 723 724 const textNodes = []; 725 while (walker.nextNode()) { 726 textNodes.push(walker.currentNode); 727 } 728 729 textNodes.forEach(node => { 730 let text = node.nodeValue; 731 const originalText = text; 732 733 Object.entries(terms).forEach(([key, translations]) => { 734 const target = translations[countryCode]; 735 if (!target || target === "Either") return; 736 737 // Escape regex metacharacters in the key (handles dots, parens, etc.) 738 const safeKey = key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); 739 const pattern = new RegExp(`\\b(${safeKey})(s?)\\b`, "gi"); 740 741 text = text.replace(pattern, (match, word, plural) => { 742 let replaced = preserveCase(word, target); 743 if (plural && !replaced.endsWith('s')) replaced += 's'; 744 return replaced; 745 }); 746 }); 747 748 if (text !== originalText) { 749 node.nodeValue = text; 750 const el = node.parentElement; 751 if (el) { 752 el.style.visibility = "visible"; 753 el.style.transition = "opacity 0.4s ease"; 754 el.style.opacity = 1; 755 } 756 } 757 }); 758 759 760 761 } 762 763 replaceTerms(country); 764 765 document.querySelectorAll("p, b, span, label, li, h1, h2, h3, h4, h5, h6") 766 .forEach(el => { 767 el.style.opacity = "1"; 768 769 }); 770 } 771if (country !== "AU") { 772$('<style>') 773 .prop('type', 'text/css') 774 .html('p, b, span, label, li, h1, h2, h3, h4, h5, h6 { opacity: 1!important; }') 775 .appendTo('head'); 776} 777}); 778 779</script>
779 780 </div> 781 </nav> 782 </header> 783 <main> 784 785<!-- SALE BANNER (only when a sale is live; the 7-days-free banner has been removed) --> 786 787<!-- HERO --> 788<section class="hero hero-stacked"> 789 <div class="container"> 790 <div class="hero-grid"> 791 <div> 792 <div class="eyebrow"><span class="dot"></span> Try Home Plus free for 7 days</div> 793 <h1 class="hero-title">Home Plus pricing.<br><span class="accent">Pick what works.</span></h1> 794 <p class="hero-sub"> 795 One <strong>Home Plus</strong> subscription unlocks everything Studyladder offers. Unlimited activities, a built-in tutor, goal setting, detailed results and rewards. 796 </p> 797 </div> 798 </div> 799 </div> 800</section> 801 802<!-- PRICING â dynamic tiers + 3 price cards per tier --> 803<section class="pricing" id="pricing" style="padding-top:32px;"> 804 <div class="container"> 805 806 <!-- TIER TOGGLE --> 807 <div class="pricing-toggle" role="tablist" aria-label="Plan size"> 808 <button type="button" 809 class="pricing-toggle-btn active" 810 data-tier-target="schoolTier1" 811 role="tab" 812 aria-selected="true"> 813 1 student 814 </button> 815 <button type="button" 816 class="pricing-toggle-btn" 817 data-tier-target="schoolTier6" 818 role="tab" 819 aria-selected="false"> 820 Family <span class="pricing-toggle-meta">up to 4 children</span> 821 </button> 822 </div> 823 824 <!-- TIER PANELS â one per tier, each with 3 price cards --> 825
825<script> 826 var tiers = [ 827 {'max_students': 6, 828 'yearlyProduct': 98, 829 'quarterlyProduct': 36, 830 'monthlyProduct': 15}, 831 {'max_students': 1, 832 'yearlyProduct': 68, 833 'quarterlyProduct': 24, 834 'monthlyProduct': 10}, 835 ] 836 </script>
836 837 838 <div class="pricing-tier-panel active" 839 id="schoolTier1" 840 data-max="1" 841 data-index="1"> 842 <div class="pricing-grid"> 843 844 <!-- MONTHLY --> 845 <div class="price-card parents" data-plan-tier="monthly"> 846 <h3>Monthly</h3> 847 <p class="for-who">Most flexibility</p> 848 <div class="price-amount"> 849 <span class="price-container-2">10</span><span style="font-size: 14px;font-weight: 500;color: #64748B;"> GBP / month</span> 850 </div> 851 <p class="price-detail">Pay month to month. Cancel anytime.</p> 852 <ul> 853 <li>Full Home Plus access</li> 854 <li data-feature="profiles"> 855 One student account </li> 856 <li>7-day free trial</li> 857 </ul> 858 <a href="/account/parent-signup?t=parent&r=&premium=1&source=parent&interval=MONTHLY&type=PARENT&limit=1" class="btn btn-primary subscribe-btn">Start free trial</a> 859 860 </div> 861
861<script> 862 $(document).ready(function(){ 863 $('.price-container-2').html(new Intl.NumberFormat('en-GB', {style: 'currency', currency: 'GBP', minimumFractionDigits:0, maximumFractionDigits:0}).format(10)); 864 }) 865 </script>
865 866 867 <!-- QUARTERLY --> 868 <div class="price-card parents" data-plan-tier="quarterly"> 869 <span class="price-card-badge price-card-badge-soft">A little saving</span> 870 <h3>Quarterly</h3> 871 <p class="for-who">A little saving, more flexibility</p> 872 <div class="price-amount"> 873 <span class="quarterly-price-container-2">24</span><span style="font-size: 14px;font-weight: 500;color: #64748B;"> GBP / quarter</span> 874 </div> 875 <p class="price-detail">Only <span class="updateCurrency" style="display:inline">$</span>8/month effective. Billed every 3 months.</p> 876 <ul> 877 <li>Full Home Plus access</li> 878 <li data-feature="profiles"> 879 One student account </li> 880 <li>7-day free trial</li> 881 </ul> 882 <a href="/account/parent-signup?t=parent&r=&premium=1&source=parent&interval=QUARTERLY&type=PARENT&limit=1" class="btn btn-primary subscribe-btn">Start free trial</a> 883 </div> 884
884<script> 885 $(document).ready(function(){ 886 $('.quarterly-price-container-2').html(new Intl.NumberFormat('en-GB', {style: 'currency', currency: 'GBP', minimumFractionDigits:0, maximumFractionDigits:0}).format(24)); 887 }) 888 </script>
888 889 890 <!-- YEARLY --> 891 <div class="price-card parents featured" data-plan-tier="annual"> 892 <span class="price-card-badge price-card-badge-bold">Best value</span> 893 <h3>Annual</h3> 894 <p class="for-who">Best value, save the most</p> 895 <div class="price-amount"> 896 <span class="yearly-price-container-2">68</span><span style="font-size: 14px;font-weight: 500;color: #64748B;"> GBP / <span class="no-change">year</span></span> 897 </div> 898 <p class="price-detail">Only <span class="updateCurrency" style="display:inline">$</span>6/month effective. Billed once a year.</p> 899 <ul> 900 <li>Full Home Plus access</li> 901 <li data-feature="profiles"> 902 One student account </li> 903 <li>7-day free trial</li> 904 </ul> 905 <a href="/account/parent-signup?t=parent&r=&premium=1&source=parent&interval=YEARLY&type=PARENT&limit=1" class="btn btn-primary subscribe-btn">Start free trial</a> 906 </div> 907
907<script> 908 $(document).ready(function(){ 909 var _fmt = new Intl.NumberFormat('en-GB', {style: 'currency', currency: 'GBP', minimumFractionDigits:0, maximumFractionDigits:0}); 910 $('.yearly-price-container-2').html(_fmt.format(68)); 911 if("GB"=="GB") { 912 $('.updateCurrency').html("£"); 913 } 914 }) 915 </script>
915 916 917 </div> 918 </div> 919 <div class="pricing-tier-panel" 920 id="schoolTier6" 921 data-max="6" 922 data-index="0"> 923 <div class="pricing-grid"> 924 925 <!-- MONTHLY --> 926 <div class="price-card parents" data-plan-tier="monthly"> 927 <h3>Monthly</h3> 928 <p class="for-who">Most flexibility</p> 929 <div class="price-amount"> 930 <span class="price-container-1">15</span><span style="font-size: 14px;font-weight: 500;color: #64748B;"> GBP / month</span> 931 </div> 932 <p class="price-detail">Pay month to month. Cancel anytime.</p> 933 <ul> 934 <li>Full Home Plus access</li> 935 <li data-feature="profiles"> 936 Up to 4 student accounts </li> 937 <li>7-day free trial</li> 938 </ul> 939 <a href="/account/parent-signup?t=parent&r=&premium=1&source=parent&interval=MONTHLY&type=PARENT&limit=6" class="btn btn-primary subscribe-btn">Start free trial</a> 940 941 </div> 942
942<script> 943 $(document).ready(function(){ 944 $('.price-container-1').html(new Intl.NumberFormat('en-GB', {style: 'currency', currency: 'GBP', minimumFractionDigits:0, maximumFractionDigits:0}).format(15)); 945 }) 946 </script>
946 947 948 <!-- QUARTERLY --> 949 <div class="price-card parents" data-plan-tier="quarterly"> 950 <span class="price-card-badge price-card-badge-soft">A little saving</span> 951 <h3>Quarterly</h3> 952 <p class="for-who">A little saving, more flexibility</p> 953 <div class="price-amount"> 954 <span class="quarterly-price-container-1">36</span><span style="font-size: 14px;font-weight: 500;color: #64748B;"> GBP / quarter</span> 955 </div> 956 <p class="price-detail">Only <span class="updateCurrency" style="display:inline">$</span>12/month effective. Billed every 3 months.</p> 957 <ul> 958 <li>Full Home Plus access</li> 959 <li data-feature="profiles"> 960 Up to 4 student accounts </li> 961 <li>7-day free trial</li> 962 </ul> 963 <a href="/account/parent-signup?t=parent&r=&premium=1&source=parent&interval=QUARTERLY&type=PARENT&limit=6" class="btn btn-primary subscribe-btn">Start free trial</a> 964 </div> 965
965<script> 966 $(document).ready(function(){ 967 $('.quarterly-price-container-1').html(new Intl.NumberFormat('en-GB', {style: 'currency', currency: 'GBP', minimumFractionDigits:0, maximumFractionDigits:0}).format(36)); 968 }) 969 </script>
969 970 971 <!-- YEARLY --> 972 <div class="price-card parents featured" data-plan-tier="annual"> 973 <span class="price-card-badge price-card-badge-bold">Best value</span> 974 <h3>Annual</h3> 975 <p class="for-who">Best value, save the most</p> 976 <div class="price-amount"> 977 <span class="yearly-price-container-1">98</span><span style="font-size: 14px;font-weight: 500;color: #64748B;"> GBP / <span class="no-change">year</span></span> 978 </div> 979 <p class="price-detail">Only <span class="updateCurrency" style="display:inline">$</span>9/month effective. Billed once a year.</p> 980 <ul> 981 <li>Full Home Plus access</li> 982 <li data-feature="profiles"> 983 Up to 4 student accounts </li> 984 <li>7-day free trial</li> 985 </ul> 986 <a href="/account/parent-signup?t=parent&r=&premium=1&source=parent&interval=YEARLY&type=PARENT&limit=6" class="btn btn-primary subscribe-btn">Start free trial</a> 987 </div> 988
988<script> 989 $(document).ready(function(){ 990 var _fmt = new Intl.NumberFormat('en-GB', {style: 'currency', currency: 'GBP', minimumFractionDigits:0, maximumFractionDigits:0}); 991 $('.yearly-price-container-1').html(_fmt.format(98)); 992 if("GB"=="GB") { 993 $('.updateCurrency').html("£"); 994 } 995 }) 996 </script>
996 997 998 </div> 999 </div> 1000 1001 <p class="pricing-footnote" style="text-align:center; color:#64748B; margin: 28px auto 0; font-size: 14px; max-width: 620px; line-height: 1.5;">All subscriptions automatically renew. Cancel anytime. You can link your child's school account to a parent subscription — supervision only <a href="/account/parent-signup?t=parent&r=">click here</a>.</p> 1002 </div> 1003</section> 1004 1005<!-- THE MATHS MAKES SENSE â value comparison vs private tutor --> 1006<section class="value"> 1007 <div class="container"> 1008 <div class="section-eyebrow">The maths makes sense</div> 1009 <h2 class="section-title">Less than one tutor session, for a whole year</h2> 1010 <p class="section-sub">Private tutoring works, but it costs hundreds per term and books out fast. Home Plus gives you a tutor that's always on, for a fraction of the price.</p> 1011 1012 <div class="compare-table value-compare"> 1013 <div class="compare-row compare-row-head"> 1014 <div class="compare-cell compare-cell-label"></div> 1015 <div class="compare-cell compare-cell-other"> 1016 <div class="compare-col-tag">Private tutor</div> 1017 <div class="compare-col-rate">£60–£100<span> / hour</span></div> 1018 </div> 1019 <div class="compare-cell compare-cell-us"> 1020 <div class="compare-col-tag">Home Plus annual</div> 1021 <div class="compare-col-rate">£1.31<span> / week</span></div> 1022 </div> 1023 </div> 1024 1025 <div class="compare-row"> 1026 <div class="compare-cell compare-cell-label">Time</div> 1027 <div class="compare-cell compare-cell-other">1 hour a week</div> 1028 <div class="compare-cell compare-cell-us">Unlimited, every day</div> 1029 </div> 1030 1031 <div class="compare-row"> 1032 <div class="compare-cell compare-cell-label">Subjects</div> 1033 <div class="compare-cell compare-cell-other">One subject</div> 1034 <div class="compare-cell compare-cell-us">Mathematics, English and Science</div> 1035 </div> 1036 1037 <div class="compare-row"> 1038 <div class="compare-cell compare-cell-label">Children</div> 1039 <div class="compare-cell compare-cell-other">One child</div> 1040 <div class="compare-cell compare-cell-us">Add siblings on the family plan</div> 1041 </div> 1042 1043 <div class="compare-row"> 1044 <div class="compare-cell compare-cell-label">Schedule</div> 1045 <div class="compare-cell compare-cell-other">Bound to a fixed weekly time</div> 1046 <div class="compare-cell compare-cell-us">Use it whenever, no booking</div> 1047 </div> 1048 1049 <div class="compare-row compare-row-total"> 1050 <div class="compare-cell compare-cell-label">Cost per year</div> 1051 <div class="compare-cell compare-cell-other"><strong>£3,000+</strong></div> 1052 <div class="compare-cell compare-cell-us"><strong>£68</strong> GBP</div> 1053 </div> 1054 </div> 1055 1056 <p class="value-note">Tutor pricing based on <span class="au-only">typical Australian rates</span><span class="intl-only">typical hourly rates</span>. Home Plus pricing is the single-student annual plan at £68/year GBP. Family plan available from £98/year for up to 4 children.</p> 1057 </div> 1058</section> 1059 1060<!-- STAT STRIP --> 1061<section class="stat-strip"> 1062 <div class="container"> 1063 <div class="stat-strip-grid"> 1064 <div class="stat-strip-item"> 1065 <div class="stat-strip-num">15+</div> 1066 <div class="stat-strip-label"><span class="au-only">Years building Studyladder for Aussie kids</span><span class="intl-only">Years building Studyladder for primary kids</span></div> 1067 </div> 1068 <div class="stat-strip-item"> 1069 <div class="stat-strip-num">17k+</div> 1070 <div class="stat-strip-label">Curriculum-aligned activities included</div> 1071 </div> 1072 <div class="stat-strip-item"> 1073 <div class="stat-strip-num">4</div> 1074 <div class="stat-strip-label">Children covered on one Home Plus account</div> 1075 </div> 1076 <div class="stat-strip-item"> 1077 <div class="stat-strip-num">7</div> 1078 <div class="stat-strip-label">Days free trial on every plan</div> 1079 </div> 1080 </div> 1081 </div> 1082</section> 1083 1084<!-- VIDEO TOUR --> 1085<section class="tour" id="tour"> 1086 <div class="container"> 1087 <div class="section-eyebrow">See it in action</div> 1088 <h2 class="section-title">A quick tour of Home Plus</h2> 1089 <p class="section-sub">90 seconds of what your child sees, what you see, and why kids actually keep coming back.</p> 1090 1091 <div class="video-frame"> 1092 <div class="video-player" id="videoPlayer" data-video-id="H6YiUu3dYUc" data-video-label="Home Plus tour"> 1093 <picture> 1094 <source type="image/webp" srcset="https://static.studyladder.co.uk/cdn/site/fa/4dcff220af61.webp"> 1095 <img src="https://static.studyladder.co.uk/cdn/site/80/e8a8e8f1b253.png" alt="Studyladder Home Plus, preview of the tour video" class="video-poster-img"> 1096 </picture> 1097 <div class="video-poster-overlay"></div> 1098 <button class="video-play-btn" aria-label="Play tour video" type="button"> 1099 <svg viewBox="0 0 24 24" fill="white" width="32" height="32">
1099<path d="M8 5v14l11-7z"/></svg> 1100 </button> 1101 <div class="video-meta"> 1102 <div class="video-title">Studyladder Home Plus, a 90-second tour</div> 1103 <div class="video-duration">1:28</div> 1104 </div> 1105 </div> 1106 </div> 1107 </div> 1108</section> 1109 1110<!-- PARENT TESTIMONIALS --> 1111<section class="testimonials testimonials-cream"> 1112 <div class="container"> 1113 <div class="section-eyebrow">What parents say</div> 1114 <h2 class="section-title">Real reviews from real Studyladder parents</h2> 1115 <p class="section-sub"><span class="au-only">Australian families</span><span class="intl-only">Families worldwide</span> have been subscribing to Studyladder since 2009. Here's what some of them say.</p> 1116 <div class="test-grid"> 1117 1118 <div class="test-card"> 1119 <div class="test-stars">★★★★★</div> 1120 <p class="test-quote">"My children love it and it's very user-friendly. It makes learning fun and keeps them motivated at school and at home."</p> 1121 <div class="test-author"> 1122 <div class="test-avatar">S</div> 1123 <div> 1124 <div class="test-name">Swendhi David</div> 1125 <div class="test-role">Parent · AU</div> 1126 </div> 1127 </div> 1128 </div> 1129 1130 <div class="test-card"> 1131 <div class="test-stars">★★★★★</div> 1132 <p class="test-quote">"Studyladder has provided great learning activities for my child for years. It reinforces both numeracy and literacy skills perfectly."</p> 1133 <div class="test-author"> 1134 <div class="test-avatar b">N</div> 1135 <div> 1136 <div class="test-name">Nick Wills</div> 1137 <div class="test-role">Parent · AU</div> 1138 </div> 1139 </div> 1140 </div> 1141 1142 <div class="test-card"> 1143 <div class="test-stars">★★★★★</div> 1144 <p class="test-quote">"My son has recently started using Studyladder and absolutely loves doing his homework through it. I've never seen him so motivated."</p> 1145 <div class="test-author"> 1146 <div class="test-avatar c">M</div> 1147 <div> 1148 <div class="test-name">Maree</div> 1149 <div class="test-role">Parent</div> 1150 </div> 1151 </div> 1152 </div> 1153 1154 </div> 1155 </div> 1156</section> 1157 1158<!-- WHAT YOU GET (tabbed benefits) --> 1159<section class="benefits"> 1160 <div class="container"> 1161 <div class="section-eyebrow">What's inside Home Plus</div> 1162 <h2 class="section-title">Everything your child needs in one subscription</h2> 1163 <p class="section-sub">From step-by-step tutorials to printable certificates, here's what your Home Plus subscription unlocks.</p> 1164 1165 <div class="benefits-tabs" role="tablist" aria-label="Home Plus benefits"> 1166 <button type="button" class="benefits-tab active" role="tab" aria-selected="true" aria-controls="benefit-panel-unlimited" id="benef
1166its-tab-unlimited" data-tab="unlimited"> 1167 <span class="benefits-tab-icon" style="background:var(--blue-soft);color:var(--blue);"> 1168 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 1-6 6 6 6 0 0 1-6-6"/><path d="M12 14v4"/><path d="M8 18h8"/><path d="M12 2v4"/></svg> 1169 </span> 1170 <span class="benefits-tab-label">Unlimited learning</span> 1171 </button> 1172 <button type="button" class="benefits-tab" role="tab" aria-selected="false" aria-controls="benefit-panel-tutor" id="benefits-tab-tutor" data-tab="tutor"> 1173 <span class="benefits-tab-icon" style="background:var(--orange);color:var(--orange-deep);"> 1174 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg> 1175 </span> 1176 <span class="benefits-tab-label">Home Tutor</span> 1177 </button> 1178 <button type="button" class="benefits-tab" role="tab" aria-selected="false" aria-controls="benefit-panel-track" id="benef
1178its-tab-track" data-tab="track"> 1179 <span class="benefits-tab-icon" style="background:var(--purple);color:var(--purple-deep);"> 1180 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg> 1181 </span> 1182 <span class="benefits-tab-label">Assign & track</span> 1183 </button> 1184 <button type="button" class="benefits-tab" role="tab" aria-selected="false" aria-controls="benefit-panel-rewards" id="benefits-tab-rewards" data-tab="rewards"> 1185 <span class="benefits-tab-icon" style="background:var(--green);color:var(--green-deep);"> 1186 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-4v-7H10v7H6a2 2 0 0 1-2-2V9z"/></svg> 1187 </span> 1188 <span class="benefits-tab-label">Treehouse & avatars</span> 1189 </button> 1190 </div> 1191 1192 <div class="benefits-panels"> 1193 1194 <div class="benefits-panel active" role="tabpanel" id="benefit-panel-unlimited" aria-labelledby="benefits-tab-unlimited"> 1195 <div class="benefits-panel-content"> 1196 <span class="benefits-panel-tag" style="background:var(--blue-soft);color:var(--blue);">Unlimited learning</span> 1197 <h3>No daily limits, just learning</h3> 1198 <p>Free accounts cap each child at three activities a day. Home Plus removes the cap so your child can practise as much as they want, across Mathematics, English and Science.</p> 1199 <ul class="benefits-list"> 1200 <li>Full access to 17k+ curriculum-aligned activities</li> 1201 <li>Premium activities, games and videos unlocked</li> 1202 <li>Each child works at their own pace, in their own year level</li> 1203 </ul> 1204 </div> 1205 <div class="benefits-panel-visual benefits-visual-blue has-screen"> 1206 <div class="subject-screen-card"> 1207 <picture> 1208 <source type="image/webp" srcset="https://static.studyladder.co.uk/cdn/site/c3/8a02edbeff4e.webp"> 1209 <img src="https://static.studyladder.co.uk/cdn/site/18/7d862bfe9b4d.png" alt="Studyladder monthly parent report showing each child's progress across subjects"> 1210 </picture> 1211 </div> 1212 </div> 1213 </div> 1214 1215 <div class="benefits-panel" role="tabpanel" id="benefit-panel-tutor" aria-labelledby="benefits-tab-tutor" hidden> 1216 <div class="benefits-panel-content"> 1217 <span class="benefits-panel-tag" style="background:var(--orange);color:var(--orange-deep);">Home Tutor</span> 1218 <h3>A built-in tutor at a fraction of the cost</h3> 1219 <p>Step-by-step tutorials, animations and worked examples walk your child through every topic, so you don't need to remember Year 4 long division to help them through it.</p> 1220 <ul class="benefits-list"> 1221 <li>Tutorials covering Mathematics F to Year 6</li> 1222 <li>Learning to Read and Early Literacy modules</li> 1223 <li>Watch, then practise, then test, in one place</li> 1224 </ul> 1225 </div> 1226 <div class="benefits-panel-visual benefits-visual-orange has-screen"> 1227 <div class="subject-screen-card"> 1228 <picture> 1229 <source type="image/webp" srcset="https://static.studyladder.co.uk/cdn/site/49/cb975670b584.webp"> 1230 <img src="https://static.studyladder.co.uk/cdn/site/86/6d3b3f02846b.png" alt="Studyladder Home Tutor lessons, organised so kids can watch, practise and test in one place"> 1231 </picture> 1232 </div> 1233 </div> 1234 </div> 1235 1236 <div class="benefits-panel" role="tabpanel" id="benefit-panel-track" aria-labelledby="benefits-tab-track" hidden> 1237 <div class="benefits-panel-content"> 1238 <span class="benefits-panel-tag" style="background:var(--purple);color:var(--purple-deep);">Assign & track</span> 1239 <h3>Set the direction. See every result.</h3> 1240 <p>You drive what your child works on. Set learning goals, assign specific topics or activities, and see detailed reports of every result they've ever logged.</p> 1241 <ul class="benefits-list"> 1242 <li>Set daily or weekly goals per child</li> 1243 <li>Assign specific tasks, topics or skills</li> 1244 <li>See every result, in full detail</li> 1245 </ul> 1246 </div> 1247 <div class="benefits-panel-visual benefits-visual-purple has-screen"> 1248 <div class="subject-screen-card"> 1249 <picture> 1250 <source type="image/webp" srcset="https://static.studyladder.co.uk/cdn/site/3b/542d0eec7f20.webp"> 1251 <img src="https://static.studyladder.co.uk/cdn/site/8a/8b163c5d5053.png" alt="Studyladder detailed results view showing every activity, score and skill mastery for a child"> 1252 </picture> 1253 </div> 1254 </div> 1255 </div> 1256
1257 <div class="benefits-panel" role="tabpanel" id="benefit-panel-rewards" aria-labelledby="benefits-tab-rewards" hidden> 1258 <div class="benefits-panel-content"> 1259 <span class="benefits-panel-tag" style="background:var(--green);color:var(--green-deep);">Treehouse & avatars</span> 1260 <h3>A reason to keep going</h3> 1261 <p>Kids earn points as they learn and spend them in a personal treehouse: decorate the rooms, unlock outfits, and look forward to coming back tomorrow.</p> 1262 <ul class="benefits-list"> 1263 <li>Treehouse extension to decorate and customise</li> 1264 <li>Full avatar outfit collection unlocked</li> 1265 <li>New costumes added over time</li> 1266 </ul> 1267 </div> 1268 <div class="benefits-panel-visual benefits-visual-green has-screen"> 1269 <div class="subject-screen-card"> 1270 <picture> 1271 <source type="image/webp" srcset="https://static.studyladder.co.uk/cdn/site/20/f55fa97f402a.webp"> 1272 <img src="https://static.studyladder.co.uk/cdn/site/51/58a4e018e488.png" alt="Studyladder avatar and treehouse collection that kids unlock as they learn"> 1273 </picture> 1274 </div> 1275 </div> 1276 </div> 1277 1278 </div> 1279 </div> 1280</section> 1281 1282<!-- FAQ --> 1283<section class="faq faq-on-white" id="faq"> 1284 <div class="container"> 1285 <div class="faq-grid"> 1286 <div class="faq-intro"> 1287 <div class="section-eyebrow" style="text-align:left;">Pricing questions</div> 1288 <h2 class="faq-title">Quick answers about Home Plus</h2> 1289 <p>Still wondering something? <a href="/about/contact-us">Contact our support team →</a></p> 1290 </div> 1291 <div class="faq-list"> 1292 1293 <details class="faq-item" open> 1294 <summary>What does the 7-day free trial include?</summary> 1295 <div class="faq-body"> 1296 <p>Full Home Plus access for every feature on your chosen plan. Unlimited activities, the Home Tutor program, premium games, certificates, all of it. Cancel anytime during the trial, no questions asked.</p> 1297 </div> 1298 </details> 1299 1300 <details class="faq-item"> 1301 <summary>How does the family plan work?</summary> 1302 <div class="faq-body"> 1303 <p>One Home Plus subscription covers up to four children on a single parent account. Each child gets their own profile, year level, progress and rewards. You see a combined dashboard so you can check on all your kids in one place.</p> 1304 </div> 1305 </details> 1306 1307 <details class="faq-item"> 1308 <summary>What's the difference between Monthly, Quarterly and Annual?</summary> 1309 <div class="faq-body"> 1310 <p>Same Home Plus access, different billing frequency. Monthly is the most flexible (cancel any time). Quarterly is billed every 3 months. Annual is billed once a year and is the best value of the three.</p> 1311 </div> 1312 </details> 1313 1314 <details class="faq-item"> 1315 <summary>Can I cancel anytime?</summary> 1316 <div class="faq-body"> 1317 <p>Yes. Cancel from your account dashboard at any time during the trial or after. If you cancel during a billing period, you keep access until the end of that period. No phone calls, no retention scripts.</p> 1318 </div> 1319 </details> 1320 1321 <details class="faq-item"> 1322 <summary>Can I link Home Plus to my child's school account?</summary> 1323 <div class="faq-body"> 1324 <p>Yes. If your child already uses Studyladder at school, a school parent supervision account lets you view their school progress. Home Plus adds full home learning on top. Same login, same dashboard, just way more unlocked.</p> 1325 </div> 1326 </details> 1327 1328 </div> 1329 </div> 1330 </div> 1331</section> 1332 1333<!-- FINAL CTA --> 1334<section class="final-cta"> 1335 <div class="container"> 1336 <div class="final-cta-inner"> 1337 <h2>Ready to build brighter learners?</h2> 1338 <p>Join 30,000+ teachers, 10,000+ schools and <span class="au-only">thousands of Australian families</span><span class="intl-only">thousands of families</span> already learning with Studyladder across 50+ countries.</p> 1339 <div class="final-cta-btns"> 1340 <a href="#pricing" class="btn btn-primary btn-lg">View plans</a> 1341 <a href="/about/teacher-school-pricing?t=t" class="btn btn-primary btn-lg">Teacher plans</a> 1342 <a href="/about/teacher-school-pricing?t=s" class="btn btn-primary btn-lg">School plans</a> 1343 </div> 1344 </div> 1345 </div> 1346</section> 1347 1348<!-- STICKY CTA --> 1349<div class="sticky-cta" id="stickyCta" data-sticky-trigger="pricing" aria-hidden="true"> 1350 <div class="sticky-cta-inner"> 1351 <div class="sticky-cta-text"> 1352 <strong>Ready to start?</strong>
1353 <span>7-day free trial · Cancel anytime</span> 1354 </div> 1355 <a href="#pricing" class="btn btn-primary sticky-cta-btn">Start free trial →</a> 1356 </div> 1357</div> 1358 1359<!-- PRICING TIER TOGGLE JS -->
1360<script> 1361(function(){ 1362 var buttons = document.querySelectorAll('.pricing-toggle .pricing-toggle-btn'); 1363 var panels = document.querySelectorAll('.pricing-tier-panel'); 1364 if (!buttons.length || !panels.length) return; 1365 1366 buttons.forEach(function(btn){ 1367 btn.addEventListener('click', function(){ 1368 var target = btn.getAttribute('data-tier-target'); 1369 1370 buttons.forEach(function(b){ 1371 b.classList.remove('active'); 1372 b.setAttribute('aria-selected','false'); 1373 }); 1374 btn.classList.add('active'); 1375 btn.setAttribute('aria-selected','true'); 1376 1377 panels.forEach(function(p){ 1378 if (p.id === target) { 1379 p.classList.add('active'); 1380 } else { 1381 p.classList.remove('active'); 1382 } 1383 }); 1384 }); 1385 }); 1386})(); 1387</script>
1387 1388 1389<!-- PRICING PAGE STYLE OVERRIDES (cosmetic â no impact on Stripe URLs or form fields) --> 1390<style> 1391/* Tier toggle â fully rounded pill */ 1392.sl-marketing .pricing-toggle { 1393 display: inline-flex; 1394 background: #F1F5F9; 1395 padding: 5px; 1396 border-radius: 999px; 1397 margin: 0 auto 28px; 1398 gap: 4px; 1399} 1400.sl-marketing .pricing .pricing-toggle { 1401 display: flex; 1402 max-width: 460px; 1403 margin: 0 auto 28px; 1404 border-radius: 999px; 1405} 1406.sl-marketing .pricing-toggle-btn { 1407 flex: 1; 1408 border: 0; 1409 background: transparent; 1410 padding: 10px 18px; 1411 border-radius: 999px; 1412 font-size: 14px; 1413 font-weight: 600; 1414 color: #475569; 1415 cursor: pointer; 1416 transition: background .15s ease, color .15s ease, box-shadow .15s ease; 1417 letter-spacing: -0.01em; 1418 line-height: 1.3; 1419} 1420.sl-marketing .pricing-toggle-btn:hover { color: #0F172A; } 1421.sl-marketing .pricing-toggle-btn.active { 1422 background: #2D5BFF !important; 1423 color: #FFFFFF !important; 1424 box-shadow: 0 1px 3px rgba(45,91,255,0.30), 0 1px 2px rgba(15,23,42,0.06) !important; 1425} 1426.sl-marketing .pricing-toggle-btn.active .pricing-toggle-meta { color: #FFFFFF !important; opacity: 0.85; } 1427.sl-marketing .pricing-toggle-meta { 1428 display: block; 1429 font-size: 11px; 1430 font-weight: 500; 1431 opacity: 0.7;
1432 margin-top: 1px; 1433} 1434 1435/* Tier panel show/hide */ 1436.sl-marketing .pricing-tier-panel { display: none; } 1437.sl-marketing .pricing-tier-panel.active { display: block; } 1438 1439/* Orange CTA buttons on price cards (override parent-pricing.scss blue) */ 1440.sl-marketing .pricing .price-card .btn, 1441.sl-marketing .pricing .price-card a.btn-primary, 1442.sl-marketing .pricing .price-card .subscribe-btn { 1443 background-color: #EA580C !important; 1444 border-color: #EA580C !important; 1445 color: #FFFFFF !important; 1446} 1447.sl-marketing .pricing .price-card .btn:hover, 1448.sl-marketing .pricing .price-card a.btn-primary:hover, 1449.sl-marketing .pricing .price-card .subscribe-btn:hover { 1450 background-color: #C2410C !important; 1451 border-color: #C2410C !important; 1452} 1453.sl-marketing .pricing .price-card .btn:active, 1454.sl-marketing .pricing .price-card a.btn-primary:active, 1455.sl-marketing .pricing .price-card .subscribe-btn:active { 1456 background-color: #FFFFFF !important; 1457 color: #EA580C !important; 1458 border: 1px solid #EA580C !important; 1459 box-shadow: 0 0 0 4px rgba(234,88,12,0.12) !important; 1460 transform: translateY(1px); 1461} 1462 1463/* âââ Sale styling on the annual card âââââââââââââââââââââââââââââââ */ 1464.sl-marketing .price-card.parents.on-sale { 1465 border: 2px solid #DC2626; 1466 box-shadow: 0 12px 32px -12px rgba(220, 38, 38, 0.35); 1467} 1468.sl-marketing .price-card-badge.price-card-badge-sale { 1469 background: #DC2626; 1470 color: #FFFFFF; 1471 font-weight: 700; 1472 letter-spacing: 0.04em; 1473 padding: 5px 12px; 1474 border-radius: 999px; 1475 font-size: 12px; 1476 box-shadow: 0 4px 12px -4px rgba(220, 38, 38, 0.5); 1477} 1478.sl-marketing .price-card .price-amount .price-strike { 1479 display: inline-block; 1480 color: #94A3B8; 1481 text-decoration: line-through; 1482 text-decoration-thickness: 2px; 1483 font-size: 22px; 1484 font-weight: 500; 1485 margin-right: 10px; 1486 vertical-align: middle; 1487} 1488</style> 1489 1490 1491 <style> 1492 /* ------ Footer styling â targets the BS4 markup below ------ */ 1493 /* Force NO margin above the footer at any viewport. Beats the 5em 1494 margin-top in public.css and any other inherited rule. */ 1495 footer.footer, 1496 footer.footer.bg-dark, 1497 .footer.bg-dark { 1498 margin-top: 0 !important; 1499 margin-bottom: 0 !important; 1500 } 1501 @media (min-width: 0) { 1502 footer.footer, 1503 footer.footer.bg-dark, 1504 .footer.bg-dark { margin-top: 0 !important; } 1505 } 1506 @media (min-width: 992px) { 1507 footer.footer, 1508 footer.footer.bg-dark, 1509 .footer.bg-dark { margin-top: 0 !important; } 1510 } 1511 .footer.bg-dark { 1512 background: #0F172A !important; 1513 padding: 56px 0 24px; 1514 color: rgba(255, 255, 255, 0.72); 1515 font-size: 14px; 1516 } 1517 .footer.bg-dark .container { color: rgba(255, 255, 255, 0.72); } 1518 .footer.bg-dark a { transition: color .15s ease, background .15s ease; } 1519 .footer.bg-dark a.text-light { color: rgba(255, 255, 255, 0.65) !important; } 1520 .footer.bg-dark a.text-light:hover { color: #ffffff !important; text-decoration: none; } 1521 1522 /* Link lists â force size + weight + colour against public.css */ 1523 .footer.bg-dark ul.list-unstyled li a, 1524 .footer.bg-dark ul.list-unstyled li a.text-light { 1525 font-size: 14px !important; 1526 font-weight: 400 !important; 1527 color: rgba(255, 255, 255, 0.65) !important; 1528 line-height: 1.5 !important; 1529 letter-spacing: 0 !important; 1530 text-transform: none !important; 1531 } 1532 .footer.bg-dark ul.list-unstyled li a:hover, 1533 .footer.bg-dark ul.list-unstyled li a.text-light:hover { 1534 color: #ffffff !important; 1535 text-decoration: none !important; 1536 } 1537 .footer.bg-dark .logo { display: inline-block; } 1538 .footer.bg-dark .logo img { max-width: 160px; max-height: 36px; width: auto; height: auto; } 1539 .footer.bg-dark p { color: rgba(255, 255, 255, 0.65); font-size: 14px; line-height: 1.55; } 1540 1541 /* Column headers â !important needed because public.css sets h4 font-size !important globally */ 1542 .footer.bg-dark h4, 1543 .footer.bg-dark .sl-footer-heading { 1544 font-size: 12px !important; 1545 font-weight: 700 !important; 1546 text-transform: uppercase !important; 1547 letter-spacing: 0.08em !important; 1548 color: #ffffff !important; 1549 margin-bottom: 14px !important; 1550 padding-bottom: 0 !important; 1551 line-height: 1.4 !important; 1552 } 1553 .footer.bg-dark ul.list-unstyled { padding: 0; margin: 0; } 1554 .footer.bg-dark ul.list-unstyled li { margin-bottom: 10px; line-height: 1.5; } 1555 1556 /* Social icons â soft circular pill on hover */ 1557 .sl-footer-social { display: inline-flex; align-items: center; margin-top: 4px; } 1558 .sl-footer-social a { 1559 display: inline-flex; 1560 align-items: center; 1561 justify-content: center; 1562 width: 36px; 1563 height: 36px; 1564 border-radius: 50%; 1565 background: rgba(255, 255, 255, 0.08); 1566 margin-left: 0 !important; 1567 } 1568 .sl-footer-social a + a { margin-left: 8px !important; } 1569 .sl-footer-social a:hover { background: rgba(255, 255, 255, 0.18); } 1570 .sl-footer-social svg { width: 18px !important; height: 18px !important; display: block; } 1571 .sl-footer-social a.text-light { color: #ffffff !important; } 1572 1573 /* Bottom row */ 1574 .footer.bg-dark .row.no-gutters { 1575 border-top: 1px solid rgba(255, 255, 255, 0.08); 1576 padding-top: 18px; 1577 margin-top: 28px !important; 1578 font-size: 12px; 1579 color: rgba(255, 255, 255, 0.5); 1580 align-items: center; 1581 line-height: 1.6; 1582 } 1583 .footer.bg-dark .copyright { color: rgba(255, 255, 255, 0.5); font-size: 12px; } 1584 1585 /* Legal links list (bottom-right) */ 1586 .sl-footer-legal { 1587 list-style: none; 1588 padding: 0; 1589 margin: 0; 1590 display: flex; 1591 gap: 22px; 1592 justify-content: flex-end; 1593 } 1594 .sl-footer-legal li { margin: 0; padding: 0; } 1595 .footer.bg-dark .sl-footer-legal a, 1596 .footer.bg-dark .sl-footer-legal a.text-light { 1597 color: rgba(255, 255, 255, 0.5) !important; 1598 font-size: 12px !important; 1599 font-weight: 400 !important; 1600 line-height: 1.6 !important; 1601 } 1602 .footer.bg-dark .sl-footer-legal a:hover, 1603 .footer.bg-dark .sl-footer-legal a.text-light:hover { 1604 color: #ffffff !important; 1605 text-decoration: none !important; 1606 } 1607 @media (max-width: 767.98px) { 1608 .sl-footer-legal { justify-content: center; gap: 18px; margin-bottom: 8px; } 1609 } 1610 1611 /* Country switcher (student-only) inherits theme */ 1612 .footer.bg-dark #lc_select { 1613 background-color: rgba(255, 255, 255, 0.08); 1614 border-color: rgba(255, 255, 255, 0.15); 1615 color: #ffffff; 1616 } 1617 1618 /* Tighten typography on small screens */ 1619 @media (max-width: 991.98px) { 1620 .footer.bg-dark { padding: 36px 0 20px; text-align: center; } 1621 .footer.bg-dark h4 { margin-top: 12px; } 1622 .sl-footer-social { justify-content: center; display: flex; } 1623 } 1624 </style> 1625 1626 </main> 1627 <div class="d-none d-print-block text-center"> 1628 <a href="https://studyladder.com.au" title="Studyladder - Home" class="text-center mt-4"><img style="width: 150px !important;" src="https://static.studyladder.co.uk/cdn/site/13/6f597fea9532.png"></a> 1629 </div> 1630 1631 <footer class="footer bg-dark text-light d-print-none"> 1632 <div class="container"> 1633 1634 1635 <div class="row text-center text-lg-left pb-3"> 1636 1637 <!-- Brand column --> 1638 <div class="col-lg-4 col-md-12 py-4 py-lg-0"> 1639 <a class="logo d-inline-block mb-3" href="/"><img src="https://static.studyladder.co.uk/cdn/site/c7/cbe28b2ff048.png" alt="Studyladder"></a> 1640 <p class="mb-3">Helping teachers, parents and schools inspire confident learners, one activity at a time.</p> 1641 <div class="sl-footer-social"> 1642 <a class="text-light" aria-label="Studyladder on Facebook" href="https://www.facebook.com/Studyladder/" target="_blank" rel="noopener"> 1643 <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M9.198 21.5h4v-8.01h3.604l.396-3.98h-4V7.5c0-1.103.897-2 2-2h2v-4h-2c-3.309 0-6 2.691-6 6v2.01H7.198l-.396 3.98h2.396v8.01z"/></svg> 1644 </a> 1645 <a class="text-light" aria-label="Studyladder on Instagram" href="https://www.instagram.com/studyladder/" target="_blank" rel="noopener"> 1646 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg> 1647 </a> 1648 <a class="text-light" aria-label="Studyladder on X / Twitter" href="https://twitter.com/studyladder" target="_blank" rel="noopener"> 1649 <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg> 1650 </a> 1651 <a class="text-light" aria-label="Studyladder on YouTube" href="https://www.youtube.com/user/StudyLadder" target="_blank" rel="noopener"> 1652 <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg> 1653 </a> 1654 </div> 1655 1656 </div> 1657 1658 <!-- Who we help --> 1659 <div class="col-lg-2 col-md-6 py-4 py-lg-0"> 1660 <h4 class="sl-footer-heading">Who we help</h4> 1661 <ul class="list-unstyled"> 1662 <li><a class="text-light" href="/about/parent">For parents</a></li> 1663 <li><a class="text-light" href="/about/teacher">For teachers</a></li> 1664 <li><a class="text-light" href="/about/teacher-school-pricing?t=s">For schools</a></li> 1665 <li><a class="text-light" href="/about/tutor">For tutors</a></li> 1666 </ul> 1667 </div> 1668 1669 <!-- Subjects --> 1670 <div class="col-lg-2 col-md-6 py-4 py-lg-0"> 1671 <h4 class="sl-footer-heading">Subjects</h4> 1672 <ul class="list-unstyled"> 1673 <li><a class="text-light" href="/about/subjects-mathematics">Mathematics</a></li> 1674 <li><a class="text-light" href="/about/subjects-english">English</a></li> 1675 <li><a class="text-light" href="/about/subjects-science">Science</a></li> 1676 </ul> 1677 </div> 1678 1679 <!-- Learn more --> 1680 <div class="col-lg-2 col-md-6 py-4 py-lg-0"> 1681 <h4 class="sl-footer-heading">Learn more</h4> 1682 <ul class="list-unstyled"> 1683 <li><a class="text-light" href="/about">About us</a></li> 1684 <li><a class="text-light" href="/about/features">Features</a></li> 1685 <li><a class="text-light" href="/info/upgrade-benefits">Home Plus benefits</a></li> 1686 <li><a class="text-light" href="#" data-toggle="modal" data-target="#pricingModal">Pricing</a></li> 1687 <li><a class="text-light" href="/about/testimonials">Testimonials</a></li> 1688 <li><a class="text-light" href="/blog">Blog</a></li> 1689 </ul> 1690 </div> 1691 1692 <!-- Support --> 1693 <div class="col-lg-2 col-md-6 py-4 py-lg-0"> 1694 <h4 class="sl-footer-heading">Support</h4> 1695 <ul class="list-unstyled"> 1696 <li><a class="text-light" href="/about/faqs">FAQs</a></li> 1697 <li><a class="text-light" href="/about/contact-us">Contact us</a></li> 1698 </ul> 1699 </div> 1700 1701 </div> 1702 1703 <div class="row no-gutters small d-flex justify-content-between mt-lg-5 mb-2"> 1704 <div class="copyright text-center text-md-left order-2 order-md-1 pt-1 pt-lg-0">© 2026 Studyladder Pty Ltd</div> 1705 <ul class="sl-footer-legal text-center text-lg-left order-1 order-md-2"> 1706 <li><a class="text-light" href="/about/privacy">Privacy</a></li> 1707 <li><a class="text-light" href="/about/terms">Terms</a></li> 1708 <li><a class="text-light" href="/info/gdpr">GDPR</a></li> 1709 </ul> 1710 </div> 1711 </div> 1712 </footer> 1713 1714
1714<script> 1715 $(function(){ 1716 $.ajax({ 1717 url: "/secure/check-subscription-cancelled", 1718 method: "POST", 1719 dataType: "json", 1720 success: function(r){ 1721 if (r.found){ 1722 /*dataLayer.push({ 1723 event: r.event ?? "cancelled", 1724 reason: r.reason ?? "not given", 1725 feedback: r.feedback ?? "not given", 1726 comment: r.comment ?? "not given", 1727 user: r.user ?? "", 1728 user_type: r.type ?? "", 1729 plan_type: r.plan ?? "", 1730 domain_region: "GB" 1731 })*/ 1732 } 1733 } 1734 }) 1735 }) 1736 </script>
1736 1737 1738 <!-- PRICING MODAL â opened by any [data-toggle="modal" data-target="#pricingModal"] trigger. 1739 Loaded site-wide from footer-bs4.phtml so it works for student, teacher, parent and public users. --> 1740<div id="pricingModal" class="modal fade sl-pricing-modal" role="dialog" aria-hidden="true" tabindex="-1" aria-labelledby="pricingModalTitle"> 1741 <div class="modal-dialog modal-dialog-centered" role="document"> 1742 <div class="modal-content sl-pricing-modal-content"> 1743 1744 <button type="button" class="sl-pricing-modal-close" data-dismiss="modal" aria-label="Close"> 1745 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> 1746 </button> 1747 1748 <div class="sl-pricing-modal-header"> 1749 <div class="sl-pricing-modal-eyebrow">Pricing</div> 1750 <h2 class="sl-pricing-modal-title" id="pricingModalTitle">See pricing for…</h2> 1751 <p class="sl-pricing-modal-sub">Pick the option that describes you, we'll show the right plans.</p> 1752 </div> 1753 1754 <div class="sl-pricing-modal-options"> 1755 <a href="https://www.studyladder.co.uk/account/parent-pricing" class="sl-pricing-option"> 1756 <span class="sl-pricing-option-icon sl-pricing-icon-parent"> 1757 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2"/><circle cx="10" cy="7" r="4"/><path d="M19 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> 1758 </span> 1759 <span class="sl-pricing-option-body"> 1760 <strong>Parents & homeschoolers</strong> 1761 <small>Home Plus plans for up to 4 children</small> 1762 </span> 1763 <span class="sl-pricing-option-arrow">→</span> 1764 </a> 1765 1766 <a href="https://www.studyladder.co.uk/about/teacher-school-pricing?t=t" class="sl-pricing-option"> 1767 <span class="sl-pricing-option-icon sl-pricing-icon-teacher"> 1768 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg> 1769 </span> 1770 <span class="sl-pricing-option-body"> 1771 <strong>Teachers</strong> 1772 <small>For one classroom · up to 35 students</small> 1773 </span> 1774 <span class="sl-pricing-option-arrow">→</span> 1775 </a> 1776 1777 <a href="https://www.studyladder.co.uk/about/teacher-school-pricing?t=s" class="sl-pricing-option"> 1778 <span class="sl-pricing-option-icon sl-pricing-icon-school"> 1779 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V7l7-4 7 4v14"/><path d="M9 9h1M9 13h1M9 17h1M14 9h1M14 13h1M14 17h1"/></svg> 1780 </span> 1781 <span class="sl-pricing-option-body"> 1782 <strong>Schools</strong> 1783 <small>Whole-school plans · admin tools included</small> 1784 </span> 1785 <span class="sl-pricing-option-arrow">→</span> 1786 </a> 1787 </div> 1788 1789 </div> 1790 </div> 1791</div> 1792 1793<style> 1794/* Force-correct modal overlay behaviour (sl-marketing.scss styles .modal differently) */ 1795body.sl-marketing #pricingModal, 1796body #pricingModal.sl-pricing-modal { 1797 position: fixed !important; 1798 top: 0 !important; 1799 left: 0 !important; 1800 right: 0 !important; 1801 bottom: 0 !important; 1802 width: 100vw !important; 1803 height: 100vh !important; 1804 max-width: 100vw !important; 1805 max-height: 100vh !important; 1806 margin: 0 !important; 1807 padding: 0 !important; 1808 background: rgba(15, 23, 42, 0) !important; 1809 border: 0 !important; 1810 border-radius: 0 !important; 1811 box-shadow: none !important; 1812 transform: none !important; 1813 overflow-x: hidden !important; 1814 overflow-y: auto !important; 1815 outline: 0 !important; 1816 z-index: 2050 !important; 1817 /* Animation: fade overlay + dialog */ 1818 display: block !important; 1819 opacity: 0; 1820 visibility: hidden; 1821 pointer-events: none; 1822 transition: opacity .22s ease, visibility 0s linear .22s, background-color .22s ease, -webkit-backdrop-filter .22s ease, backdrop-filter .22s ease !important; 1823 -webkit-backdrop-filter: blur(0px); 1824 backdrop-filter: blur(0px); 1825} 1826body.sl-marketing #pricingModal.show, 1827body #pricingModal.sl-pricing-modal.show { 1828 display: block !important; 1829 opacity: 1; 1830 visibility: visible; 1831 pointer-events: auto; 1832 background: rgba(15, 23, 42, 0.78) !important; 1833 -webkit-backdrop-filter: blur(8px) !important; 1834 backdrop-filter: blur(8px) !important; 1835 transition: opacity .22s ease, visibility 0s linear 0s, background-color .22s ease, -webkit-backdrop-filter .22s ease, backdrop-filter .22s ease !important; 1836} 1837body.sl-marketing #pricingModal .modal-dialog, 1838body #pricingModal.sl-pricing-modal .modal-dialog,
1839body.sl-marketing #pricingModal .modal-dialog.modal-dialog-centered, 1840body #pricingModal.sl-pricing-modal .modal-dialog.modal-dialog-centered { 1841 position: fixed !important; 1842 top: 50% !important; 1843 left: 50% !important; 1844 right: auto !important; 1845 bottom: auto !important; 1846 -webkit-transform: translate(-50%, -50%) scale(0.96) !important; 1847 transform: translate(-50%, -50%) scale(0.96) !important; 1848 margin: 0 !important; 1849 padding: 0 !important; 1850 max-width: 520px !important; 1851 width: calc(100vw - 32px) !important; 1852 height: auto !important; 1853 max-height: calc(100vh - 32px) !important; 1854 min-height: 0 !important; 1855 display: block !important; 1856 background: transparent !important; 1857 border: 0 !important; 1858 box-shadow: none !important; 1859 transition: -webkit-transform .25s cubic-bezier(0.4, 0, 0.2, 1), transform .25s cubic-bezier(0.4, 0, 0.2, 1) !important; 1860 z-index: 2060 !important; 1861 flex: none !important; 1862 align-self: auto !important; 1863} 1864body.sl-marketing #pricingModal.show .modal-dialog, 1865body #pricingModal.sl-pricing-modal.show .modal-dialog, 1866body.sl-marketing #pricingModal.show .modal-dialog.modal-dialog-centered, 1867body #pricingModal.sl-pricing-modal.show .modal-dialog.modal-dialog-centered { 1868 -webkit-transform: translate(-50%, -50%) scale(1) !important; 1869 transform: translate(-50%, -50%) scale(1) !important; 1870} 1871body.sl-marketing #pricingModal .modal-dialog-centered::before, 1872body #pricingModal.sl-pricing-modal .modal-dialog-centered::before { 1873 content: none !important; 1874 display: none !important; 1875 height: 0 !important; 1876} 1877body.sl-marketing #pricingModal .sl-pricing-modal-content, 1878body #pricingModal .sl-pricing-modal-content { 1879 position: relative; 1880 background: #FFFFFF !important; 1881 border-radius: 18px !important; 1882 padding: 28px 28px 28px !important; 1883 box-shadow: 0 24px 80px -16px rgba(15, 23, 42, 0.30), 0 4px 12px rgba(15, 23, 42, 0.06) !important; 1884 pointer-events: auto; 1885 width: 100% !important; 1886 max-width: none !important; 1887 border: 0 !important; 1888 transform: none !important; 1889 transition: none !important; 1890 max-height: calc(100vh - 48px); 1891 overflow-y: auto; 1892} 1893 1894/* Close button */ 1895#pricingModal .sl-pricing-modal-close { 1896 position: absolute; 1897 top: 14px; 1898 right: 14px; 1899 width: 32px; 1900 height: 32px; 1901 border-radius: 50%; 1902 border: 0; 1903 background: #F1F5F9; 1904 color: #475569; 1905 display: inline-flex; 1906 align-items: center; 1907 justify-content: center; 1908 cursor: pointer; 1909 padding: 0; 1910 transition: background .15s ease; 1911} 1912#pricingModal .sl-pricing-modal-close:hover { background: #E2E8F0; color: #0F172A; } 1913#pricingModal .sl-pricing-modal-close svg { width: 18px; height: 18px; } 1914 1915/* Header */ 1916#pricingModal .sl-pricing-modal-header { padding: 0 0 18px; } 1917#pricingModal .sl-pricing-modal-eyebrow { 1918 font-size: 13px; 1919 font-weight: 600; 1920 letter-spacing: 0.08em; 1921 text-transform: uppercase; 1922 color: #2D5BFF; 1923 margin: 0 0 8px; 1924} 1925#pricingModal .sl-pricing-modal-title { 1926 font-size: 28px; 1927 font-weight: 700; 1928 color: #0F172A; 1929 margin: 0 0 8px; 1930 letter-spacing: -0.02em; 1931 line-height: 1.2; 1932} 1933#pricingModal .sl-pricing-modal-sub { 1934 font-size: 15px; 1935 color: #64748B; 1936 margin: 4px 0 0; 1937 line-height: 1.45; 1938} 1939 1940/* Options */ 1941#pricingModal .sl-pricing-modal-options { 1942 display: flex; 1943 flex-direction: column; 1944 gap: 10px; 1945 margin: 0; 1946} 1947 1948/* Option cards â with hover slide animation matching the join modal */ 1949#pricingModal .sl-pricing-option { 1950 position: relative; 1951 display: flex; 1952 align-items: center; 1953 gap: 14px; 1954 padding: 16px 18px; 1955 border: 1px solid #E2E8F0; 1956 border-radius: 12px; 1957 text-decoration: none; 1958 color: #0F172A; 1959 background: #FFFFFF; 1960 overflow: hidden; 1961 transition: border-color .25s ease, transform .25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s ease; 1962 z-index: 0; 1963} 1964#pricingModal .sl-pricing-option::before { 1965 content: ""; 1966 position: absolute; 1967 top: 0; 1968 left: 0; 1969 bottom: 0; 1970 width: 100%; 1971 background: linear-gradient(90deg, #F8FAFC 0%, #EFF6FF 100%); 1972 transform: translateX(-100%); 1973 transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1); 1974 z-index: -1; 1975} 1976#pricingModal .sl-pricing-option:hover { 1977 border-color: #2D5BFF; 1978 color: #0F172A; 1979 text-decoration: none; 1980 transform: translateX(4px); 1981 box-shadow: 0 4px 12px -4px rgba(45, 91, 255, 0.18); 1982} 1983#pricingModal .sl-pricing-option:hover::before { transform: translateX(0); } 1984#pricingModal .sl-pricing-option:active { transform: translateX(4px) translateY(1px); } 1985 1986#pricingModal .sl-pricing-option-icon { 1987 flex: 0 0 44px; 1988 width: 44px; 1989 height: 44px; 1990 border-radius: 10px; 1991 display: inline-flex; 1992 align-items: center; 1993 justify-content: center; 1994 transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1); 1995} 1996#pricingModal .sl-pricing-option:hover .sl-pricing-option-icon { transform: scale(1.06); } 1997#pricingModal .sl-pricing-option-icon svg { width: 22px; height: 22px; } 1998#pricingModal .sl-pricing-icon-parent { background: #FED7AA; color: #EA580C; } /* orange */ 1999#pricingModal .sl-pricing-icon-teacher { background: #DBE6FF; color: #2D5BFF; } /* blue */ 2000#pricingModal .sl-pricing-icon-school { background: #D1FAE5; color: #059669; } /* green */ 2001 2002#pricingModal .sl-pricing-option-body { 2003 flex: 1 1 auto; 2004 display: flex; 2005 flex-direction: column; 2006 gap: 3px; 2007} 2008#pricingModal .sl-pricing-option-body strong { 2009 font-size: 16px; 2010 font-weight: 600; 2011 color: #0F172A; 2012 letter-spacing: -0.01em; 2013} 2014#pricingModal .sl-pricing-option-body small { 2015 font-size: 14px; 2016 color: #64748B; 2017 font-weight: 400; 2018 line-height: 1.4; 2019} 2020#pricingModal .sl-pricing-option-arrow { 2021 flex: 0 0 auto; 2022 font-size: 20px; 2023 color: #94A3B8; 2024 transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), color .25s ease; 2025} 2026#pricingModal .sl-pricing-option:hover .sl-pricing-option-arrow { 2027 transform: translateX(6px); 2028 color: #2D5BFF; 2029} 2030</style> 2031
2032<script> 2033$('#pricingModal').on('show.bs.modal', function (e) { 2034 window.dataLayer = window.dataLayer || []; 2035 window.dataLayer.push({ 2036 'event': 'Pricing Modal', 2037 'Action': 'Open', 2038 'Step': '1', 2039 'Step Name': 'Choose Audience' 2040 }); 2041}); 2042</script>
2042 2043<div id="joinNow" class="modal fade sl-join-modal" role="dialog" aria-hidden="true" tabindex="-1" aria-labelledby="joinNowTitle"> 2044 <div class="modal-dialog modal-dialog-centered" role="document"> 2045 <div class="modal-content sl-join-modal-content"> 2046 2047 <button type="button" class="sl-join-modal-close" data-dismiss="modal" aria-label="Close"> 2048 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> 2049 </button> 2050 2051 <div class="sl-join-modal-header"> 2052 <div class="sl-join-modal-eyebrow">Sign up</div> 2053 <h2 class="sl-join-modal-title" id="joinNowTitle">Join Studyladder</h2> 2054 <p class="sl-join-modal-sub">I would like to register for a:</p> 2055 </div> 2056 2057 <div class="sl-join-modal-options"> 2058 <a href="https://www.studyladder.co.uk/account/parent-pricing" class="sl-join-option"> 2059 <span class="sl-join-option-icon sl-join-icon-parent"> 2060 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2"/><circle cx="10" cy="7" r="4"/><path d="M19 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> 2061 </span> 2062 <span class="sl-join-option-body"> 2063 <strong>Parent account</strong> 2064 <small>For families and homeschoolers, up to 4 children at home</small> 2065 </span> 2066 <span class="sl-join-option-arrow">→</span> 2067 </a> 2068 2069 <a href="/account/teacher?t=teacher" class="sl-join-option"> 2070 <span class="sl-join-option-icon sl-join-icon-teacher"> 2071 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg> 2072 </span> 2073 <span class="sl-join-option-body"> 2074 <strong>School teacher account</strong> 2075 <small>For one classroom or your whole school</small> 2076 </span> 2077 <span class="sl-join-option-arrow">→</span> 2078 </a> 2079 </div> 2080 2081 <div class="sl-join-modal-section-label">I would like to:</div> 2082 2083 <div class="sl-join-modal-options"> 2084 <a href="/login/account?backUrl=%2Faccount%2Fupgrade" class="sl-join-option"> 2085 <span class="sl-join-option-icon sl-join-icon-upgrade"> 2086 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg> 2087 </span> 2088 <span class="sl-join-option-body"> 2089 <strong>Upgrade an existing account</strong> 2090 <small>See what's included in Home Plus</small> 2091 </span> 2092 <span class="sl-join-option-arrow">→</span> 2093 </a> 2094 2095 <a href="/account/school-admin" class="sl-join-option"> 2096 <span class="sl-join-option-icon sl-join-icon-school"> 2097 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="20" height="12" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/><line x1="6" y1="15" x2="10" y2="15"/></svg> 2098 </span> 2099 <span class="sl-join-option-body"> 2100 <strong>Pay a school administration fee</strong> 2101 <small>Pay by invoice or credit card</small> 2102 </span> 2103 <span class="sl-join-option-arrow">→</span> 2104 </a> 2105 </div> 2106 2107 <div class="sl-join-modal-footer-note"> 2108 Already have an account? <a href="/login/account">Log in →</a> 2109 </div> 2110 2111 </div> 2112 </div> 2113</div> 2114 2115<style> 2116/* Force-correct modal overlay behaviour. sl-marketing.scss has its own `.modal` 2117 rules (intended as a card inside `.modal-backdrop`) that clash with Bootstrap's 2118 modal/overlay pattern. We override with very high specificity + !important. */ 2119body.sl-marketing #joinNow, 2120body #joinNow.sl-join-modal { 2121 position: fixed !important; 2122 top: 0 !important; 2123 left: 0 !important; 2124 right: 0 !important; 2125 bottom: 0 !important; 2126 width: 100vw !important; 2127 height: 100vh !important; 2128 max-width: 100vw !important; 2129 max-height: 100vh !important; 2130 margin: 0 !important; 2131 padding: 0 !important; 2132 background: rgba(15, 23, 42, 0) !important; 2133 border: 0 !important; 2134 border-radius: 0 !important; 2135 box-shadow: none !important; 2136 transform: none !important; 2137 overflow-x: hidden !important; 2138 overflow-y: auto !important; 2139 outline: 0 !important; 2140 z-index: 2050 !important; 2141 /* Animation: fade overlay + dialog */ 2142 display: block !important; 2143 opacity: 0; 2144 visibility: hidden; 2145 pointer-events: none; 2146 transition: opacity .22s ease, visibility 0s linear .22s, background-color .22s ease, -webkit-backdrop-filter .22s ease, backdrop-filter .22s ease !important; 2147 -webkit-backdrop-filter: blur(0px); 2148 backdrop-filter: blur(0px); 2149} 2150body.sl-marketing #joinNow.show, 2151body #joinNow.sl-join-modal.show { 2152 display: block !important; 2153 opacity: 1; 2154 visibility: visible; 2155 pointer-events: auto; 2156 background: rgba(15, 23, 42, 0.78) !important; 2157 -webkit-backdrop-filter: blur(8px) !important; 2158 backdrop-filter: blur(8px) !important; 2159 transition: opacity .22s ease, visibility 0s linear 0s, background-color .22s ease, -webkit-backdrop-filter .22s ease, backdrop-filter .22s ease !important; 2160} 2161body.sl-marketing #joinNow .modal-dialog, 2162body #joinNow.sl-join-modal .modal-dialog,
2163body.sl-marketing #joinNow .modal-dialog.modal-dialog-centered, 2164body #joinNow.sl-join-modal .modal-dialog.modal-dialog-centered { 2165 position: fixed !important; 2166 top: 50% !important; 2167 left: 50% !important; 2168 right: auto !important; 2169 bottom: auto !important; 2170 -webkit-transform: translate(-50%, -50%) scale(0.96) !important; 2171 transform: translate(-50%, -50%) scale(0.96) !important; 2172 margin: 0 !important; 2173 padding: 0 !important; 2174 max-width: 520px !important; 2175 width: calc(100vw - 32px) !important; 2176 height: auto !important; 2177 max-height: calc(100vh - 32px) !important; 2178 min-height: 0 !important; 2179 display: block !important; 2180 background: transparent !important; 2181 border: 0 !important; 2182 box-shadow: none !important; 2183 transition: -webkit-transform .25s cubic-bezier(0.4, 0, 0.2, 1), transform .25s cubic-bezier(0.4, 0, 0.2, 1) !important; 2184 z-index: 2060 !important; 2185 flex: none !important; 2186 align-self: auto !important; 2187} 2188body.sl-marketing #joinNow.show .modal-dialog, 2189body #joinNow.sl-join-modal.show .modal-dialog, 2190body.sl-marketing #joinNow.show .modal-dialog.modal-dialog-centered, 2191body #joinNow.sl-join-modal.show .modal-dialog.modal-dialog-centered { 2192 -webkit-transform: translate(-50%, -50%) scale(1) !important; 2193 transform: translate(-50%, -50%) scale(1) !important; 2194} 2195/* Bootstrap inserts a ::before pseudo for centered modals â neutralise it */ 2196body.sl-marketing #joinNow .modal-dialog-centered::before, 2197body #joinNow.sl-join-modal .modal-dialog-centered::before { 2198 content: none !important; 2199 display: none !important; 2200 height: 0 !important; 2201} 2202body.sl-marketing #joinNow .sl-join-modal-content, 2203body #joinNow .sl-join-modal-content { 2204 position: relative; 2205 background: #FFFFFF !important; 2206 border-radius: 18px !important; 2207 padding: 28px 28px 22px !important; 2208 box-shadow: 0 24px 80px -16px rgba(15, 23, 42, 0.30), 0 4px 12px rgba(15, 23, 42, 0.06) !important; 2209 pointer-events: auto; 2210 width: 100% !important; 2211 max-width: none !important; 2212 border: 0 !important; 2213 transform: none !important; 2214 transition: none !important; 2215 max-height: calc(100vh - 48px); 2216 overflow-y: auto; 2217} 2218#joinNow .sl-join-modal-close { 2219 position: absolute; 2220 top: 14px; 2221 right: 14px; 2222 width: 32px; 2223 height: 32px; 2224 border-radius: 50%; 2225 border: 0; 2226 background: #F1F5F9; 2227 color: #475569; 2228 display: inline-flex; 2229 align-items: center; 2230 justify-content: center; 2231 cursor: pointer; 2232 padding: 0; 2233 transition: background .15s ease; 2234} 2235#joinNow .sl-join-modal-close:hover { background: #E2E8F0; color: #0F172A; } 2236#joinNow .sl-join-modal-close svg { width: 18px; height: 18px; } 2237#joinNow .sl-join-modal-header { padding: 0 0 14px; } 2238#joinNow .sl-join-modal-eyebrow { 2239 font-size: 13px; 2240 font-weight: 600; 2241 letter-spacing: 0.08em; 2242 text-transform: uppercase; 2243 color: #2D5BFF; 2244 margin: 0 0 8px; 2245} 2246#joinNow .sl-join-modal-title { 2247 font-size: 28px; 2248 font-weight: 700; 2249 color: #0F172A; 2250 margin: 0 0 8px; 2251 letter-spacing: -0.02em; 2252 line-height: 1.2; 2253} 2254#joinNow .sl-join-modal-sub { 2255 font-size: 15px; 2256 color: #64748B; 2257 margin: 4px 0 0; 2258} 2259#joinNow .sl-join-modal-options { 2260 display: flex; 2261 flex-direction: column; 2262 gap: 10px; 2263 margin: 0 0 12px; 2264} 2265#joinNow .sl-join-modal-section-label { 2266 font-size: 15px; 2267 color: #64748B; 2268 margin: 18px 0 10px; 2269} 2270 2271/* Option cards â with hover slide animation */ 2272#joinNow .sl-join-option { 2273 position: relative; 2274 display: flex; 2275 align-items: center; 2276 gap: 14px; 2277 padding: 16px 18px; 2278 border: 1px solid #E2E8F0; 2279 border-radius: 12px; 2280 text-decoration: none; 2281 color: #0F172A; 2282 background: #FFFFFF; 2283 overflow: hidden; 2284 transition: border-color .25s ease, transform .25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s ease; 2285 z-index: 0; 2286} 2287/* Sliding tinted backdrop revealed on hover (leftâright wipe) */ 2288#joinNow .sl-join-option::before { 2289 content: ""; 2290 position: absolute; 2291 top: 0; 2292 left: 0; 2293 bottom: 0; 2294 width: 100%; 2295 background: linear-gradient(90deg, #F8FAFC 0%, #EFF6FF 100%); 2296 transform: translateX(-100%); 2297 transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1); 2298 z-index: -1; 2299} 2300#joinNow .sl-join-option:hover { 2301 border-color: #2D5BFF; 2302 color: #0F172A; 2303 text-decoration: none; 2304 transform: translateX(4px); 2305 box-shadow: 0 4px 12px -4px rgba(45, 91, 255, 0.18); 2306} 2307#joinNow .sl-join-option:hover::before { transform: translateX(0); } 2308#joinNow .sl-join-option:active { transform: translateX(4px) translateY(1px); } 2309 2310#joinNow .sl-join-option-icon { 2311 flex: 0 0 44px; 2312 width: 44px; 2313 height: 44px; 2314 border-radius: 10px; 2315 display: inline-flex; 2316 align-items: center; 2317 justify-content: center; 2318 transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1); 2319} 2320#joinNow .sl-join-option:hover .sl-join-option-icon { transform: scale(1.06); } 2321#joinNow .sl-join-option-icon svg { width: 22px; height: 22px; } 2322#joinNow .sl-join-icon-parent { background: #FED7AA; color: #EA580C; } 2323#joinNow .sl-join-icon-teacher { background: #DBE6FF; color: #2D5BFF; } 2324#joinNow .sl-join-icon-upgrade { background: #D1FAE5; color: #059669; } 2325#joinNow .sl-join-icon-school { background: #E9D5FF; color: #7C3AED; } 2326#joinNow .sl-join-option-body { 2327 flex: 1 1 auto; 2328 display: flex; 2329 flex-direction: column; 2330 gap: 3px; 2331} 2332#joinNow .sl-join-option-body strong { 2333 font-size: 16px; 2334 font-weight: 600; 2335 color: #0F172A; 2336 letter-spacing: -0.01em; 2337} 2338#joinNow .sl-join-option-body small { 2339 font-size: 14px; 2340 color: #64748B; 2341 font-weight: 400; 2342 line-height: 1.4; 2343} 2344#joinNow .sl-join-option-arrow { 2345 flex: 0 0 auto; 2346 font-size: 20px; 2347 color: #94A3B8; 2348 transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), color .25s ease; 2349} 2350#joinNow .sl-join-option:hover .sl-join-option-arrow { 2351 transform: translateX(6px); 2352 color: #2D5BFF; 2353} 2354#joinNow .sl-join-modal-footer-note { 2355 margin: 16px 0 0; 2356 padding-top: 16px; 2357 border-top: 1px solid #E2E8F0; 2358 text-align: center; 2359 font-size: 15px; 2360 color: #64748B; 2361} 2362#joinNow .sl-join-modal-footer-note a { 2363 color: #2D5BFF; 2364 font-weight: 600; 2365 text-decoration: none; 2366} 2367#joinNow .sl-join-modal-footer-note a:hover { text-decoration: underline; } 2368</style> 2369
2370<script> 2371$('#joinNow').on('show.bs.modal', function (e) { 2372 window.dataLayer = window.dataLayer || []; 2373 window.dataLayer.push({ 2374 'event': 'User Account', 2375 'Action': 'Creation', 2376 'Step': '1', 2377 'Step Name': 'Choose Account' 2378 }); 2379}); 2380 2381</script>
2381 2382<div id="publicMenuModal" class="modal site-menu" tabindex="-1" role="dialog"> 2383 <div class="modal-dialog modal-xl" role="document"> 2384 <div class="modal-content"> 2385 <div class="modal-header"> 2386 2387 <h4 class="modal-title">Menu</h4> 2388 <button aria-hidden="true" data-dismiss="modal" class="close" type="button"><i class="far fa-times"></i></button> 2389 2390 </div> 2391 <div class="modal-body"> 2392 <div class="row text-dark"> 2393 2394 <div class="col-md"> 2395 <h3 style="color:#e3813b;border-color:#e3813b"> 2396 <i class="fas fa-book float-right"></i> 2397 Resources 2398 </h3> 2399 2400 <ul class="list-group list-group-flush"> 2401 <li class="list-group-item"><a href="/games">Browse All / Search</a></li> 2402 <li class="list-group-item"><a href="/games/mathematics/au-year-three/mathematics-addition-430">Mathematics</a></li> 2403 <li class="list-group-item"><a href="/games/literacy/au-year-three/english-spelling-and-vocabulary-185">Literacy</a></li> 2404 <li class="list-group-item"><a href="/games/science/au-year-three/science-biology-764">Science</a></li> 2405 <li class="list-group-item"><a href="/games/visual-arts-music/au-mixed-years/art-paint-and-draw-962">Visual Arts and Music</a></li> 2406 <li class="list-group-item"><a href="/games/health-safety-citizenship/au-mixed-years/health-safety-and-citizenship-citizenship-1547">Health, Safety & Citizenship</a></li> 2407 <li class="list-group-item"><a href="/games/language-culture/au-mixed-years/language-and-culture-languages-1022">Language & Culture</a></li> 2408 <li class="list-group-item"><a href="/games/information-communication-technology/au-mixed-years/information-communication-and-technology-social-and-ethical-practices-with-ict-1056">Information Communication Technology</a></li> 2409 <li class="list-group-item"><a href="/games/studysheets/au-year-three/theme-based-learning-rocks-erosion-and-changing-landscapes-1675">Theme Based Learning</a></li> 2410 </ul> 2411 </div> 2412 <div class="col-md"> 2413 <h3 style="color:#87b53e;border-color:#87b53e"> 2414 <i class="fas fa-star float-right"></i> 2415 My Account 2416 </h3> 2417 2418 <ul class="list-group list-group-flush"> 2419 <li class="list-group-item"><a href="#" data-toggle="modal" data-target="#joinNow" onclick="$('#publicMenuModal').modal('hide')">Join now</a></li> 2420 <li class="list-group-item"><a href="/login/account">Log in</a></li> 2421 <li class="list-group-item"><a href="/login/forgot">Forgot password</a></li> 2422 <li class="list-group-item"><a href="/about/pricing">Pricing</a></li> 2423 </ul> 2424 </div> 2425 <div class="col-md"> 2426 <h3 style="color:#9767b6;border-color:#9767b6"> 2427 <i class="fas fa-star float-right"></i> 2428 Other 2429 </h3> 2430 2431 <ul class="list-group list-group-flush"> 2432 <li class="list-group-item"><a href="/about/contact-us">Contact Us</a></li> 2433 <li class="list-group-item"><a href="/help/faq">Help / FAQ</a></li> 2434 <li class="list-group-item"><a href="/about/about-us">About us</a></li> 2435 <li class="list-group-item"><a href="/about/privacy">Privacy</a></li> 2436 <li class="list-group-item"><a href="/about/disclaimer">Disclaimer</a></li> 2437 <li class="list-group-item"><a href="/about/terms">Terms</a></li> 2438 </ul> 2439 2440 </div> 2441 2442 </div><!-- .row --> 2443 </div><!-- .modal-body --> 2444 </div><!-- .modal-content --> 2445 </div><!-- .modal-dialog --> 2446</div><!-- .modal --> 2447 2448</body> 2449 2450<style> 2451 2452 #SLWorldTeaserModal .modal-dialog, #HomeTutorVideoModal .modal-dialog {max-width: 1200px;} 2453 #SLWorldTeaserModal .modal-body, #HomeTutorVideoModal .modal-body {padding-left: 3rem;padding-right: 3rem;} 2454 #SLWorldTeaserModal .modal-header, #HomeTutorVideoModal .modal-header {height:1px; border:none;} 2455 2456 @media only screen and (max-width: 767px) { 2457 #SLWorldTeaserModal .modal-body, #HomeTutorVideoModal .modal-body {padding-left: 1rem;padding-right: 1rem;} 2458 #SLWorldTeaserModal .modal-header, #HomeTutorVideoModal .modal-header {height:1px; border:none;} 2459 #SLWorldTeaserModal .modal-header, #HomeTutorVideoModal .modal-header {height: 20px;padding-top:30px;} 2460 .site-menu .modal-header .close { 2461 margin-top:-45px!important; 2462 } 2463 } 2464 2465</style> 2466 2467 2468
2468<script type="text/javascript"> 2469 2470 2471 $( document ).ready(function(){ 2472 2473 $('#SLWorldTeaserModal').on('hidden.bs.modal', function () { 2474 document.getElementById('slWorldVideo').pause(); 2475 }) 2476 2477 $('#HomeTutorVideoModal').on('hidden.bs.modal', function () { 2478 document.getElementById('htVideo').pause(); 2479 }) 2480 2481 $('#SLWorldTeaserModal').on('shown.bs.modal', function () { 2482 // document.getElementById('slWorldVideo').src(); 2483 videoString = $('#slWorldVideo source').data("videourl"); 2484 $('#slWorldVideo source').attr('src', videoString); 2485 $("#slWorldVideo ")[0].load(); 2486 $("#slWorldVideo ")[0].play(); 2487 }) 2488 2489 $('#HomeTutorVideoModal').on('shown.bs.modal', function () { 2490 // document.getElementById('htVideo').pause(); 2491 videoString = $('#htVideo source').data("videourl"); 2492 $('#htVideo source').attr('src', videoString); 2493 $("#htVideo ")[0].load(); 2494 $("#htVideo ")[0].play(); 2495 }) 2496 2497 }); 2498 2499 // document.getElementById('videoId').play(); 2500 //jQuery("#video").trigger('pause'); 2501 2502 2503 </script>
2503 2504 2505 <div class="modal fade newPopUpDesign site-menu" id="SLWorldTeaserModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"> 2506 <div class="modal-dialog modalBox"> 2507 <div class="modal-content"> 2508 <div class="modal-header " style="background-color:#000!important;"> 2509 <h4 class="modal-title text-center w-100 d-none" style="background-color:#000;text-shadow: none;color:#fff">Studyladder <span style="color:#3fa9f5;">World</span> Teaser<span class="sprite iconCorner3"></span></h4> 2510 <button aria-hidden="true" data-dismiss="modal" class="close" type="button"><i class="fa fa-times"></i></button> 2511 </div> 2512 <div class="modal-body pt-4" style="background-color:#000;"> 2513 2514 <video id="slWorldVideo" class="w-100 " style="border:1px solid #ccc; " controls="" poster="/images/world/sl-world-vid-thumb-1.png"> <source src="" data-videourl="https://static.studyladder.co.uk/cdn/site/3a/2161260c8cd1.mp4" type="video/mp4"></video> 2515 </div> 2516 </div> 2517 </div> 2518 </div> 2519 2520 <div class="modal fade newPopUpDesign site-menu" id="HomeTutorVideoModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"> 2521 <div class="modal-dialog modalBox"> 2522 <div class="modal-content"> 2523 <div class="modal-header " style="background-color:#000!important;"> 2524 <h4 class="modal-title text-center w-100 d-none" style="background-color:#000;text-shadow: none;color:#fff">Studyladder Home Tutor Trailer<span class="sprite iconCorner3"></span></h4> 2525 <button aria-hidden="true" data-dismiss="modal" class="close" type="button"><i class="fa fa-times"></i></button> 2526 </div> 2527 <div class="modal-body pt-4" style="background-color:#000;"> 2528 <video id="htVideo" class="w-100 " style="border:1px solid #ccc; " controls="" poster="/images/home-tutor/ht-vid-thumb-1.png"> <source src="" data-videourl="https://static.studyladder.co.uk/cdn/site/92/e94af3cc87a8.mp4" type="video/mp4"></video> 2529 2530 </div> 2531 </div> 2532 </div> 2533 </div> <!DOCTYPE html> 2534<html lang="en"> 2535<head> 2536 <meta charset="UTF-8"> 2537 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 2538 <title>Cookie Consent</title> 2539 <style> 2540 #cookie-banner { 2541 position: fixed; 2542 bottom: 20px; 2543 right: 20px; 2544 width: 320px; 2545 background: #212529; 2546 color: #f8f9fa; 2547 padding: 20px; 2548 border-radius: 8px; 2549 box-shadow: 0 0px 12px -1px white; 2550 z-index: 9999; 2551 font-family: 'Quicksand', 'Helvetica Neue', sans-serif; 2552 display: none; 2553 gap: 15px; 2554 align-items: flex-start; 2555 } 2556 2557 #cookie-banner-icon, 2558 #cookie-preferences-icon { 2559 flex-shrink: 0; 2560 filter: drop-shadow(0 0 6px rgba(255,255,255,0.5)); 2561 } 2562 2563 #cookie-banner-icon img, 2564 #cookie-preferences-icon img { 2565 width: 40px; 2566 height: 40px; 2567 } 2568 2569 #cookie-banner-content { 2570 flex: 1; 2571 } 2572 2573 #cookie-preferences { 2574 position: fixed; 2575 bottom: 20px; 2576 right: 20px; 2577 width: 320px; 2578 background: #212529; 2579 color: #f8f9fa; 2580 padding: 20px; 2581 border-radius: 8px; 2582 box-shadow: 0 0px 12px -1px white; 2583 z-index: 9999; 2584 font-family: 'Quicksand', 'Helvetica Neue', sans-serif; 2585 display: none; 2586 gap: 15px; 2587 } 2588 2589 #cookie-preferences-content { 2590 flex: 1; 2591 } 2592 2593 #cookie-banner-content p, 2594 #cookie-preferences-content p { 2595 margin-bottom: 1em; 2596 line-height: 1.4em; 2597 } 2598 2599 #cookie-banner-content a { 2600 color: #ffc107; 2601 text-decoration: underline; 2602 } 2603 2604 .cookie-buttons { 2605 display: flex; 2606 flex-wrap: wrap; 2607 gap: 8px; 2608 } 2609 2610 .cookie-buttons button, 2611 .save-btn { 2612 padding: 8px 12px; 2613 border: none; 2614 border-radius: 6px; 2615 cursor: pointer; 2616 font-weight: 600; 2617 font-family: 'Quicksand', sans-serif; 2618 letter-spacing: 0.5px; 2619 } 2620 2621 .accept-btn { background: #198754; color: #fff; } 2622 .reject-btn { background: #dc3545; color: #fff; } 2623 .customize-btn { background: #ffc107; color: #000; } 2624 .save-btn { background: #0d6efd; color: #fff; width: 100%; margin-top: 10px; } 2625 2626 .toggle-wrapper { 2627 display: flex; 2628 justify-content: space-between; 2629 align-items: center; 2630 margin-bottom: 10px; 2631 } 2632 2633 .toggle-switch { 2634 position: relative; 2635 display: inline-block; 2636 width: 36px; 2637 height: 20px; 2638 } 2639 2640 .toggle-switch input { 2641 opacity: 0; 2642 width: 0; 2643 height: 0; 2644 } 2645 2646 .slider { 2647 position: absolute; 2648 cursor: pointer; 2649 top: 0; 2650 left: 0; 2651 right: 0; 2652 bottom: 0; 2653 background-color: #ccc; 2654 transition: 0.2s; 2655 border-radius: 34px; 2656 } 2657 2658 .slider:before { 2659 position: absolute; 2660 content: ""; 2661 height: 14px; 2662 width: 14px; 2663 left: 3px; 2664 bottom: 3px; 2665 background-color: white; 2666 transition: 0.2s; 2667 border-radius: 50%; 2668 } 2669 2670 .toggle-switch input:checked + .slider { 2671 background-color: #0d6efd; 2672 } 2673 2674 .toggle-switch input:checked + .slider:before { 2675 transform: translateX(16px); 2676 } 2677 </style> 2678
2678<script> 2679 window.dataLayer = window.dataLayer || []; 2680 function gtag() { dataLayer.push(arguments); } 2681 2682 const siteCountryId = "GB"; 2683 const unrestricted = ["AU", "NZ"].includes(siteCountryId); 2684 let isStudent = false; 2685 2686 if (unrestricted) { 2687 localStorage.setItem('cookie_consent', JSON.stringify({analytics: true, marketing: true})); 2688 } else if (isStudent) { 2689 localStorage.setItem('cookie_consent', JSON.stringify({analytics: false, marketing: false})); 2690 } else { 2691 gtag('consent', 'default', { 2692 'ad_storage': 'denied', 2693 'analytics_storage': 'denied', 2694 'ad_user_data': 'denied', 2695 'ad_personalization': 'denied', 2696 'functionality_storage': 'granted', 2697 'security_storage': 'granted' 2698 }); 2699 } 2700 2701 document.addEventListener('DOMContentLoaded', () => { 2702 const prefs = JSON.parse(localStorage.getItem('cookie_consent') || '{}'); 2703 2704 if (unrestricted) { 2705 // No banner, full access 2706 gtag('consent', 'update', { 2707 'ad_storage': 'granted', 2708 'ad_user_data': 'granted', 2709 'ad_personalization': 'granted', 2710 'analytics_storage': 'granted', 2711 'functionality_storage': 'granted', 2712 'security_storage': 'granted' 2713 }); 2714 return; 2715 } 2716 2717 if (!('analytics' in prefs) && !('marketing' in prefs)) { 2718 document.getElementById('cookie-banner').style.display = 'block'; 2719 document.getElementById('cookie-preferences').style.display = 'none'; 2720 } else { 2721 applyConsent(prefs); 2722 } 2723 }); 2724 2725 function applyConsent(prefs) { 2726 gtag('consent', 'update', { 2727 'ad_storage': prefs.marketing ? 'granted' : 'denied', 2728 'ad_user_data': prefs.marketing ? 'granted' : 'denied', 2729 'ad_personalization': prefs.marketing ? 'granted' : 'denied', 2730 'analytics_storage': prefs.analytics ? 'granted' : 'denied', 2731 'functionality_storage': 'granted', 2732 'security_storage': 'granted' 2733 }); 2734 } 2735 </script>
2735 2736</head> 2737<body> 2738<!-- body content remains unchanged --> 2739 2740<div id="cookie-banner"> 2741 <div class="d-flex align-items-start" style="gap:15px"> 2742 <div id="cookie-banner-icon"> 2743 <img src="https://static.studyladder.co.uk/cdn/site/71/25a349e3aa67.png" alt="Cookie Icon"> 2744 </div> 2745 <div id="cookie-banner-content"> 2746 <p>We use cookies to help tailor your educational experience. <a href="/about/privacy">Learn more</a></p> 2747 </div> 2748 </div> 2749 2750 <div class="cookie-buttons mt-3"> 2751 <button class="accept-btn" onclick="acceptAllCookies()">Accept</button> 2752 <button class="reject-btn" onclick="rejectAllCookies()">Reject</button> 2753 <button class="customize-btn" onclick="openPreferences()">Customize</button> 2754 </div> 2755</div> 2756 2757<div id="cookie-preferences"> 2758 <div id="cookie-preferences-icon"> 2759 <img src="https://static.studyladder.co.uk/cdn/site/71/25a349e3aa67.png" alt="Cookie Icon"> 2760 </div> 2761 <div id="cookie-preferences-content"> 2762 <p>Cookie Preferences:</p> 2763 <div class="toggle-wrapper"> 2764 <span>Essential (always on)</span> 2765 <div class="toggle-switch"><label><input type="checkbox" disabled checked><span class="slider"></span></label></div> 2766 </div> 2767 <div class="toggle-wrapper"> 2768 <span>Analytics</span> 2769 <div class="toggle-switch"><label><input type="checkbox" id="toggle-analytics" checked><span class="slider"></span></label></div> 2770 </div> 2771 <div class="toggle-wrapper"> 2772 <span>Marketing</span> 2773 <div class="toggle-switch"><label><input type="checkbox" id="toggle-marketing" checked><span class="slider"></span></label></div> 2774 </div> 2775 <button class="save-btn" onclick="savePreferences()">Save Preferences</button> 2776 </div> 2777</div> 2778
2779<script> 2780 function saveConsent(prefs) { 2781 localStorage.setItem('cookie_consent', JSON.stringify(prefs)); 2782 applyConsent(prefs); 2783 } 2784 2785 function getConsent() { 2786 return JSON.parse(localStorage.getItem('cookie_consent') || '{}'); 2787 } 2788 2789 function applyConsent(prefs) { 2790 if (prefs.analytics) { 2791 loadGoogleAnalytics(); 2792 } 2793 2794 gtag('consent', 'update', { 2795 'ad_storage': prefs.marketing ? 'granted' : 'denied', 2796 'ad_user_data': prefs.marketing ? 'granted' : 'denied', 2797 'ad_personalization': prefs.marketing ? 'granted' : 'denied', 2798 'analytics_storage': prefs.analytics ? 'granted' : 'denied', 2799 'functionality_storage': 'granted', 2800 'security_storage': 'granted' 2801 }); 2802 } 2803 2804 function loadGoogleAnalytics() { 2805 if (!window.gtag){ 2806 window.dataLayer = window.dataLayer || []; 2807 function gtag() { dataLayer.push(arguments); } 2808 } 2809 2810 } 2811 2812 function acceptAllCookies() { 2813 saveConsent({ analytics: true, marketing: true }); 2814 document.getElementById('cookie-banner').style.display = 'none'; 2815 } 2816 2817 function rejectAllCookies() { 2818 saveConsent({ analytics: false, marketing: false }); 2819 document.getElementById('cookie-banner').style.display = 'none'; 2820 } 2821 2822 function openPreferences() { 2823 document.getElementById('cookie-banner').style.display = 'none'; 2824 document.getElementById('cookie-preferences').style.display = 'flex'; 2825 } 2826 2827 function savePreferences() { 2828 const prefs = { 2829 analytics: document.getElementById('toggle-analytics').checked, 2830 marketing: document.getElementById('toggle-marketing').checked 2831 }; 2832 saveConsent(prefs); 2833 document.getElementById('cookie-preferences').style.display = 'none'; 2834 } 2835 2836 document.addEventListener('DOMContentLoaded', () => { 2837 const prefs = getConsent(); 2838 if (!('analytics' in prefs) && !('marketing' in prefs)) { 2839 document.getElementById('cookie-banner').style.display = 'block'; 2840 document.getElementById('cookie-preferences').style.display = 'none'; 2841 } else { 2842 document.getElementById('cookie-banner').style.display = 'none'; 2843 document.getElementById('cookie-preferences').style.display = 'none'; 2844 applyConsent(prefs); 2845 } 2846 }); 2847</script>
2847 2848</body> 2849</html> 2850 2851 2852 <!-- SL marketing reveal-on-scroll â only runs when <body> has .sl-marketing class --> 2853
2853<script> 2854 (function () { 2855 if (!document.body.classList.contains('sl-marketing')) return; 2856 if (!('IntersectionObserver' in window)) return; 2857 2858 // Selectors that fade-up when scrolled into view 2859 var fadeUp = [ 2860 '.section-eyebrow', '.section-title', '.section-sub', 2861 '.video-frame', '.year-progression', '.stats-note', '.tour-cta-row', 2862 '.curr-header', '.safety-header', '.safety-cta', 2863 '.faq-intro', '.final-cta-inner > *' 2864 ].join(','); 2865 2866 // Stagger groups â same animation but delayed in sequence for grids 2867 var staggerGroups = [ 2868 '.audience-grid > .audience-card', 2869 '.subjects-grid > .subject-card', 2870 '.why-grid > .why-item', 2871 '.stats-grid > .stat-card', 2872 '.test-grid > .test-card', 2873 '.pricing-grid > .price-card', 2874 '.safety-grid > .safety-item', 2875 '.faq-list > .faq-item', 2876 '.video-chapters > .chapter', 2877 '.platform-grid > .feature-tile', 2878 '.story-stat-stack > .story-stat', 2879 '.test-grid > .test-card', 2880 '.results-list > li' 2881 ]; 2882 2883 document.querySelectorAll(fadeUp).forEach(function (el) { 2884 el.classList.add('reveal'); 2885 }); 2886 2887 staggerGroups.forEach(function (sel) { 2888 document.querySelectorAll(sel).forEach(function (el, idx) { 2889 el.classList.add('reveal'); 2890 el.style.animationDelay = Math.min(idx * 0.05, 0.3) + 's'; 2891 }); 2892 }); 2893 2894 var obs = new IntersectionObserver(function (entries) { 2895 entries.forEach(function (entry) { 2896 if (entry.isIntersecting) { 2897 entry.target.classList.add('is-visible'); 2898 obs.unobserve(entry.target); 2899 } 2900 }); 2901 }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }); 2902 2903 document.querySelectorAll('.reveal').forEach(function (el) { 2904 obs.observe(el); 2905 }); 2906 2907 // ---- Video player: swap poster for YouTube iframe on click ---- 2908 document.querySelectorAll('.video-player[data-video-id]').forEach(function (player) { 2909 var btn = player.querySelector('.video-play-btn'); 2910 if (!btn) return; 2911 btn.addEventListener('click', function (e) { 2912 e.preventDefault(); 2913 var id = player.getAttribute('data-video-id'); 2914 var label = player.getAttribute('data-video-label') || ''; 2915 var frame = document.createElement('iframe'); 2916 frame.src = 'https://www.youtube-nocookie.com/embed/' + id + '?autoplay=1&rel=0'; 2917 frame.title = label; 2918 frame.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'; 2919 frame.setAttribute('allowfullscreen', ''); 2920 frame.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:inherit;'; 2921 player.appendChild(frame); 2922 // Hide the poster and overlay so iframe shows through 2923 player.querySelectorAll('.video-poster-img, .video-poster-overlay, .video-play-btn, .video-meta').forEach(function (el) { 2924 el.style.display = 'none'; 2925 }); 2926 }); 2927 }); 2928 2929 // ---- Sticky CTA â fades in after the trigger element scrolls past ---- 2930 // Bar reads data-sticky-trigger="<elementId>" off itself. If omitted, 2931 // defaults to #pricing. The bar gets .visible once the trigger has 2932 // fully scrolled above the viewport. 2933 var stickyBar = document.getElementById('stickyCta'); 2934 if (stickyBar) { 2935 var triggerId = stickyBar.getAttribute('data-sticky-trigger') || 'pricing'; 2936 var trigger = document.getElementById(triggerId); 2937 if (trigger) { 2938 var stickyObs = new IntersectionObserver(function (entries) { 2939 entries.forEach(function (entry) { 2940 var aboveViewport = !entry.isIntersecting && entry.boundingClientRect.bottom < 0; 2941 stickyBar.classList.toggle('visible', aboveViewport); 2942 stickyBar.setAttribute('aria-hidden', aboveViewport ? 'false' : 'true'); 2943 }); 2944 }, { threshold: 0, rootMargin: '0px' }); 2945 stickyObs.observe(trigger); 2946 } 2947 } 2948 2949 // ---- Home Plus benefits tabs (parent / parent-pricing / etc.) ---- 2950 document.querySelectorAll('.benefits-tabs').forEach(function (tablist) { 2951 var tabs = tablist.querySelectorAll('.benefits-tab');
2952 tabs.forEach(function (tab) { 2953 tab.addEventListener('click', function () { 2954 var key = tab.getAttribute('data-tab'); 2955 tabs.forEach(function (t) { 2956 var isActive = t === tab; 2957 t.classList.toggle('active', isActive); 2958 t.setAttribute('aria-selected', isActive ? 'true' : 'false'); 2959 }); 2960 document.querySelectorAll('.benefits-panel').forEach(function (p) { 2961 var isMatch = p.getAttribute('id') === 'benefit-panel-' + key; 2962 p.classList.toggle('active', isMatch); 2963 if (isMatch) { 2964 p.removeAttribute('hidden'); 2965 } else { 2966 p.setAttribute('hidden', ''); 2967 } 2968 }); 2969 }); 2970 }); 2971 }); 2972 })(); 2973 </script>
2973 2974 2975 <!-- HEALTH CHECK 0049835 --> 2976</body> 2977</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.