/* ============================================================================ ExamBeacon · School detail page — STYLES ---------------------------------------------------------------------------- HOW THIS WORKS Lives in Studio's /public folder and is served statically by Vercel at https://epp.studio/exambeacon/school-page.css The Webflow page references that URL in its custom code, so editing this file + pushing to main updates the live page on the next Vercel deploy — no Webflow re-publish needed. SERVES: School detail template → exambeacon.com/school/ REFERENCED IN: Webflow page → Inside tag: PAIRED WITH: school-page.js NOTE: all rules are scoped to #eb-school-page. ============================================================================ */ /* ===== accordions, icons, tags ===== */ #eb-school-page .ebsp-title svg{width:28px;height:28px;flex:0 0 28px;} #eb-school-page .k.with-icon{display:flex;align-items:center;gap:6px;} #eb-school-page .k.with-icon svg{width:18px;height:18px;flex:0 0 18px;} #eb-school-page .ebsp-acc{border:1px solid #E7E5E4;border-radius:12px;overflow:hidden;background:#fff;} #eb-school-page .ebsp-acc + .ebsp-acc{margin-top:8px;} #eb-school-page .ebsp-acc-head{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;user-select:none;} #eb-school-page .ebsp-acc-head:hover{background:#fafaf9;} #eb-school-page .ebsp-subject-icon{flex:0 0 32px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;} #eb-school-page .ebsp-subject-icon svg{width:32px;height:32px;display:block;} #eb-school-page .ebsp-acc-title{font-weight:600;color:#0C0A09;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;} #eb-school-page .ebsp-acc-count{color:#57534E;font-weight:400;} #eb-school-page .ebsp-acc-chev{margin-left:auto;display:flex;align-items:center;justify-content:center;width:16px;height:16px;transition:transform .2s ease;} #eb-school-page .ebsp-acc-chev svg{width:16px;height:16px;} #eb-school-page .ebsp-acc.open .ebsp-acc-chev{transform:rotate(180deg);} #eb-school-page .ebsp-acc-body{display:none;padding:12px 14px 16px 58px;} #eb-school-page .ebsp-acc.open .ebsp-acc-body{display:block;} #eb-school-page [data-ebsp="faq"] .ebsp-acc-body{padding-left:14px;} #eb-school-page .ebsp-stage-h3{font-family:'Literata',Georgia,serif;font-weight:600;font-size:18px;margin:22px 0 12px;} #eb-school-page .ebsp-tags{display:flex;flex-wrap:wrap;gap:8px;} #eb-school-page .ebsp-tag{background:#FCEEE7;color:#8a3415;font-size:13px;font-weight:500;padding:6px 12px;border-radius:999px;} #eb-school-page [data-ebsp] .w-richtext-figure-type-video,#eb-school-page [data-ebsp] h3,#eb-school-page [data-ebsp] h4,#eb-school-page [data-ebsp] ul{margin:0;} /* ===== rich-text internals + links + map ===== */ #eb-school-page .ebsp-intro p{margin:0 0 18px;} #eb-school-page .ebsp-intro p:last-child{margin-bottom:0;} #eb-school-page .ebsp-geo-summary p{margin:0 0 10px;} #eb-school-page .ebsp-geo-summary p:last-child{margin-bottom:0;} #eb-school-page .ebsp-prose p{margin:0 0 12px;} #eb-school-page .ebsp-prose p:last-child{margin-bottom:0;} #eb-school-page .ebsp-prose ul,#eb-school-page .ebsp-intro ul{margin:0 0 12px;padding-left:20px;} #eb-school-page .ebsp-prose a,#eb-school-page .ebsp-intro a,#eb-school-page .ebsp-geo-summary a{color:#1E83F2;text-decoration:underline;} #eb-school-page .ebsp-tests-list ul{margin:0;padding-left:18px;} #eb-school-page .ebsp-tests-list li{margin:2px 0;} #eb-school-page .ebsp-extlink{display:inline-flex;align-items:center;gap:6px;color:#1E83F2;font-weight:400;text-decoration:underline;} #eb-school-page .ebsp-extlink svg{width:15px;height:15px;flex:0 0 15px;} #eb-school-page .ebsp-meta-item:has(.ebsp-pill.w-dyn-bind-empty){display:none;} #eb-school-page .ebsp-list-row:has(.v.w-dyn-bind-empty){display:none;} /* Full-address row: drop the comma separator when the part after it is empty (2 schools have no address line 2), and hide the whole row if line 1 is empty. */ #eb-school-page .ebsp-addr-sep:has(+ .ebsp-addr-part.w-dyn-bind-empty){display:none;} #eb-school-page .ebsp-meta-item:has(.ebsp-addr > .ebsp-addr-part:first-child.w-dyn-bind-empty){display:none;} #eb-school-page .ebsp-map{margin-top:16px;} #eb-school-page .ebsp-map iframe{width:100%;height:380px;border:0;border-radius:14px;display:block;} /* ===== ONE consistent 16px size for all body text ===== */ #eb-school-page .ebsp-intro,#eb-school-page .ebsp-intro p, #eb-school-page .ebsp-geo-summary,#eb-school-page .ebsp-geo-summary p, #eb-school-page .ebsp-meta-label, #eb-school-page .ebsp-list-row .k,#eb-school-page .ebsp-list-row .k span, #eb-school-page .ebsp-list-row .v,#eb-school-page .ebsp-list-row .v *, #eb-school-page .ebsp-prose,#eb-school-page .ebsp-prose p,#eb-school-page .ebsp-prose li, #eb-school-page .ebsp-tests-list,#eb-school-page .ebsp-tests-list li, #eb-school-page .ebsp-acc-title,#eb-school-page .ebsp-acc-count, #eb-school-page .ebsp-acc-body,#eb-school-page .ebsp-acc-body p,#eb-school-page .ebsp-acc-body li{ font-size:16px;line-height:1.65; } /* "Schools" nav item highlight on school detail pages. Webflow only paints the current-page nav link (its orange) on an exact URL match, which never happens on /school/. school-page.js tags the /schools link with .eb-nav-current; this restores the same orange. (Not scoped to #eb-school-page — the nav sits outside it — but this file only loads on school pages.) */ .w-nav-link.eb-nav-current,a.eb-nav-current{color:#FF5E1A !important;transition:none !important;} /* Every "classic" body paragraph shares ONE font, weight, colour and spacing. (Links keep their own blue rule above; headings/pills/tags are unaffected.) */ #eb-school-page .ebsp-intro,#eb-school-page .ebsp-intro p, #eb-school-page .ebsp-prose,#eb-school-page .ebsp-prose p,#eb-school-page .ebsp-prose li, #eb-school-page .ebsp-acc-body,#eb-school-page .ebsp-acc-body p,#eb-school-page .ebsp-acc-body li{ font-family:'Poppins',sans-serif; font-weight:400; color:#0C0A09; letter-spacing:normal; }