School Website HTML Template — Free CSS & JS Snippet
School Website template · 10 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder
CategoryLanding Pages
What's included
Features
10 ready-made website sections assembled into one finished school website page: Simple Sticky Navbar, Image Background Hero, Animated Stats Counters, Icon Grid Features, Filterable Image Gallery, Class Timetable, Team Grid, FAQ Grid, Contact With Map, Multi-Column Footer
Every section links to its own page in the Website Section Templates library, where you can edit it on its own
One theme drives the whole page (colours, fonts, corner radius, width), so changing the brand takes a minute
Container-query responsive: each section adapts to the width it is placed in, from phone to desktop
GSAP entrance animations and scroll effects load from a CDN, and switch off for visitors who prefer reduced motion
Also available as a 5-page website in the builder, sharing one navbar, footer and theme
Plain HTML, CSS and JavaScript: copy the code here or export it to React, Vue, Angular or Tailwind
About this UI Snippet
A School Website That Answers Parents' Questions First: Who You Are, How Pupils Do and How to Apply
Parents visiting a school site have a short list of questions: what is the school like, how do pupils do, what does a day look like, who will teach my child and how do I apply? This layout answers them in that order. A warm hero introduces the school, animated counters show results and numbers (pupils, class size, inspection rating), and the icon grid sets out what pupils learn.
A filterable gallery shows real classrooms and activities, a class timetable explains the school day, and the staff grid introduces the teachers by name. A FAQ grid handles admissions, uniform, meals and term dates, and a map with contact details closes the page. Everything is written for a parent reading on a phone between other tasks.
Replace the sample details with your school's and keep the language plain. It is the layout of the School Website template, which also comes as a multi-page site with Admissions and Visit pages; open it in the Website Builder to edit and export.
Built from website section templates
The 10 Sections Behind This School Website Page
This page is not one big block of code: it is stacked from ready-made sections in the free Website Section Templates library, in this order. Open any of them to edit it on its own, or start with the whole page.
- Simple Sticky Navbara simple sticky bar with Admissions and Contact links, the two things parents look for first
- Image Background Heroa warm welcome with a real photo and a sentence that sums up the school
- Animated Stats Counterscounters for pupils, class size and inspection rating, numbers that parents compare
- Icon Grid Featureswhat pupils learn, in everyday language rather than curriculum jargon
- Filterable Image Gallerya filterable gallery of real classrooms, activities and trips
- Class Timetablea class timetable that explains what a school day looks like
- Team Gridthe teachers and leaders by name and role, so parents know who they will meet
- FAQ Gridadmissions, uniform, meals and term dates answered in one place
- Contact With Mapa map with address, phone and visiting arrangements
- Multi-Column Footera multi-column footer with policies, safeguarding contact and legal notices
Step by step
How to Use
- 1Open the template in the Website BuilderPress "Start using this template" to open the School Website in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
- 2Use your real numbers and ratingEdit the counters with current pupil numbers, class sizes and your latest inspection outcome, and state the year each figure covers.
- 3Describe a typical day in the timetableReplace the sample timetable with your actual school day, from drop-off to pick-up, so parents can picture it.
- 4Answer the admissions questionsFill the FAQ with your application process, deadlines, open days, uniform and meals, and link to the application form.
- 5Export and publishDownload one HTML file or a ZIP (or one HTML file per page for the multi-page version) and upload it to Netlify, Vercel, Cloudflare Pages, GitHub Pages or your own host. Or copy the code from this page and export it to React, Vue, Angular or Tailwind with the buttons above the editor.
Real-world uses
Common Use Cases
Primary schools, academies and nurseries
Give families a clear, welcoming first look at the school and its admissions.
Tutoring centres and after-school clubs
Swap classes for sessions and use the timetable and FAQ for term information.
Learn a timetable and an FAQ grid
See how a weekly timetable and a grid of questions are laid out responsively.
Got questions?
Frequently Asked Questions
An introduction, results, what pupils learn, the school day, the staff, admissions information, policies and contact details.
Explain the process in the FAQ and link to your application form or admissions authority; the page presents the information.
Yes. Add pages in the Website Builder, for example Term dates and News, so they share the navbar, footer and theme.
It is assembled from 10 templates in the free Website Section Templates library: Simple Sticky Navbar, Image Background Hero, Animated Stats Counters, Icon Grid Features, Filterable Image Gallery, Class Timetable, Team Grid, FAQ Grid, Contact With Map, Multi-Column Footer. Each one has its own page where you can edit it separately.
It is the same page. Here you read and edit the HTML, CSS and JavaScript directly with a live preview; in the Website Builder you edit it with forms, change the theme once for the whole page, add pages and export a finished site.
Source Code
<section class="st st-navbar-simple" data-uid="smvnkxdekpgrg">
<header class="st-wrap nb">
<a class="st-brand" href="#">
<span class="st-brand-mark"><span class="st-brand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" /><path d="M22 10v6" /><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" /></svg></span><span>Brookfield Primary</span></span>
</a>
<nav class="nb-nav" data-menu aria-label="Main">
<ul class="nb-links">
<li data-menu-item><a class="nb-link" href="#features"><span>About</span></a></li>
<li data-menu-item><a class="nb-link" href="#timetable"><span>Timetable</span></a></li>
<li data-menu-item><a class="nb-link" href="#team"><span>Staff</span></a></li>
<li data-menu-item><a class="nb-link" href="#faq"><span>Parents</span></a></li>
</ul>
<div class="nb-actions" data-menu-item>
<a class="nb-login" href="#"><span>Parent portal</span></a>
<a class="st-btn nb-cta" href="#contact"><span>Book a visit</span></a>
</div>
</nav>
<button type="button" class="st-burger" data-menu-toggle aria-expanded="false" aria-label="Open menu"><span></span><span></span><span></span></button>
</header>
<i hidden data-sticky-flag></i>
</section>
<section class="st st-image-background-hero" data-uid="smvnkxdek3bu4">
<div class="ib-bg" role="img" aria-label="Background photo" style="background-image:url('https://webdevpuneet.com/images/section-templates/tpl-school.jpg')"></div>
<div class="ib-shade" aria-hidden="true"></div>
<div class="ib st-wrap">
<div class="ib-copy">
<span class="st-eyebrow ib-eyebrow" data-anim="item">Admissions open for September 2027</span>
<h1 class="ib-title" data-anim="item" data-anim-text>A school where <span class="hl">every child is known</span></h1>
<p class="st-lead ib-lead" data-anim="item">Small classes, outdoor learning every week and teachers who know each pupil by name. Come and see us in action.</p>
<div class="st-btns" data-anim="item">
<a class="st-btn" href="#contact"><span>Book a visit</span></a>
<a class="st-btn st-btn--ghost ib-ghost" href="#faq"><span>Admissions</span></a>
</div>
</div>
<div class="ib-stats" data-anim="media">
<div><strong>24</strong><span>pupils per class</span></div>
<div><strong>Good</strong><span>latest inspection</span></div>
<div><strong>1932</strong><span>founded</span></div>
</div>
</div>
</section>
<section id="results" class="st st-stats-counters" data-uid="smvnkxdektbbe">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Brookfield in numbers</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Small school, <span class="hl">big results</span></h2>
<p class="st-lead" data-anim="item"></p>
</header>
<dl class="sc-grid">
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Pupils</dt>
<dd class="sc-value" data-count>420</dd>
<dd class="sc-note">ages 4 to 11</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Reading at age 11</dt>
<dd class="sc-value" data-count>96%</dd>
<dd class="sc-note">at or above expected</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Clubs</dt>
<dd class="sc-value" data-count>30+</dd>
<dd class="sc-note">before and after school</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Adult to pupil</dt>
<dd class="sc-value" data-count>1:12</dd>
<dd class="sc-note">in every classroom</dd>
</div>
</dl>
</div>
</section>
<section id="features" class="st st-features-icon-grid" data-uid="smvnkxdek5jdv">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Learning</p>
<h2 class="st-h2" data-anim="item" data-anim-text>What our pupils <span class="hl">learn</span></h2>
<p class="st-lead" data-anim="item">A broad curriculum with time for curiosity, creativity and fresh air.</p>
</header>
<div class="fg-grid">
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /><path d="M10 9H8" /><path d="M16 13H8" /><path d="M16 17H8" /></svg></span>
<h3 class="fg-title">Reading & writing</h3>
<p class="fg-text">Daily phonics and a library visit every week.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16" /><path d="M18 17V9" /><path d="M13 17V5" /><path d="M8 17v-3" /></svg></span>
<h3 class="fg-title">Maths</h3>
<p class="fg-text">Hands-on lessons that build real confidence with numbers.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" /><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" /></svg></span>
<h3 class="fg-title">Forest school</h3>
<p class="fg-text">A morning outdoors every week, whatever the weather.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" /><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" /><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" /><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" /></svg></span>
<h3 class="fg-title">Art & music</h3>
<p class="fg-text">Every child learns an instrument from Year 3.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></svg></span>
<h3 class="fg-title">Languages</h3>
<p class="fg-text">French and Spanish from Reception upward.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" /></svg></span>
<h3 class="fg-title">Wellbeing</h3>
<p class="fg-text">A school counsellor and calm spaces in every corridor.</p>
</article>
</div>
</div>
</section>
<section id="gallery" class="st st-gallery-grid" data-uid="smvnkxdekxltm">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Gallery</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Life at <span class="hl">Brookfield</span></h2>
<p class="st-lead" data-anim="item">Classrooms, the garden and school events. Tap a photo to see it larger.</p>
</header>
<div class="gg-filters" data-gallery-filters role="group" aria-label="Filter photos" hidden data-all="All"></div>
<ul class="gg-grid" data-gallery>
<li class="gg-item" data-anim="item" data-tag="Classrooms">
<img class="gg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-school.jpg" alt="A bright classroom with colourful shapes">
<p class="gg-cap"><strong class="gg-title">Year 2 classroom</strong><span class="gg-text">Small classes, big tables</span></p>
</li>
<li class="gg-item" data-anim="item" data-tag="Outdoors">
<img class="gg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-nature.jpg" alt="Green hills at sunrise">
<p class="gg-cap"><strong class="gg-title">Outdoor learning</strong><span class="gg-text">Every class goes outside each week</span></p>
</li>
<li class="gg-item" data-anim="item" data-tag="Classrooms">
<img class="gg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-course.png" alt="A lesson on a screen">
<p class="gg-cap"><strong class="gg-title">Computing lab</strong><span class="gg-text">Coding from Year 3</span></p>
</li>
<li class="gg-item" data-anim="item" data-tag="Events">
<img class="gg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/wed-party.jpg" alt="String lights over a playground at dusk">
<p class="gg-cap"><strong class="gg-title">Summer fair</strong><span class="gg-text">Run by parents and pupils</span></p>
</li>
<li class="gg-item" data-anim="item" data-tag="Events">
<img class="gg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-event.jpg" alt="A stage with spotlights">
<p class="gg-cap"><strong class="gg-title">The school play</strong><span class="gg-text">Year 6 leavers’ performance</span></p>
</li>
</ul>
</div>
</section>
<section id="timetable" class="st st-class-timetable" data-uid="smvnkxdek7cnb">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">The school day</p>
<h2 class="st-h2" data-anim="item" data-anim-text>A week at <span class="hl">Brookfield</span></h2>
<p class="st-lead" data-anim="item">A typical week in Year 4. Every class has its own timetable on the parent portal.</p>
</header>
<div class="tt-box" data-anim="media">
<table class="tt">
<thead>
<tr><th scope="col">Day</th><th scope="col">Time</th><th scope="col">Lesson</th><th scope="col">Teacher</th><th scope="col">Where</th></tr>
</thead>
<tbody>
<tr class="tt-row">
<td class="tt-day" data-label="Day">Mon</td>
<td class="tt-time" data-label="Time">9:00</td>
<th class="tt-name" scope="row" data-label="Lesson">Maths</th>
<td class="tt-coach" data-label="Teacher">Mrs Patel</td>
<td class="tt-level-cell" data-label="Where"><span class="tt-level">Classroom</span></td>
</tr>
<tr class="tt-row">
<td class="tt-day" data-label="Day">Mon</td>
<td class="tt-time" data-label="Time">13:15</td>
<th class="tt-name" scope="row" data-label="Lesson">Science</th>
<td class="tt-coach" data-label="Teacher">Mr Owusu</td>
<td class="tt-level-cell" data-label="Where"><span class="tt-level">Lab</span></td>
</tr>
<tr class="tt-row">
<td class="tt-day" data-label="Day">Tue</td>
<td class="tt-time" data-label="Time">9:00</td>
<th class="tt-name" scope="row" data-label="Lesson">Forest school</th>
<td class="tt-coach" data-label="Teacher">Ms Green</td>
<td class="tt-level-cell" data-label="Where"><span class="tt-level">Outdoors</span></td>
</tr>
<tr class="tt-row">
<td class="tt-day" data-label="Day">Wed</td>
<td class="tt-time" data-label="Time">10:45</td>
<th class="tt-name" scope="row" data-label="Lesson">Music</th>
<td class="tt-coach" data-label="Teacher">Mr Lewis</td>
<td class="tt-level-cell" data-label="Where"><span class="tt-level">Music room</span></td>
</tr>
<tr class="tt-row">
<td class="tt-day" data-label="Day">Thu</td>
<td class="tt-time" data-label="Time">9:00</td>
<th class="tt-name" scope="row" data-label="Lesson">Writing</th>
<td class="tt-coach" data-label="Teacher">Mrs Patel</td>
<td class="tt-level-cell" data-label="Where"><span class="tt-level">Classroom</span></td>
</tr>
<tr class="tt-row">
<td class="tt-day" data-label="Day">Fri</td>
<td class="tt-time" data-label="Time">14:00</td>
<th class="tt-name" scope="row" data-label="Lesson">PE</th>
<td class="tt-coach" data-label="Teacher">Coach Dunn</td>
<td class="tt-level-cell" data-label="Where"><span class="tt-level">Hall</span></td>
</tr>
</tbody>
</table>
</div>
<div class="tt-foot" data-anim="item">
<p class="tt-note">Breakfast club from 7:45 am. After-school clubs until 5:30 pm.</p>
<a class="st-btn" href="#"><span>Download all timetables</span></a>
</div>
</div>
</section>
<section id="team" class="st st-team-grid" data-uid="smvnkxdek8jih">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Our staff</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Meet the <span class="hl">team</span></h2>
<p class="st-lead" data-anim="item">Experienced teachers and support staff who love what they do.</p>
</header>
<ul class="tm2-grid">
<li class="tm2-card" data-anim="item">
<div class="tm2-photo">
<img width="400" height="400" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-2.jpg" alt="Mrs Helen Carter">
<div class="tm2-social">
</div>
</div>
<h3 class="tm2-name">Mrs Helen Carter</h3>
<p class="tm2-role">Headteacher</p>
<p class="tm2-bio">Twenty years in primary education and a passion for outdoor learning.</p>
</li>
<li class="tm2-card" data-anim="item">
<div class="tm2-photo">
<img width="400" height="400" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-3.jpg" alt="Mr David Owusu">
<div class="tm2-social">
</div>
</div>
<h3 class="tm2-name">Mr David Owusu</h3>
<p class="tm2-role">Deputy head · Science</p>
<p class="tm2-bio">Runs the science club and the annual rocket day.</p>
</li>
<li class="tm2-card" data-anim="item">
<div class="tm2-photo">
<img width="400" height="400" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-5.jpg" alt="Mrs Asha Patel">
<div class="tm2-social">
</div>
</div>
<h3 class="tm2-name">Mrs Asha Patel</h3>
<p class="tm2-role">Year 4 teacher</p>
<p class="tm2-bio">Maths lead, chess club coach and keen gardener.</p>
</li>
<li class="tm2-card" data-anim="item">
<div class="tm2-photo">
<img width="400" height="400" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-7.jpg" alt="Ms Laura Green">
<div class="tm2-social">
</div>
</div>
<h3 class="tm2-name">Ms Laura Green</h3>
<p class="tm2-role">Forest school leader</p>
<p class="tm2-bio">Qualified forest school practitioner and wildlife lover.</p>
</li>
</ul>
</div>
</section>
<section id="faq" class="st st-faq-grid" data-uid="smvnkxdekhyzv">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">For parents</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Admissions & <span class="hl">the school day</span></h2>
<p class="st-lead" data-anim="item">The questions parents ask us most.</p>
</header>
<dl class="fg2-grid">
<div class="fg2-item" data-anim="item">
<dt class="fg2-q"><span class="fg2-icon" aria-hidden="true">?</span><span>How do I apply for a place?</span></dt>
<dd class="fg2-a">Apply through your local council for Reception. For other year groups, contact the school office about spaces.</dd>
</div>
<div class="fg2-item" data-anim="item">
<dt class="fg2-q"><span class="fg2-icon" aria-hidden="true">?</span><span>What are the school hours?</span></dt>
<dd class="fg2-a">Doors open at 8:40 am and the day ends at 3:15 pm. Breakfast and after-school clubs run from 7:45 am to 5:30 pm.</dd>
</div>
<div class="fg2-item" data-anim="item">
<dt class="fg2-q"><span class="fg2-icon" aria-hidden="true">?</span><span>Do you provide lunches?</span></dt>
<dd class="fg2-a">Yes. Hot lunches are cooked on site every day, with vegetarian and allergy-friendly options.</dd>
</div>
<div class="fg2-item" data-anim="item">
<dt class="fg2-q"><span class="fg2-icon" aria-hidden="true">?</span><span>How do you support children with SEND?</span></dt>
<dd class="fg2-a">Our SENCo works with families and teachers on a plan for every child who needs extra support.</dd>
</div>
<div class="fg2-item" data-anim="item">
<dt class="fg2-q"><span class="fg2-icon" aria-hidden="true">?</span><span>Is there a uniform?</span></dt>
<dd class="fg2-a">Yes, a simple navy uniform. Pre-loved items are free from our parent association.</dd>
</div>
<div class="fg2-item" data-anim="item">
<dt class="fg2-q"><span class="fg2-icon" aria-hidden="true">?</span><span>Can we visit before applying?</span></dt>
<dd class="fg2-a">Of course. We run tours most Tuesday and Thursday mornings. Book a place below.</dd>
</div>
</dl>
</div>
</section>
<section id="contact" class="st st-contact-map" data-uid="smvnkxdek6zo9">
<div class="st-wrap cm">
<div class="cm-info">
<header class="st-head st-head--left cm-head">
<p class="st-eyebrow" data-anim="item">Visit us</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Come and <span class="hl">say hello</span></h2>
<p class="st-lead" data-anim="item">Tours on Tuesday and Thursday mornings at 9:30 am. Please book ahead.</p>
</header>
<ul class="cm-offices">
<li class="cm-office" data-anim="item">
<h3 class="cm-city">Brookfield Primary School</h3>
<address class="cm-address">12 Mill Lane, Brookfield, BR1 4AB</address>
<p class="cm-hours">Office open 8:00 am – 4:30 pm, Mon to Fri</p>
<p class="cm-contact">
<a href="tel:+442079460100"><span>+44 20 7946 0100</span></a>
<a href="mailto:office@webdevpuneet.com"><span>office@webdevpuneet.com</span></a>
</p>
</li>
</ul>
</div>
<div class="cm-map" data-anim="media">
<iframe class="cm-frame" loading="lazy" referrerpolicy="no-referrer-when-downgrade" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.1135%2C51.5185%2C-0.0955%2C51.5265&layer=mapnik&marker=51.5225%2C-0.1045" title="Map showing our London studio"></iframe>
</div>
</div>
</section>
<section class="st st-footer-columns" data-uid="smvnkxdektzkl">
<footer class="st-wrap fo">
<div class="fo-top">
<div class="fo-brand" data-anim="item">
<a class="st-brand" href="#">
<span class="st-brand-mark"><span class="st-brand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" /><path d="M22 10v6" /><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" /></svg></span><span>Brookfield Primary</span></span>
</a>
<p class="fo-tagline">A school where every child is known.</p>
<div><ul class="st-socials">
<li><a class="st-social" href="https://x.com/" aria-label="X (Twitter)"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" /></svg></span></a></li>
<li><a class="st-social" href="https://www.linkedin.com/" aria-label="LinkedIn"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /><rect width="4" height="12" x="2" y="9" /><circle cx="4" cy="4" r="2" /></svg></span></a></li>
<li><a class="st-social" href="https://github.com/" aria-label="GitHub"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" /><path d="M9 18c-4.51 2-5-2-7-2" /></svg></span></a></li>
<li><a class="st-social" href="https://www.youtube.com/" aria-label="YouTube"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" /><path d="m10 15 5-3-5-3z" /></svg></span></a></li>
</ul></div>
</div>
<div class="fo-cols">
<nav class="fo-col" data-anim="item" aria-label="Product">
<h2 class="fo-col-title">Product</h2>
<ul class="fo-links"><li><a href="/features/">Features</a></li><li><a href="/pricing/">Pricing</a></li><li><a href="/integrations/">Integrations</a></li><li><a href="/changelog/">Changelog</a></li></ul>
</nav>
<nav class="fo-col" data-anim="item" aria-label="Company">
<h2 class="fo-col-title">Company</h2>
<ul class="fo-links"><li><a href="/about/">About</a></li><li><a href="/careers/">Careers</a></li><li><a href="/customers/">Customers</a></li><li><a href="/contact/">Contact</a></li></ul>
</nav>
<nav class="fo-col" data-anim="item" aria-label="Resources">
<h2 class="fo-col-title">Resources</h2>
<ul class="fo-links"><li><a href="/blog/">Blog</a></li><li><a href="/guides/">Guides</a></li><li><a href="/help/">Help centre</a></li><li><a href="https://status.webdevpuneet.com">Status</a></li></ul>
</nav>
</div>
</div>
<div class="fo-bottom">
<p class="fo-copy">© 2026 Brookfield Primary School</p>
<ul class="fo-legal"><li><a href="/privacy/">Privacy</a></li><li><a href="/terms/">Terms</a></li><li><a href="/cookies/">Cookies</a></li></ul>
<a class="fo-totop" href="#" data-totop><span>Back to top</span> <span aria-hidden="true">↑</span></a>
</div>
</footer>
</section>@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700;800;900&display=swap');
body{margin:0;background:#ffffff}
html{scroll-behavior:smooth}section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.st{--st-brand:#1d4ed8;--st-btn-text:#ffffff;--st-bg:#ffffff;--st-surface:#eff6ff;--st-text:#0f172a;--st-muted:#475569;--st-radius:14;--st-max:1200;--st-font-heading:"Lora", serif;--st-font-body:"DM Sans", sans-serif}
.st{--st-pad:clamp(20px,5cqi,56px);container:st/inline-size;position:relative;overflow:hidden;background:var(--st-bg);color:var(--st-text);font-family:var(--st-font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
:where(.st) *,:where(.st) *::before,:where(.st) *::after{box-sizing:border-box;margin:0;padding:0}
:where(.st img){display:block;max-width:100%;height:auto}
:where(.st a){color:inherit}
:where(.st h1,.st h2,.st h3){font-family:var(--st-font-heading);line-height:1.08;letter-spacing:-.025em;font-weight:800;color:var(--st-text)}
.st .hl{color:var(--st-brand)}
.st [data-edit]:empty,.st [data-i-edit]:empty{display:none}
.st-wrap{width:100%;max-width:calc(var(--st-max) * 1px);margin:0 auto;padding-left:var(--st-pad);padding-right:var(--st-pad)}
.st-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--st-brand)}
.st-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand);font-size:13.5px;font-weight:700}
.st-btns{display:flex;flex-wrap:wrap;gap:12px}
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border-radius:calc(var(--st-radius) * 1px);border:2px solid var(--st-brand);background:var(--st-brand);color:var(--st-btn-text);font:700 16px/1 var(--st-font-body);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.st-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px color-mix(in srgb,var(--st-brand) 35%,transparent)}
.st-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:3px}
.st-btn--ghost{background:transparent;color:var(--st-text);border-color:color-mix(in srgb,var(--st-text) 22%,transparent)}
.st-btn--ghost:hover{box-shadow:none;border-color:var(--st-text)}
.st-lead{font-size:clamp(17px,1.2cqi + 12px,20px);line-height:1.65;color:var(--st-muted)}
.st-head{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:46em;margin:0 auto clamp(36px,5cqi,64px);text-align:center}
.st-head--left{align-items:flex-start;margin-left:0;text-align:left}
.st-h2{font-size:clamp(30px,2.6cqi + 16px,48px)}
.st-icon{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:calc(var(--st-radius) * .85px);background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand)}
.st-icon svg{width:24px;height:24px}
.st-icon:empty{display:none}
.st-checks{list-style:none;display:flex;flex-direction:column;gap:11px}
.st-checks li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.5}
.st-checks li::before{content:"";position:absolute;left:0;top:.12em;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--st-brand) 15%,transparent)}
.st-checks li::after{content:"";position:absolute;left:5px;top:calc(.12em + 5px);width:10px;height:10px;background:var(--st-brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.st *{transition:none!important;animation:none!important}}
/* Simple Sticky Navbar */
.st-navbar-simple{overflow:visible;background:color-mix(in srgb,var(--st-bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.st-brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--st-text)}
.st-brand-img{height:32px;width:auto;max-width:180px;object-fit:contain}
.st-brand-mark{display:inline-flex;align-items:center;gap:10px;font:800 21px/1 var(--st-font-heading);letter-spacing:-.03em}
.st-brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:calc(var(--st-radius) * .7px);background:var(--st-brand);color:var(--st-btn-text)}
.st-brand-icon svg{width:19px;height:19px}
.st:has([data-sticky-flag]){position:sticky;top:0;z-index:50;transition:box-shadow .3s ease}
.st.is-scrolled{box-shadow:0 10px 30px -18px rgba(15,23,42,.35)}
.st-burger{display:none;position:relative;flex:none;width:44px;height:44px;border:0;border-radius:calc(var(--st-radius) * .7px);background:color-mix(in srgb,var(--st-text) 7%,transparent);color:var(--st-text);cursor:pointer}
.st-burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s ease,opacity .2s ease}
.st-burger span:nth-child(1){top:15px}.st-burger span:nth-child(2){top:21px}.st-burger span:nth-child(3){top:27px}
.st-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.st-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.st-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.st-burger:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:2px}
.nb{position:relative;display:flex;align-items:center;gap:clamp(20px,3cqi,40px);min-height:72px}
.nb-nav{flex:1;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nb-links{list-style:none;display:flex;align-items:center;gap:4px;margin:0 auto}
.nb-link{display:block;padding:8px 14px;border-radius:calc(var(--st-radius) * .7px);color:var(--st-muted);font-weight:600;font-size:15.5px;text-decoration:none;transition:color .2s ease,background .2s ease}
.nb-link:hover{color:var(--st-text);background:color-mix(in srgb,var(--st-text) 6%,transparent)}
.nb-link[aria-current="page"]{color:var(--st-brand);background:color-mix(in srgb,var(--st-brand) 11%,transparent)}
.nb-actions{display:flex;align-items:center;gap:18px}
.nb-login{color:var(--st-text);font-weight:600;font-size:15.5px;text-decoration:none}
.nb-login:hover{color:var(--st-brand)}
.nb .nb-cta{min-height:44px;padding:0 20px;font-size:15px}
@container st (max-width:900px){
.nb .st-burger{display:inline-block;margin-left:auto}
.nb-nav{position:absolute;left:var(--st-pad);right:var(--st-pad);top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:8px;padding:10px;border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-bg);border:1px solid color-mix(in srgb,var(--st-text) 9%,transparent);box-shadow:0 24px 60px -24px rgba(15,23,42,.35)}
.nb-links{flex-direction:column;align-items:stretch;gap:2px;margin:0}
.nb-link{padding:12px 14px;font-size:16.5px;color:var(--st-text)}
.nb-actions{flex-direction:column;align-items:stretch;gap:10px;padding:12px 4px 4px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.nb-login{padding:8px 10px}
.nb .nb-cta{width:100%;min-height:48px}
.has-menu:not(.menu-open) .nb-nav{display:none}
.st:not(.has-menu) .nb{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.st:not(.has-menu) .nb-nav{position:static;flex-basis:100%;box-shadow:none}
.st:not(.has-menu) .st-burger{display:none}
}
/* Image Background Hero */
.st-image-background-hero{min-height:min(88vh,760px);display:flex;align-items:stretch;background:var(--st-bg)}
.ib-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.ib-shade{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--st-bg) 88%,transparent) 0%,color-mix(in srgb,var(--st-bg) 55%,transparent) 55%,color-mix(in srgb,var(--st-bg) 15%,transparent) 100%),linear-gradient(0deg,color-mix(in srgb,var(--st-bg) 70%,transparent),transparent 45%)}
.ib{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding-top:clamp(72px,10cqi,140px);padding-bottom:clamp(32px,4cqi,48px)}
.ib-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:640px}
.ib-eyebrow{color:var(--st-brand)}
.ib-title{font-size:clamp(42px,5.6cqi + 10px,80px);line-height:1.02}
.ib-lead{color:var(--st-muted);max-width:32em}
.ib-ghost{color:var(--st-text);border-color:color-mix(in srgb,var(--st-text) 55%,transparent);backdrop-filter:blur(6px)}
.ib-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--st-text) 22%,transparent)}
.ib-stats div{display:flex;flex-direction:column;gap:2px}
.ib-stats strong{font-family:var(--st-font-heading);font-size:clamp(26px,2.6cqi + 8px,38px);line-height:1.1;color:var(--st-text)}
.ib-stats span{font-size:14px;color:var(--st-muted)}
@container st (max-width:640px){.ib-stats{grid-template-columns:1fr}.ib-shade{background:color-mix(in srgb,var(--st-bg) 72%,transparent)}}
/* Animated Stats Counters */
.st-stats-counters{padding:clamp(56px,7cqi,96px) 0}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent);overflow:hidden}
.sc-stat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:clamp(28px,3.4cqi,44px) 20px;text-align:center}
.sc-stat + .sc-stat{border-left:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.sc-value{order:-1;margin:0;font:800 clamp(38px,3.4cqi + 16px,58px)/1 var(--st-font-heading);letter-spacing:-.035em;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,var(--st-text),var(--st-brand));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.16em;margin-bottom:-.16em}
.sc-label{font-weight:700;font-size:16.5px}
.sc-note{margin:0;color:var(--st-muted);font-size:14.5px}
.sc-note:empty{display:none}
@container st (max-width:720px){.sc-grid{grid-template-columns:1fr 1fr}.sc-stat + .sc-stat{border-left:0}.sc-stat:nth-child(even){border-left:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}.sc-stat:nth-child(n+3){border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}}
/* Icon Grid Features */
.st-features-icon-grid{padding:clamp(64px,8cqi,112px) 0}
.fg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2cqi,24px)}
.fg-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(22px,2.4cqi,30px);border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent);transition:transform .2s ease,box-shadow .2s ease}
.fg-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--st-text) 40%,transparent)}
.fg-card .st-icon{margin-bottom:6px}
.fg-title{font-size:19px;letter-spacing:-.01em}
.fg-text{color:var(--st-muted);font-size:16px}
.fg-link{margin-top:auto;padding-top:4px;color:var(--st-brand);font-weight:700;font-size:15px;text-decoration:none}
.fg-link:hover{text-decoration:underline}
@container st (max-width:960px){.fg-grid{grid-template-columns:repeat(2,1fr)}}
@container st (max-width:600px){.fg-grid{grid-template-columns:1fr}}
/* Filterable Image Gallery */
.st-gallery-grid{padding:clamp(56px,7cqi,104px) 0}
.gg-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:clamp(24px,3cqi,36px)}
.gg-filters:empty{display:none}
.gg-chip{min-height:40px;padding:0 18px;border:1px solid color-mix(in srgb,var(--st-text) 14%,transparent);border-radius:999px;background:transparent;color:var(--st-text);font:600 14.5px/1 var(--st-font-body);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.gg-chip:hover{border-color:var(--st-brand);color:var(--st-brand)}
.gg-chip[aria-pressed="true"]{background:var(--st-brand);border-color:var(--st-brand);color:var(--st-btn-text)}
.gg-chip:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:2px}
.gg-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(12px,1.6cqi,20px)}
.gg-item{position:relative;overflow:hidden;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);aspect-ratio:4/3}
.gg-item[hidden]{display:none}
.gg-item[role="button"]{cursor:zoom-in}
.gg-item:focus-visible{outline:3px solid var(--st-brand);outline-offset:3px}
.gg-img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.gg-item:hover .gg-img{transform:scale(1.07)}
.gg-cap{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:2px;padding:44px 16px 14px;color:#fff;background:linear-gradient(to top,rgba(10,12,20,.78),transparent);opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.gg-item:hover .gg-cap,.gg-item:focus-visible .gg-cap{opacity:1;transform:none}
.gg-title{font-size:16px;line-height:1.3}
.gg-text{font-size:13.5px;opacity:.85}
@media (hover:none){.gg-cap{opacity:1;transform:none}}
.stg-lb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);background:rgba(8,10,16,.92);animation:stg-fade .2s ease}
.stg-lb[hidden]{display:none}
.stg-lb-fig{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(1100px,100%);max-height:100%;margin:0}
.stg-lb-img{display:block;max-width:100%;max-height:calc(var(--lb-h,100vh) - 150px);border-radius:10px;object-fit:contain;background:#111}
.stg-lb-cap{color:#e5e7eb;font:500 15px/1.5 system-ui,sans-serif;text-align:center}
.stg-lb-cap:empty{display:none}
.stg-lb-close,.stg-lb-nav{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font:400 30px/1 system-ui,sans-serif;cursor:pointer;transition:background .2s ease}
.stg-lb-close svg,.stg-lb-nav svg{display:block;width:22px;height:22px;pointer-events:none}
.stg-lb-close:hover,.stg-lb-nav:hover{background:rgba(255,255,255,.24)}
.stg-lb-close:focus-visible,.stg-lb-nav:focus-visible{outline:3px solid #fff;outline-offset:2px}
.stg-lb-close{top:16px;right:16px}
.stg-lb-prev{left:16px;top:50%;margin-top:-24px}
.stg-lb-next{right:16px;top:50%;margin-top:-24px}
.stg-lb.is-single .stg-lb-nav{display:none}
.stg-lb-count{position:absolute;bottom:14px;left:0;right:0;margin:0;color:#9ca3af;font:500 13px/1 system-ui,sans-serif;text-align:center}
html.stg-open{overflow:hidden}
@keyframes stg-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.stg-lb{animation:none}.gg-img,.gg-cap{transition:none}}
@container st (max-width:520px){.gg-grid{grid-template-columns:1fr 1fr}.gg-cap{display:none}}
/* Class Timetable */
.st-class-timetable{padding:clamp(64px,8cqi,112px) 0}
.tt-box{max-width:1080px;margin:0 auto;overflow:hidden;border-radius:calc(var(--st-radius) * 1.4px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 10%,transparent)}
.tt{width:100%;border-collapse:collapse;font-size:15.5px}
.tt th,.tt td{padding:16px 20px;text-align:left;vertical-align:middle}
.tt thead th{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--st-muted);border-bottom:1px solid color-mix(in srgb,var(--st-text) 12%,transparent)}
.tt tbody tr+tr{border-top:1px solid color-mix(in srgb,var(--st-text) 7%,transparent)}
.tt tbody tr:hover{background:color-mix(in srgb,var(--st-brand) 6%,transparent)}
.tt-day{font-weight:700}
.tt-time{font-variant-numeric:tabular-nums;color:var(--st-muted);white-space:nowrap}
.tt-name{font:600 17px/1.3 var(--st-font-heading);letter-spacing:.01em}
.tt-coach{color:var(--st-muted)}
.tt-level{display:inline-block;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--st-brand) 16%,transparent);color:var(--st-brand);font-size:12.5px;font-weight:700;white-space:nowrap}
.tt-foot{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:clamp(32px,4cqi,52px);text-align:center}
.tt-note{color:var(--st-muted);font-size:14px;max-width:44em}
@container st (max-width:720px){
.tt-box{background:none;border:0;border-radius:0}
.tt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tt,.tt tbody{display:block}
.tt tbody{display:grid;gap:12px}
.tt tbody tr{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--st-text) 10%,transparent)!important;border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-surface)}
.tt th,.tt td{display:contents}
.tt tbody [data-label]::before{content:attr(data-label);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--st-muted);align-self:center}
}
/* Team Grid */
.st-team-grid{padding:clamp(64px,8cqi,112px) 0}
.tm2-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4cqi,32px)}
.tm2-card{display:flex;flex-direction:column}
.tm2-photo{position:relative;overflow:hidden;margin-bottom:16px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);aspect-ratio:1}
.tm2-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tm2-card:hover .tm2-photo img{transform:scale(1.05)}
.tm2-social{position:absolute;left:12px;bottom:12px;display:flex;gap:8px;transform:translateY(calc(100% + 16px));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tm2-card:hover .tm2-social,.tm2-card:focus-within .tm2-social{transform:none}
@media (hover:none){.tm2-social{transform:none}}
.tm2-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);color:#0f172a;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.tm2-social a:hover{background:var(--st-brand);color:var(--st-btn-text)}
.tm2-social svg{width:17px;height:17px}
.tm2-name{font-size:18px;letter-spacing:-.01em}
.tm2-role{color:var(--st-brand);font-size:14.5px;font-weight:600;margin-top:2px}
.tm2-bio{color:var(--st-muted);font-size:15px;margin-top:8px}
.tm2-bio:empty{display:none}
@container st (max-width:960px){.tm2-grid{grid-template-columns:repeat(3,1fr)}}
@container st (max-width:700px){.tm2-grid{grid-template-columns:repeat(2,1fr)}}
/* FAQ Grid */
.st-faq-grid{padding:clamp(64px,8cqi,112px) 0}
.fg2-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8cqi,20px)}
.fg2-item{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4cqi,28px);border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.fg2-q{display:flex;align-items:flex-start;gap:12px;font:700 17.5px/1.4 var(--st-font-heading)}
.fg2-icon{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--st-brand) 18%,transparent);color:var(--st-brand);font:800 14px/1 var(--st-font-heading)}
.fg2-a{margin:0;padding-left:38px;color:var(--st-muted);font-size:16px;line-height:1.65}
@container st (max-width:720px){.fg2-grid{grid-template-columns:1fr}}
/* Contact With Map */
.st-contact-map{padding:clamp(64px,8cqi,112px) 0}
.cm{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch;gap:clamp(32px,5cqi,72px)}
.cm-info{display:flex;flex-direction:column;gap:32px}
.cm-head{margin:0}
.cm-offices{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.cm-office{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface)}
.cm-city{font-size:18px;margin-bottom:4px}
.cm-address{font-style:normal;color:var(--st-muted);font-size:15.5px;line-height:1.6}
.cm-hours{color:var(--st-text);font-size:14.5px;font-weight:600;margin-top:4px}
.cm-contact{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.cm-contact a{color:var(--st-brand);font-weight:600;font-size:15px;text-decoration:none;word-break:break-word}
.cm-contact a:hover{text-decoration:underline}
.cm-map{min-height:420px;overflow:hidden;border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 9%,transparent);box-shadow:0 30px 70px -40px rgba(28,25,23,.45)}
.cm-frame{display:block;width:100%;height:100%;min-height:420px;border:0}
@container st (max-width:860px){.cm{grid-template-columns:1fr}.cm-map,.cm-frame{min-height:320px}}
/* Multi-Column Footer */
.st-footer-columns{padding:clamp(56px,7cqi,88px) 0 28px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.st-brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--st-text)}
.st-brand-img{height:32px;width:auto;max-width:180px;object-fit:contain}
.st-brand-mark{display:inline-flex;align-items:center;gap:10px;font:800 21px/1 var(--st-font-heading);letter-spacing:-.03em}
.st-brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:calc(var(--st-radius) * .7px);background:var(--st-brand);color:var(--st-btn-text)}
.st-brand-icon svg{width:19px;height:19px}
.st-socials{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.st-social{display:grid;place-items:center;width:40px;height:40px;border-radius:calc(var(--st-radius) * .7px);color:var(--st-muted);background:color-mix(in srgb,var(--st-text) 6%,transparent);transition:color .2s ease,background .2s ease,transform .2s ease}
.st-social:hover{color:var(--st-btn-text);background:var(--st-brand);transform:translateY(-2px)}
.st-social > span{display:block;line-height:0}
.st-social svg{display:block;width:19px;height:19px}
.fo-top{display:grid;grid-template-columns:minmax(220px,1.1fr) 2fr;gap:clamp(36px,5cqi,80px)}
.fo-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.fo-tagline{color:var(--st-muted);font-size:15.5px;max-width:24em}
.fo-tagline:empty{display:none}
.fo-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:28px}
.fo-col-title{font:700 14px/1.2 var(--st-font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--st-text);margin-bottom:16px}
.fo-links{list-style:none;display:flex;flex-direction:column;gap:11px}
.fo-links a,.fo-legal a{color:var(--st-muted);font-size:15px;text-decoration:none;transition:color .2s ease}
.fo-links a:hover,.fo-legal a:hover{color:var(--st-brand)}
.fo-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(40px,5cqi,64px);padding-top:24px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.fo-copy{color:var(--st-muted);font-size:14px;margin-right:auto}
.fo-legal{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px}
.fo-legal a{font-size:14px}
.fo-totop{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--st-text) 6%,transparent);color:var(--st-text);font-size:14px;font-weight:600;text-decoration:none}
.fo-totop:hover{background:var(--st-brand);color:var(--st-btn-text)}
@container st (max-width:820px){.fo-top{grid-template-columns:1fr}}
@container st (max-width:520px){.fo-cols{grid-template-columns:1fr 1fr}.fo-copy{margin-right:0;flex-basis:100%}}
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var anim = G && !reduce;
document.querySelectorAll('.st').forEach(function (sec) {
var btn = sec.querySelector('[data-menu-toggle]');
var panel = sec.querySelector('[data-menu]');
if (btn && panel) {
sec.classList.add('has-menu');
var isOpen = false;
var mobile = function () { return getComputedStyle(btn).display !== 'none'; };
// The toggle and the panel's controls, in document order (the toggle may come after the panel)
var focusables = function () {
return Array.prototype.filter.call(sec.querySelectorAll('a[href], button'), function (el) { return el === btn || panel.contains(el); });
};
var open = function () {
isOpen = true;
sec.classList.add('menu-open');
btn.setAttribute('aria-expanded', 'true');
if (anim) {
G.fromTo(panel, { opacity: 0, y: -12 }, { opacity: 1, y: 0, duration: 0.35, ease: 'power3.out', clearProps: 'transform,opacity' });
G.fromTo(panel.querySelectorAll('[data-menu-item]'), { opacity: 0, y: -8 }, { opacity: 1, y: 0, duration: 0.3, stagger: 0.04, delay: 0.05, ease: 'power2.out', clearProps: 'transform,opacity' });
}
var first = panel.querySelector('a[href], button');
if (first) first.focus();
};
var close = function (returnFocus) {
if (!isOpen) return;
isOpen = false;
btn.setAttribute('aria-expanded', 'false');
var done = function () { sec.classList.remove('menu-open'); };
if (anim) G.to(panel, { opacity: 0, y: -8, duration: 0.2, ease: 'power2.in', onComplete: function () { done(); G.set(panel, { clearProps: 'transform,opacity' }); } });
else done();
if (returnFocus) btn.focus();
};
btn.addEventListener('click', function () { if (isOpen) close(false); else open(); });
document.addEventListener('keydown', function (e) {
if (!isOpen) return;
if (e.key === 'Escape') { close(true); return; }
if (e.key === 'Tab') {
var f = focusables(), first = f[0], last = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
}
});
document.addEventListener('click', function (e) { if (isOpen && !sec.contains(e.target)) close(false); });
panel.addEventListener('click', function (e) { if (e.target.closest('a')) close(false); });
window.addEventListener('resize', function () { if (isOpen && !mobile()) close(false); });
}
sec.querySelectorAll('[data-dismiss]').forEach(function (x) {
x.addEventListener('click', function () {
var box = x.closest('[data-dismissable]');
if (!box) return;
if (anim) G.to(box, { height: 0, opacity: 0, paddingTop: 0, paddingBottom: 0, duration: 0.35, ease: 'power2.inOut', onComplete: function () { box.remove(); } });
else box.remove();
});
});
if (sec.querySelector('[data-sticky-flag]')) {
var hideOn = !!sec.querySelector('[data-hide-flag]');
var last = window.scrollY, hidden = false;
var onScroll = function () {
var y = window.scrollY;
sec.classList.toggle('is-scrolled', y > 8);
if (hideOn && !sec.classList.contains('menu-open')) {
var down = y > last && y > 120;
if (down !== hidden) {
hidden = down;
if (anim) G.to(sec, { yPercent: down ? -100 : 0, duration: 0.35, ease: 'power2.out' });
else sec.style.transform = down ? 'translateY(-100%)' : '';
}
}
last = y;
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
}
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!G || reduce || window.ST_STILL) return;
if (window.ScrollTrigger) G.registerPlugin(ScrollTrigger);
document.querySelectorAll('.st [data-count]').forEach(function (el) {
var host = el.closest('.st');
if (host && /"count":true/.test(host.getAttribute('data-scroll') || '')) return; // counted by its scroll animation
var text = el.textContent;
var m = text.match(/\d[\d,]*(\.\d+)?/);
if (!m) return;
var raw = m[0];
var dec = m[1] ? m[1].length - 1 : 0;
var commas = raw.indexOf(',') > -1;
var target = parseFloat(raw.replace(/,/g, ''));
var pre = text.slice(0, m.index), post = text.slice(m.index + raw.length);
var fmt = function (v) {
var s = v.toFixed(dec);
if (commas) { var p = s.split('.'); p[0] = p[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); s = p.join('.'); }
return pre + s + post;
};
el.setAttribute('aria-label', text.trim());
var o = { v: 0 };
// The real value stays in place until the count starts (it starts from 0 on enter)
G.fromTo(o, { v: 0 }, {
v: target, duration: 2, ease: 'power2.out', immediateRender: false,
scrollTrigger: window.ScrollTrigger ? { trigger: el, start: 'top 90%', once: true } : undefined,
onUpdate: function () { el.textContent = fmt(o.v); },
onComplete: function () { el.textContent = text; }
});
});
})();
(function () {
var viewer, imgEl, capEl, countEl, items = [], index = 0, opener = null;
function build() {
if (viewer) return;
viewer = document.createElement('div');
viewer.className = 'stg-lb';
viewer.setAttribute('role', 'dialog');
viewer.setAttribute('aria-modal', 'true');
viewer.setAttribute('aria-label', 'Image viewer');
viewer.hidden = true;
viewer.innerHTML = '<button type="button" class="stg-lb-close" aria-label="Close"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>' +
'<button type="button" class="stg-lb-nav stg-lb-prev" aria-label="Previous image"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 5-7 7 7 7"/></svg></button>' +
'<figure class="stg-lb-fig"><img class="stg-lb-img" alt=""><figcaption class="stg-lb-cap"></figcaption></figure>' +
'<button type="button" class="stg-lb-nav stg-lb-next" aria-label="Next image"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 5 7 7-7 7"/></svg></button>' +
'<p class="stg-lb-count" aria-live="polite"></p>';
document.body.appendChild(viewer);
imgEl = viewer.querySelector('.stg-lb-img');
capEl = viewer.querySelector('.stg-lb-cap');
countEl = viewer.querySelector('.stg-lb-count');
viewer.addEventListener('click', function (e) {
if (e.target === viewer || e.target.classList.contains('stg-lb-fig')) close();
});
viewer.querySelector('.stg-lb-close').addEventListener('click', close);
viewer.querySelector('.stg-lb-prev').addEventListener('click', function () { show(index - 1); });
viewer.querySelector('.stg-lb-next').addEventListener('click', function () { show(index + 1); });
document.addEventListener('keydown', function (e) {
if (viewer.hidden) return;
if (e.key === 'Escape') close();
else if (e.key === 'ArrowLeft') show(index - 1);
else if (e.key === 'ArrowRight') show(index + 1);
else if (e.key === 'Tab') {
var f = viewer.querySelectorAll('button');
var first = f[0], last = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
}
});
}
function show(i) {
if (!items.length) return;
index = (i + items.length) % items.length;
var fig = items[index], img = fig.querySelector('img');
imgEl.src = img.currentSrc || img.src;
imgEl.alt = img.alt || '';
var cap = fig.querySelector('.gg-cap');
var parts = cap ? [].slice.call(cap.children).map(function (c) { return c.textContent.trim(); }).filter(Boolean) : [];
capEl.textContent = parts.join(' — ');
countEl.textContent = (index + 1) + ' / ' + items.length;
viewer.classList.toggle('is-single', items.length < 2);
}
// In the editor the preview is a tall frame inside a scrolling panel: centre the viewer in the
// part of the frame you can actually see (a normal page uses the whole window)
// The part of this frame you can see when it sits inside a scrolling panel of the editor
// (null on a normal page): { top, bottom } in the frame's own pixels
function seenRange() {
var fe = null, pw = null;
try { fe = window.frameElement; pw = window.parent; } catch (err) { return null; }
if (!fe || !pw || pw === window) return null;
try {
var r = fe.getBoundingClientRect(), k = r.width / (window.innerWidth || r.width) || 1;
var top = 0, bottom = pw.innerHeight;
for (var n = fe.parentElement; n; n = n.parentElement) {
if (/(auto|scroll|hidden|clip)/.test(pw.getComputedStyle(n).overflowY)) {
var nr = n.getBoundingClientRect();
top = Math.max(top, nr.top); bottom = Math.min(bottom, nr.bottom);
}
}
return { top: Math.max(0, top - r.top) / k, bottom: (Math.min(bottom, r.bottom) - r.top) / k };
} catch (err) { return null; }
}
function fit() {
if (!viewer) return;
var range = window.ST_STILL || window.ST_PREVIEW ? seenRange() : null;
if (!range || range.bottom - range.top < 120) { viewer.style.top = ''; viewer.style.bottom = ''; viewer.style.removeProperty('--lb-h'); return; }
viewer.style.top = range.top + 'px';
viewer.style.bottom = Math.max(0, window.innerHeight - range.bottom) + 'px';
viewer.style.setProperty('--lb-h', (range.bottom - range.top) + 'px');
}
function watch(on) {
try { var w = window.parent; if (!w || w === window) return; var f = on ? 'addEventListener' : 'removeEventListener'; w[f]('scroll', fit, true); w[f]('resize', fit); } catch (err) { /* cross-origin parent */ }
}
function open(list, i, from) {
build();
items = list; opener = from;
show(i);
viewer.hidden = false;
fit(); watch(true);
document.documentElement.classList.add('stg-open');
viewer.querySelector('.stg-lb-close').focus();
}
function close() {
viewer.hidden = true;
watch(false);
document.documentElement.classList.remove('stg-open');
if (opener) opener.focus();
}
document.querySelectorAll('.st').forEach(function (sec) {
var grid = sec.querySelector('[data-gallery]');
if (!grid) return;
var all = [].slice.call(grid.querySelectorAll('.gg-item'));
var bar = sec.querySelector('[data-gallery-filters]');
if (bar && !window.ST_STILL) {
var tags = [];
all.forEach(function (it) { var t = (it.getAttribute('data-tag') || '').trim(); if (t && tags.indexOf(t) < 0) tags.push(t); });
if (tags.length > 1) {
var label = bar.getAttribute('data-all') || 'All';
var buttons = [];
[''].concat(tags).forEach(function (t) {
var b = document.createElement('button');
b.type = 'button';
b.className = 'gg-chip';
b.textContent = t || label;
b.setAttribute('aria-pressed', t ? 'false' : 'true');
b.addEventListener('click', function () {
buttons.forEach(function (x) { x.setAttribute('aria-pressed', String(x === b)); });
all.forEach(function (it) { it.hidden = !!t && (it.getAttribute('data-tag') || '').trim() !== t; });
});
buttons.push(b);
bar.appendChild(b);
});
bar.hidden = false;
}
}
var editing = window.ST_STILL || window.ST_PREVIEW;
all.forEach(function (it) {
var img = it.querySelector('img');
if (!img) return;
function go() {
var visible = all.filter(function (x) { return !x.hidden; });
open(visible, visible.indexOf(it), it);
}
if (editing) {
// In the editor the click also selects the photo in the panel (the editor handles that),
// and the viewer opens on top so you can check it
it.style.cursor = 'zoom-in';
it.addEventListener('click', go);
return;
}
it.setAttribute('tabindex', '0');
it.setAttribute('role', 'button');
it.setAttribute('aria-label', 'View larger: ' + (img.alt || 'image'));
it.addEventListener('click', go);
it.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(); } });
});
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (G && window.ScrollToPlugin) G.registerPlugin(ScrollToPlugin);
document.querySelectorAll('.st [data-totop]').forEach(function (a) {
a.addEventListener('click', function (e) {
e.preventDefault();
if (G && window.ScrollToPlugin && !reduce) G.to(window, { scrollTo: 0, duration: 1, ease: 'power3.inOut' });
else window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' });
});
});
})();
(function () {
if (!window.gsap) return;
if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
if (window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);
var TEXT = window.SplitText ? {"split":"words","part":"words","mask":"words","vars":{"yPercent":110,"stagger":0.06,"duration":0.8}} : null;
if (TEXT) gsap.registerPlugin(SplitText);
function run() {
document.querySelectorAll('.st:not([data-scroll])').forEach(function (section) {
var heads = TEXT ? section.querySelectorAll('[data-anim-text]') : [];
var items = section.querySelectorAll(heads.length ? '[data-anim="item"]:not([data-anim-text])' : '[data-anim="item"]');
var media = section.querySelectorAll('[data-anim="media"]');
var tl = gsap.timeline({
defaults: { ease: 'power3.out', duration: 0.80 },
scrollTrigger: window.ScrollTrigger ? (window.ST_PREVIEW ? { trigger: section, start: 'top 80%', toggleActions: 'play reset play reset' } : { trigger: section, start: 'top 80%', once: true }) : undefined
});
Array.prototype.forEach.call(heads, function (el, i) {
var opts = { type: TEXT.split };
if (TEXT.mask) opts.mask = TEXT.mask;
var parts = SplitText.create(el, opts)[TEXT.part];
// The mask clips each line or word to its line box, which cuts off descenders (g, y, p):
// give the mask a little room below and take it back with a negative margin
if (TEXT.mask) Array.prototype.forEach.call(parts, function (p) { var m = p.parentElement; if (m && m !== el) { m.style.paddingBottom = '.22em'; m.style.marginBottom = '-.22em'; } });
tl.from(parts, Object.assign({}, TEXT.vars), i ? '<0.1' : 0);
});
if (items.length) tl.from(items, {"y":28,"opacity":0,"stagger":0.09,"clearProps":"transform,opacity"}, heads.length ? '<0.2' : 0);
if (media.length) tl.from(media, {"y":40,"opacity":0,"duration":1.1,"clearProps":"transform,opacity"}, items.length || heads.length ? '<0.15' : 0);
});
}
// Split text only after the fonts load, so lines break where they finally will
if (TEXT && document.fonts && document.fonts.ready) document.fonts.ready.then(run); else run();
})();