/* WLDS mobile shell — 11 Sep 2026 (phase 1 homepage, phase 3 every public page). * * A layer, not a redesign. Nothing here touches screens 1024px and wider; * below that it re-arranges what the page already has: a sticky Book / * WhatsApp / Call bar instead of the lone floating circle, a cream hero with * the photo as a card under the buttons, trust badges as one scrolling row of * chips, the eight service cards as a tight two-column grid of tappable * tiles, and every section's padding brought in. * * Switching it off: add ?classic=1 to any URL (remembered on that phone until * ?shell=1), or remove the two tags in : this file and mobile-shell.js. * Every rule is scoped under html:not(.ms-off) so the classic flag wins. */ :root { --ms-bar-h: 64px; } .ms-short, .ms-only, .ms-bar { display: none; } /* ─── Phones and tablets: the action bar ─── */ @media (max-width: 1023.98px) { html:not(.ms-off) body.ms-on { padding-bottom: calc(var(--ms-bar-h) + env(safe-area-inset-bottom, 0px)); } html:not(.ms-off) .ms-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: 1.35fr 1fr 0.85fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(247, 244, 239, 0.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid rgba(22, 18, 13, 0.10); } html:not(.ms-off) .ms-bar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 999px; text-decoration: none; font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap; } html:not(.ms-off) .ms-bar a .material-symbols-outlined { font-size: 20px; } html:not(.ms-off) .ms-bar a svg { width: 18px; height: 18px; flex: 0 0 auto; } html:not(.ms-off) .ms-bar-book { background: #C5341E; color: #fff; } html:not(.ms-off) .ms-bar-wa { background: #25d366; color: #16120D; } html:not(.ms-off) .ms-bar-call { background: #fff; color: #16120D; border: 1.5px solid rgba(22, 18, 13, 0.25); } /* The bar replaces the floating circle and the back-to-top button. */ html:not(.ms-off) .whatsapp-float, html:not(.ms-off) #scroll-top { display: none !important; } /* Website chat launcher, chat panel and the package selection bar sit above it. */ html:not(.ms-off) #wlds-chat-launch { bottom: calc(var(--ms-bar-h) + 12px + env(safe-area-inset-bottom, 0px)) !important; } html:not(.ms-off) #wlds-chat-panel { bottom: calc(var(--ms-bar-h) + 12px + env(safe-area-inset-bottom, 0px)) !important; height: min(560px, calc(100vh - var(--ms-bar-h) - 4rem)) !important; } html:not(.ms-off) #wlds-selection-bar { bottom: calc(var(--ms-bar-h) + env(safe-area-inset-bottom, 0px)) !important; } } /* ─── Phones ─── */ @media (max-width: 767.98px) { html:not(.ms-off) .ms-short { display: inline; } html:not(.ms-off) .ms-long { display: none; } html:not(.ms-off) .ms-only { display: inline-flex; } /* Header: the bar has Book, so the top pill goes and the logo gets its room. */ html:not(.ms-off) nav.glass-nav { min-height: 72px !important; } html:not(.ms-off) nav.glass-nav .book-now { display: none; } html:not(.ms-off) nav.glass-nav > div:first-child { min-height: 0; } /* Hero: cream ground, ink type, the photo as a card under the buttons. */ html:not(.ms-off) #main.hero-photo { background-image: none !important; background-color: #F7F4EF; min-height: 0 !important; padding-top: 84px; flex-wrap: wrap; align-items: flex-start; } html:not(.ms-off) #main.hero-photo > .absolute.inset-0 { display: none; } html:not(.ms-off) #main.hero-photo > .relative { padding-top: 1.25rem; padding-bottom: 0.25rem; } html:not(.ms-off) #main.hero-photo .max-w-xl > span:first-child { margin-bottom: 1rem; } html:not(.ms-off) #main.hero-photo h1 { color: #16120D; font-size: 2.3rem; line-height: 1.05; margin-bottom: 0.75rem; } html:not(.ms-off) #main.hero-photo h1 .absolute { opacity: 1; background: #C5341E; } html:not(.ms-off) #main.hero-photo h1 + p { color: #5A5248; font-size: 1rem; margin-bottom: 1.25rem; } html:not(.ms-off) #main.hero-photo .flex.flex-wrap.gap-3 a { padding: 0.85rem 1.4rem; font-size: 0.95rem; box-shadow: none; } html:not(.ms-off) #main.hero-photo a[href^="tel:"] { border-color: #16120D; color: #16120D; } html:not(.ms-off) #main.hero-photo .est-seal { display: none; } /* Trust badges: one row of chips you can flick through. */ html:not(.ms-off) #main.hero-photo .trust-stats { margin-top: 1.25rem; flex-wrap: nowrap; overflow-x: auto; gap: 0.5rem; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } html:not(.ms-off) #main.hero-photo .trust-stats::-webkit-scrollbar { display: none; } html:not(.ms-off) #main.hero-photo .trust-stat-value { flex: 0 0 auto; padding: 0.5rem 0.8rem; gap: 0.5rem; border-radius: 999px; background: #fff !important; border: 1px solid #E7DFD2 !important; box-shadow: none; } html:not(.ms-off) #main.hero-photo .trust-stat-value p { white-space: nowrap; } html:not(.ms-off) #main.hero-photo .trust-stat-value[style] p { color: #16120D !important; } html:not(.ms-off) #main.hero-photo .trust-stat-value[style] .material-symbols-outlined { color: #C5341E !important; } /* The photograph, now a card. */ html:not(.ms-off) #main.hero-photo::after { content: ""; display: block; flex: 0 0 auto; width: calc(100% - 3rem); margin: 1rem 1.5rem 1.5rem; aspect-ratio: 4 / 3; border-radius: 1.25rem; background: url('images/student-pass-web.webp') center 22% / cover no-repeat; box-shadow: 0 10px 30px rgba(22, 18, 13, 0.12); } /* Trust strip under the hero */ html:not(.ms-off) #main + style ~ section.py-6 { padding-top: 1rem; padding-bottom: 1rem; } /* Book section: full-width buttons, the short WhatsApp line, the three steps as a list. */ html:not(.ms-off) #book-west-london { padding: 2.5rem 1.5rem; } html:not(.ms-off) #book-west-london > div { gap: 1.5rem; } html:not(.ms-off) #book-west-london h2 { font-size: 1.65rem; margin-bottom: 0.75rem; } html:not(.ms-off) #book-west-london .flex.flex-wrap.items-center a { flex: 1 1 100%; } html:not(.ms-off) #book-west-london p.mt-5 { margin-top: 0.75rem; } html:not(.ms-off) #book-west-london ol { gap: 0.5rem; } html:not(.ms-off) #book-west-london ol li { display: grid; grid-template-columns: 2rem 1fr; column-gap: 0.75rem; align-items: start; padding: 0.85rem 1rem; } html:not(.ms-off) #book-west-london ol li > div { width: 2rem; height: 2rem; margin: 0; grid-row: 1 / 3; font-size: 0.9rem; } html:not(.ms-off) #book-west-london ol li h3 { margin: 0; font-size: 0.95rem; line-height: 2rem; } html:not(.ms-off) #book-west-london ol li p { font-size: 0.85rem; line-height: 1.4; } /* Services: two-column tiles, whole tile tappable, descriptions live on the services page. */ html:not(.ms-off) #services { padding: 2.5rem 1.5rem; } html:not(.ms-off) #services > .mb-14 { margin-bottom: 1.25rem; } html:not(.ms-off) #services h2 { font-size: 1.65rem; margin-bottom: 0.35rem; } html:not(.ms-off) #services > .mb-14 p { font-size: 0.95rem; margin-bottom: 0.5rem; } html:not(.ms-off) #services .ms-only { font-size: 0.9rem; font-weight: 700; color: #C5341E; align-items: center; gap: 0.25rem; } html:not(.ms-off) #services .grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; } html:not(.ms-off) #services .service-card { position: relative; padding: 0.9rem 0.9rem 0.8rem; border-radius: 1rem; border: 1px solid #E7DFD2; } html:not(.ms-off) #services .service-card > div { width: 2.25rem; height: 2.25rem; margin-bottom: 0.6rem; } html:not(.ms-off) #services .service-card h3 { font-size: 0.95rem; line-height: 1.25; margin-bottom: 0.35rem; } html:not(.ms-off) #services .service-card p { display: none; } html:not(.ms-off) #services .service-card a { font-size: 0.8rem; } html:not(.ms-off) #services .service-card a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* Everything below: same content, less air. */ html:not(.ms-off) #packages, html:not(.ms-off) #intensive-events, html:not(.ms-off) #dvsa-news, html:not(.ms-off) #ready-to-pass, html:not(.ms-off) #areas, html:not(.ms-off) #reviews, html:not(.ms-off) #faq { padding-top: 2.75rem; padding-bottom: 2.75rem; } html:not(.ms-off) #packages h2, html:not(.ms-off) #intensive-events h2, html:not(.ms-off) #dvsa-news h2, html:not(.ms-off) #ready-to-pass h2, html:not(.ms-off) #areas h2, html:not(.ms-off) #reviews h2, html:not(.ms-off) #faq h2 { font-size: 1.65rem; line-height: 1.15; } html:not(.ms-off) #packages .mb-14 { margin-bottom: 1.25rem; } html:not(.ms-off) #packages .mb-12 { margin-bottom: 1.5rem; } html:not(.ms-off) #ready-to-pass .p-10 { padding: 1.5rem; } html:not(.ms-off) #ready-to-pass .p-10 img { max-width: 170px; } html:not(.ms-off) #ready-to-pass .p-8 { padding: 1.25rem; } html:not(.ms-off) #areas { gap: 1.5rem; } html:not(.ms-off) #areas h2 { margin-bottom: 1rem; } html:not(.ms-off) #areas .h-\[420px\] { height: 240px; } html:not(.ms-off) #contact { margin-bottom: 2rem; } html:not(.ms-off) #contact .relative.z-10 { padding: 2.25rem 1.25rem; } html:not(.ms-off) #contact h2 { font-size: 2rem; } html:not(.ms-off) #contact .p-8 { padding: 1.25rem; } } /* ═══ Phase 3 (11 Sep 2026): every other public page ═══ * The bar and header rules above are page-agnostic. Below: the inner pages' * dark hero band, their section rhythm, and the services page's sixteen * sections. Booking, quiz and checkout pages are NOT wired — they have their * own flow and their own sticky elements. */ @media (max-width: 767.98px) { /* Inner hero: the dark band every inner page opens with. */ html:not(.ms-off) section#main[role="main"]:not(.hero-photo) { padding-top: 84px !important; padding-bottom: 1.5rem !important; } html:not(.ms-off) section#main:not(.hero-photo) > .relative.z-10 { padding-top: 1.25rem; padding-bottom: 0.5rem; } html:not(.ms-off) section#main:not(.hero-photo) nav[aria-label="Breadcrumb"] { margin-bottom: 1rem; } html:not(.ms-off) section#main:not(.hero-photo) h1 { font-size: 2.2rem; line-height: 1.05; margin-bottom: 0.75rem; } html:not(.ms-off) section#main:not(.hero-photo) h1 + p { font-size: 1rem; margin-bottom: 1rem; } /* The bar carries Book and WhatsApp, so the hero's copies of those two go; email stays. */ /* Netlify's pretty URLs rewrite booking.html → /booking at build time, so match both. */ html:not(.ms-off) section#main:not(.hero-photo) a[href="booking.html"]:not(.underline), html:not(.ms-off) section#main:not(.hero-photo) a[href="/booking"]:not(.underline), html:not(.ms-off) section#main:not(.hero-photo) a[href^="https://wa.me/"] { display: none; } html:not(.ms-off) section#main:not(.hero-photo) p.mt-5 { margin-top: 0.5rem; margin-bottom: 0.75rem; } /* Section rhythm */ html:not(.ms-off) section.py-24, html:not(.ms-off) section.py-20, html:not(.ms-off) section.py-16, html:not(.ms-off) section.py-14, html:not(.ms-off) section.pt-14 { padding-top: 2.5rem; padding-bottom: 2.5rem; } html:not(.ms-off) section.pb-24 { padding-bottom: 2.5rem; } html:not(.ms-off) section h2.text-4xl, html:not(.ms-off) section h2.text-3xl { font-size: 1.65rem; line-height: 1.15; } html:not(.ms-off) section.mb-24, html:not(.ms-off) section.mb-20 { margin-bottom: 2rem; } /* Services page: each of the sixteen service sections repeats the WhatsApp / Email / Book trio. */ html:not(.ms-off) .service-section { padding-top: 2rem; padding-bottom: 2rem; } html:not(.ms-off) .service-section > .grid { gap: 1.25rem; } html:not(.ms-off) .service-section a[href="booking.html"], html:not(.ms-off) .service-section a[href="/booking"], html:not(.ms-off) .service-section a[href^="https://wa.me/"] { display: none; } html:not(.ms-off) .service-section .lg\:pt-8 { padding-top: 0; } }