/* school.bundle.css
Generated by script/build-school-css-bundle.ps1
- One local stylesheet (was 30 s + Tailwind CDN + Phosphor CDN).
- Google Fonts families remapped onto local self-hosted faces below so
fonts.googleapis.com is no longer fetched.
*/
@font-face{font-family:'AnekBangla';src:url('../Fonts/AnekBangla.ttf') format('truetype');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../Fonts/AnekBangla.ttf') format('truetype');font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('../Fonts/AnekBangla.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../Fonts/AnekBangla.ttf') format('truetype');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../Fonts/AnekBangla.ttf') format('truetype');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../Fonts/AnekBangla.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Oswald';src:url('../Fonts/Agency.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../Fonts/welfare.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
/* Tailwind utilities used by school.html but missing from the static set */
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.px-12{padding-left:3rem;padding-right:3rem}
@media (min-width:768px){.md\:px-14{padding-left:3.5rem;padding-right:3.5rem}}
/* ===== style/school-base-reset.css ===== */
/* school-base-reset.css
------------------------------------------------------------
Restores the Tailwind "Preflight" base that cdn.tailwindcss.com
used to auto-inject before the page was de-CDN'd. The entire
school page was authored assuming border-box sizing + zeroed
body margin; without this the box model shifts and full-width
sections overflow horizontally (right-side gap on every section).
Loaded FIRST in school.bundle.css so it is the lowest-priority
layer — every component rule still overrides it. This is the
conservative subset of Tailwind Preflight that layout depends
on (box model + margin + replaced-element defaults). It does
NOT zero borders/headings/lists, to avoid restyling content.
------------------------------------------------------------ */
*,
::before,
::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
tab-size: 4;
}
body {
margin: 0;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
img,
video {
max-width: 100%;
height: auto;
}
/* ===== style/homepage-tailwind-static.css ===== */
.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.\!sticky{position:sticky!important}.sticky{position:sticky}.inset-0{inset:0}.-bottom-full{bottom:-100%}.-left-32{left:-8rem}.-right-40{right:-10rem}.-top-32{top:-8rem}.bottom-0{bottom:0}.bottom-\[-120px\]{bottom:-120px}.left-0{left:0}.left-1\/2{left:50%}.left-\[-120px\]{left:-120px}.right-0{right:0}.right-\[-100px\]{right:-100px}.top-0{top:0}.top-1\/3{top:33.333333%}.top-10{top:2.5rem}.top-20{top:5rem}.isolate{isolation:isolate}.z-0{z-index:0}.z-10{z-index:10}.z-\[4\]{z-index:4}.order-3{order:3}.order-4{order:4}.mx-auto{margin-left:auto;margin-right:auto}.-mb-32{margin-bottom:-8rem}.-mb-48{margin-bottom:-12rem}.-mt-2{margin-top:-.5rem}.mb-0\.5{margin-bottom:.125rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-10{margin-left:2.5rem}.ml-3{margin-left:.75rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.\!hidden{display:none!important}.hidden{display:none}.h-0{height:0}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-72{height:18rem}.h-8{height:2rem}.h-80{height:20rem}.h-9{height:2.25rem}.h-\[260px\]{height:260px}.h-\[34px\]{height:34px}.h-\[380px\]{height:380px}.h-\[390px\]{height:390px}.h-\[420px\]{height:420px}.h-\[42px\]{height:42px}.h-\[44px\]{height:44px}.h-\[52px\]{height:52px}.h-full{height:100%}.max-h-64{max-height:16rem}.min-h-\[220px\]{min-height:220px}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-\[210px\]{width:210px}.w-\[34px\]{width:34px}.w-\[380px\]{width:380px}.w-\[420px\]{width:420px}.w-\[42px\]{width:42px}.w-\[52\%\]{width:52%}.w-\[720px\]{width:720px}.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-\[270px\]{max-width:270px}.max-w-\[400px\]{max-width:400px}.max-w-\[430px\]{max-width:430px}.max-w-\[440px\]{max-width:440px}.max-w-\[520px\]{max-width:520px}.max-w-\[640px\]{max-width:640px}.max-w-\[720px\]{max-width:720px}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.origin-bottom{transform-origin:bottom}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-px{gap:1px}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-10{row-gap:2.5rem}.gap-y-3{row-gap:.75rem}.-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(-.5rem*var(--tw-space-x-reverse));margin-left:calc(-.5rem*(1 - var(--tw-space-x-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.text-wrap{text-wrap:wrap}.text-balance{text-wrap:balance}.text-pretty{text-wrap:pretty}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[2rem\]{border-radius:2rem}.rounded-\[32px\]{border-radius:32px}.rounded-full{border-radius:9999px}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-\[3px\]{border-width:3px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-black\/10{border-color:rgba(0,0,0,.1)}.border-black\/5{border-color:rgba(0,0,0,.05)}.border-cyan-200{--tw-border-opacity:1;border-color:rgb(165 243 252/var(--tw-border-opacity,1))}.border-fuchsia-200{--tw-border-opacity:1;border-color:rgb(245 208 254/var(--tw-border-opacity,1))}.border-indigo-200{--tw-border-opacity:1;border-color:rgb(199 210 254/var(--tw-border-opacity,1))}.border-slate-950{--tw-border-opacity:1;border-color:rgb(2 6 23/var(--tw-border-opacity,1))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.bg-\[\#0369a1\]{--tw-bg-opacity:1;background-color:rgb(3 105 161/var(--tw-bg-opacity,1))}.bg-\[\#050505\]{--tw-bg-opacity:1;background-color:rgb(5 5 5/var(--tw-bg-opacity,1))}.bg-\[\#065f46\]{--tw-bg-opacity:1;background-color:rgb(6 95 70/var(--tw-bg-opacity,1))}.bg-\[\#0f766e\]{--tw-bg-opacity:1;background-color:rgb(15 118 110/var(--tw-bg-opacity,1))}.bg-\[\#166534\]{--tw-bg-opacity:1;background-color:rgb(22 101 52/var(--tw-bg-opacity,1))}.bg-\[\#1a2340\]{--tw-bg-opacity:1;background-color:rgb(26 35 64/var(--tw-bg-opacity,1))}.bg-\[\#1e0654\]{--tw-bg-opacity:1;background-color:rgb(30 6 84/var(--tw-bg-opacity,1))}.bg-\[\#22c55e\]{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-\[\#4338ca\]{--tw-bg-opacity:1;background-color:rgb(67 56 202/var(--tw-bg-opacity,1))}.bg-\[\#5b21b6\]{--tw-bg-opacity:1;background-color:rgb(91 33 182/var(--tw-bg-opacity,1))}.bg-\[\#67e8f9\]{--tw-bg-opacity:1;background-color:rgb(103 232 249/var(--tw-bg-opacity,1))}.bg-\[\#6b21a8\]{--tw-bg-opacity:1;background-color:rgb(107 33 168/var(--tw-bg-opacity,1))}.bg-\[\#6d28d9\]{--tw-bg-opacity:1;background-color:rgb(109 40 217/var(--tw-bg-opacity,1))}.bg-\[\#854d0e\]{--tw-bg-opacity:1;background-color:rgb(133 77 14/var(--tw-bg-opacity,1))}.bg-\[\#8b5cf6\]{--tw-bg-opacity:1;background-color:rgb(139 92 246/var(--tw-bg-opacity,1))}.bg-\[\#8ec5ee\]{--tw-bg-opacity:1;background-color:rgb(142 197 238/var(--tw-bg-opacity,1))}.bg-\[\#92400e\]{--tw-bg-opacity:1;background-color:rgb(146 64 14/var(--tw-bg-opacity,1))}.bg-\[\#991b1b\]{--tw-bg-opacity:1;background-color:rgb(153 27 27/var(--tw-bg-opacity,1))}.bg-\[\#be185d\]{--tw-bg-opacity:1;background-color:rgb(190 24 93/var(--tw-bg-opacity,1))}.bg-\[\#ccfbf1\]{--tw-bg-opacity:1;background-color:rgb(204 251 241/var(--tw-bg-opacity,1))}.bg-\[\#d1fae5\]{--tw-bg-opacity:1;background-color:rgb(209 250 229/var(--tw-bg-opacity,1))}.bg-\[\#d8f25d\]{--tw-bg-opacity:1;background-color:rgb(216 242 93/var(--tw-bg-opacity,1))}.bg-\[\#d8f25d\]\/85{background-color:rgba(216,242,93,.85)}.bg-\[\#dcfce7\]{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-\[\#e0e7ff\]{--tw-bg-opacity:1;background-color:rgb(224 231 255/var(--tw-bg-opacity,1))}.bg-\[\#e0f2fe\]{--tw-bg-opacity:1;background-color:rgb(224 242 254/var(--tw-bg-opacity,1))}.bg-\[\#ede9fe\]{--tw-bg-opacity:1;background-color:rgb(237 233 254/var(--tw-bg-opacity,1))}.bg-\[\#f3e8ff\]{--tw-bg-opacity:1;background-color:rgb(243 232 255/var(--tw-bg-opacity,1))}.bg-\[\#f472b6\]{--tw-bg-opacity:1;background-color:rgb(244 114 182/var(--tw-bg-opacity,1))}.bg-\[\#f472b6\]\/70{background-color:rgba(244,114,182,.7)}.bg-\[\#fbbf24\]{--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity,1))}.bg-\[\#fbbf24\]\/75{background-color:rgba(251,191,36,.75)}.bg-\[\#fce7f3\]{--tw-bg-opacity:1;background-color:rgb(252 231 243/var(--tw-bg-opacity,1))}.bg-\[\#fee2e2\]{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-\[\#fef3c7\]{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-\[\#fef9c3\]{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-amber-200{--tw-bg-opacity:1;background-color:rgb(253 230 138/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-current{background-color:currentColor}.bg-cyan-200{--tw-bg-opacity:1;background-color:rgb(165 243 252/var(--tw-bg-opacity,1))}.bg-cyan-200\/40{background-color:rgba(165,243,252,.4)}.bg-cyan-50{--tw-bg-opacity:1;background-color:rgb(236 254 255/var(--tw-bg-opacity,1))}.bg-cyan-500{--tw-bg-opacity:1;background-color:rgb(6 182 212/var(--tw-bg-opacity,1))}.bg-foreground\/25{background-color:hsl(var(--foreground)/.25)}.bg-fuchsia-200\/45{background-color:rgba(245,208,254,.45)}.bg-fuchsia-50{--tw-bg-opacity:1;background-color:rgb(253 244 255/var(--tw-bg-opacity,1))}.bg-fuchsia-500{--tw-bg-opacity:1;background-color:rgb(217 70 239/var(--tw-bg-opacity,1))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(238 242 255/var(--tw-bg-opacity,1))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.bg-lime-200{--tw-bg-opacity:1;background-color:rgb(217 249 157/var(--tw-bg-opacity,1))}.bg-neutral-100{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity,1))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.bg-rose-200{--tw-bg-opacity:1;background-color:rgb(254 205 211/var(--tw-bg-opacity,1))}.bg-slate-950{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-violet-200{--tw-bg-opacity:1;background-color:rgb(221 214 254/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/40{background-color:hsla(0,0%,100%,.4)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-white\/50{background-color:hsla(0,0%,100%,.5)}.bg-white\/55{background-color:hsla(0,0%,100%,.55)}.bg-white\/60{background-color:hsla(0,0%,100%,.6)}.bg-white\/70{background-color:hsla(0,0%,100%,.7)}.bg-white\/95{background-color:hsla(0,0%,100%,.95)}.bg-yellow-200\/45{background-color:hsla(53,98%,77%,.45)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-\[\#d8f25d\]{--tw-gradient-from:#d8f25d var(--tw-gradient-from-position);--tw-gradient-to:rgba(216,242,93,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-fuchsia-300{--tw-gradient-from:#f0abfc var(--tw-gradient-from-position);--tw-gradient-to:rgba(240,171,252,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-neutral-50{--tw-gradient-from:#fafafa var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,98%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-cyan-200{--tw-gradient-to:rgba(165,243,252,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#a5f3fc var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[\#8ec5ee\]{--tw-gradient-to:#8ec5ee var(--tw-gradient-to-position)}.to-lime-200{--tw-gradient-to:#d9f99d var(--tw-gradient-to-position)}.fill-\[\#E5E5E5\]{fill:#e5e5e5}.fill-white{fill:#fff}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pl-\[16px\]{padding-left:16px}.pl-\[24px\]{padding-left:24px}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-\[5px\]{padding-right:5px}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10\.5px\]{font-size:10.5px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13\.5px\]{font-size:13.5px}.text-\[13px\]{font-size:13px}.text-\[14\.5px\]{font-size:14.5px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[2\.45rem\]{font-size:2.45rem}.text-\[28px\]{font-size:28px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-7{line-height:1.75rem}.leading-\[1\.02\]{line-height:1.02}.leading-relaxed{line-height:1.625}.tracking-\[-0\.03em\]{letter-spacing:-.03em}.tracking-\[-0\.04em\]{letter-spacing:-.04em}.tracking-\[-0\.05em\]{letter-spacing:-.05em}.tracking-\[0\.16em\]{letter-spacing:.16em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.22em\]{letter-spacing:.22em}.tracking-\[0\.28em\]{letter-spacing:.28em}.tracking-\[0\.2em\]{letter-spacing:.2em}.text-\[\#0369a1\]{--tw-text-opacity:1;color:rgb(3 105 161/var(--tw-text-opacity,1))}.text-\[\#065f46\]{--tw-text-opacity:1;color:rgb(6 95 70/var(--tw-text-opacity,1))}.text-\[\#0f766e\]{--tw-text-opacity:1;color:rgb(15 118 110/var(--tw-text-opacity,1))}.text-\[\#166534\]{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-\[\#1a20dda6\]{color:#1a20dda6}.text-\[\#1a2340\]{--tw-text-opacity:1;color:rgb(26 35 64/var(--tw-text-opacity,1))}.text-\[\#27e8d4b3\]{color:#27e8d4b3}.text-\[\#4338ca\]{--tw-text-opacity:1;color:rgb(67 56 202/var(--tw-text-opacity,1))}.text-\[\#5b21b6\]{--tw-text-opacity:1;color:rgb(91 33 182/var(--tw-text-opacity,1))}.text-\[\#6b21a8\]{--tw-text-opacity:1;color:rgb(107 33 168/var(--tw-text-opacity,1))}.text-\[\#6d28d9\]{--tw-text-opacity:1;color:rgb(109 40 217/var(--tw-text-opacity,1))}.text-\[\#854d0e\]{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.text-\[\#8ec5ee\]{--tw-text-opacity:1;color:rgb(142 197 238/var(--tw-text-opacity,1))}.text-\[\#92400e\]{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-\[\#991b1b\]{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-\[\#bb0db8\]{--tw-text-opacity:1;color:rgb(187 13 184/var(--tw-text-opacity,1))}.text-\[\#be185d\]{--tw-text-opacity:1;color:rgb(190 24 93/var(--tw-text-opacity,1))}.text-\[\#d8f25d\]{--tw-text-opacity:1;color:rgb(216 242 93/var(--tw-text-opacity,1))}.text-\[\#f472b6\]{--tw-text-opacity:1;color:rgb(244 114 182/var(--tw-text-opacity,1))}.text-\[\#fbbf24\]{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-\[\#ff90fd\]{--tw-text-opacity:1;color:rgb(255 144 253/var(--tw-text-opacity,1))}.text-cyan-600{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity,1))}.text-cyan-800{--tw-text-opacity:1;color:rgb(21 94 117/var(--tw-text-opacity,1))}.text-foreground{--tw-text-opacity:1;color:hsl(var(--foreground)/var(--tw-text-opacity,1))}.text-fuchsia-600{--tw-text-opacity:1;color:rgb(192 38 211/var(--tw-text-opacity,1))}.text-fuchsia-800{--tw-text-opacity:1;color:rgb(134 25 143/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-indigo-800{--tw-text-opacity:1;color:rgb(55 48 163/var(--tw-text-opacity,1))}.text-lime-600{--tw-text-opacity:1;color:rgb(101 163 13/var(--tw-text-opacity,1))}.text-primary{color:var(--primary)}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.text-slate-950{--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/45{color:hsla(0,0%,100%,.45)}.text-white\/55{color:hsla(0,0%,100%,.55)}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/65{color:hsla(0,0%,100%,.65)}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-white\/75{color:hsla(0,0%,100%,.75)}.text-white\/95{color:hsla(0,0%,100%,.95)}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.mix-blend-luminosity{mix-blend-mode:luminosity}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\[4px_4px_0_\#111827\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[4px_4px_0_\#111827\]{--tw-shadow:4px 4px 0 #111827;--tw-shadow-colored:4px 4px 0 var(--tw-shadow-color)}.shadow-\[8px_8px_0_\#94a3b8\]{--tw-shadow:8px 8px 0 #94a3b8;--tw-shadow-colored:8px 8px 0 var(--tw-shadow-color)}.shadow-\[8px_8px_0_\#94a3b8\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-softGlow{--tw-shadow:0 18px 40px rgba(34,211,238,.28);--tw-shadow-colored:0 18px 40px var(--tw-shadow-color)}.shadow-softGlow,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-black\/5{--tw-ring-color:rgba(0,0,0,.05)}.ring-orange-500{--tw-ring-opacity:1;--tw-ring-color:rgb(249 115 22/var(--tw-ring-opacity,1))}.ring-white\/10{--tw-ring-color:hsla(0,0%,100%,.1)}.blur{--tw-blur:blur(8px)}.blur,.blur-2xl{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-2xl{--tw-blur:blur(40px)}.blur-3xl{--tw-blur:blur(64px)}.blur-3xl,.blur-sm{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-sm{--tw-blur:blur(4px)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.drop-shadow,.drop-shadow-\[0_0_28px_rgba\(0\2c 0\2c 0\2c \.1\)\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-\[0_0_28px_rgba\(0\2c 0\2c 0\2c \.1\)\]{--tw-drop-shadow:drop-shadow(0 0 28px rgba(0,0,0,.1))}.grayscale{--tw-grayscale:grayscale(100%)}.filter,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[--i\:0\]{--i:0}.\[--i\:1\]{--i:1}.\[--i\:2\]{--i:2}.\[--i\:3\]{--i:3}.\[--i\:4\]{--i:4}.\[--i\:5\]{--i:5}.\[--i\:6\]{--i:6}.\[--i\:7\]{--i:7}.\[mask-image\:linear-gradient\(to_bottom\2c white\2c transparent\)\]{-webkit-mask-image:linear-gradient(180deg,#fff,transparent);mask-image:linear-gradient(180deg,#fff,transparent)}.placeholder\:text-white\/35::-moz-placeholder{color:hsla(0,0%,100%,.35)}.placeholder\:text-white\/35::placeholder{color:hsla(0,0%,100%,.35)}.hover\:bg-\[\#8ec5ee\]:hover{--tw-bg-opacity:1;background-color:rgb(142 197 238/var(--tw-bg-opacity,1))}.hover\:bg-\[\#d8f25d\]:hover{--tw-bg-opacity:1;background-color:rgb(216 242 93/var(--tw-bg-opacity,1))}.hover\:bg-\[\#f472b6\]:hover{--tw-bg-opacity:1;background-color:rgb(244 114 182/var(--tw-bg-opacity,1))}.hover\:bg-\[\#fbbf24\]:hover{--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity,1))}.hover\:bg-black\/5:hover{background-color:rgba(0,0,0,.05)}.hover\:bg-blue-500\/10:hover{background-color:rgba(59,130,246,.1)}.hover\:bg-green-500\/10:hover{background-color:rgba(34,197,94,.1)}.hover\:bg-neutral-50:hover{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.hover\:bg-red-500\/10:hover{background-color:rgba(239,68,68,.1)}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hover\:text-\[\#050505\]:hover{--tw-text-opacity:1;color:rgb(5 5 5/var(--tw-text-opacity,1))}.hover\:text-\[\#1a2340\]:hover{--tw-text-opacity:1;color:rgb(26 35 64/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:shadow-sm:hover{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:ring-transparent:hover{--tw-ring-color:transparent}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:block{display:block}.sm\:h-10{height:2.5rem}.sm\:h-5{height:1.25rem}.sm\:w-10{width:2.5rem}.sm\:w-5{width:1.25rem}.sm\:max-w-none{max-width:none}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.sm\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-\[11px\]{font-size:11px}.sm\:text-\[15px\]{font-size:15px}.sm\:text-\[16px\]{font-size:16px}.sm\:text-\[36px\]{font-size:36px}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:row-span-2{grid-row:span 2/span 2}.md\:max-w-3xl{max-width:48rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-\[44px\]{font-size:44px}}@media (min-width:1024px){.lg\:col-span-1{grid-column:span 1/span 1}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:max-w-\[320px\]{max-width:320px}.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-\[2\.05fr_1fr_1fr_1fr_1fr\]{grid-template-columns:2.05fr 1fr 1fr 1fr 1fr}.lg\:grid-cols-\[320px_430px_320px\]{grid-template-columns:320px 430px 320px}.lg\:flex-row{flex-direction:row}.lg\:items-center{align-items:center}.lg\:justify-between{justify-content:space-between}.lg\:gap-x-14{-moz-column-gap:3.5rem;column-gap:3.5rem}.lg\:px-12{padding-left:3rem;padding-right:3rem}.lg\:px-14{padding-left:3.5rem;padding-right:3.5rem}.lg\:py-16{padding-top:4rem;padding-bottom:4rem}.lg\:py-8{padding-top:2rem;padding-bottom:2rem}.lg\:text-\[3\.45rem\]{font-size:3.45rem}.lg\:text-\[50px\]{font-size:50px}}@media (min-width:1280px){.xl\:order-none{order:0}.xl\:max-w-6xl{max-width:72rem}.xl\:auto-rows-fr{grid-auto-rows:minmax(0,1fr)}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}}@media (prefers-color-scheme:dark){.dark\:bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}.dark\:bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.dark\:from-neutral-900{--tw-gradient-from:#171717 var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,9%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:fill-\[\#262626\]{fill:#262626}.dark\:fill-\[\#404040\]{fill:#404040}.dark\:hover\:bg-neutral-800:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}}
/* ===== style/phosphor-duotone-subset.css ===== */
/* phosphor-duotone-subset.css — self-hosted, only the 14 duotone icons school.html uses. Replaces unpkg @phosphor-icons/web CDN. */
@font-face{font-family:"Phosphor-Duotone";src:url("./Phosphor-Duotone.woff2") format("woff2");font-weight:normal;font-style:normal;font-display:block;}
.ph-duotone {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "Phosphor-Duotone" !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* arrows-merge */
.ph-duotone.ph-arrows-merge:before {
content: "\ed3e";
opacity: 0.2;
}
.ph-duotone.ph-arrows-merge:after {
content: "\ed3f";
margin-left: -1em;
}
/* binoculars */
.ph-duotone.ph-binoculars:before {
content: "\ea64";
opacity: 0.2;
}
.ph-duotone.ph-binoculars:after {
content: "\ea65";
margin-left: -1em;
}
/* bird */
.ph-duotone.ph-bird:before {
content: "\e72c";
opacity: 0.2;
}
.ph-duotone.ph-bird:after {
content: "\e72d";
margin-left: -1em;
}
/* books */
.ph-duotone.ph-books:before {
content: "\e758";
opacity: 0.2;
}
.ph-duotone.ph-books:after {
content: "\e759";
margin-left: -1em;
}
/* buildings */
.ph-duotone.ph-buildings:before {
content: "\e102";
opacity: 0.2;
}
.ph-duotone.ph-buildings:after {
content: "\e105";
margin-left: -1em;
}
/* chart-bar */
.ph-duotone.ph-chart-bar:before {
content: "\e150";
opacity: 0.2;
}
.ph-duotone.ph-chart-bar:after {
content: "\e151";
margin-left: -1em;
}
/* check-circle */
.ph-duotone.ph-check-circle:before {
content: "\e184";
opacity: 0.2;
}
.ph-duotone.ph-check-circle:after {
content: "\e185";
margin-left: -1em;
}
/* copy-simple */
.ph-duotone.ph-copy-simple:before {
content: "\e1cc";
opacity: 0.2;
}
.ph-duotone.ph-copy-simple:after {
content: "\e1cd";
margin-left: -1em;
}
/* clipboard-text */
.ph-duotone.ph-clipboard-text:before {
content: "\e198";
opacity: 0.2;
}
.ph-duotone.ph-clipboard-text:after {
content: "\e199";
margin-left: -1em;
}
/* cube */
.ph-duotone.ph-cube:before {
content: "\e1da";
opacity: 0.2;
}
.ph-duotone.ph-cube:after {
content: "\e1db";
margin-left: -1em;
}
/* eye */
.ph-duotone.ph-eye:before {
content: "\e220";
opacity: 0.2;
}
.ph-duotone.ph-eye:after {
content: "\e221";
margin-left: -1em;
}
/* gavel */
.ph-duotone.ph-gavel:before {
content: "\ea32";
opacity: 0.2;
}
.ph-duotone.ph-gavel:after {
content: "\ea33";
margin-left: -1em;
}
/* git-branch */
.ph-duotone.ph-git-branch:before {
content: "\e278";
opacity: 0.2;
}
.ph-duotone.ph-git-branch:after {
content: "\e279";
margin-left: -1em;
}
/* git-commit */
.ph-duotone.ph-git-commit:before {
content: "\e27a";
opacity: 0.2;
}
.ph-duotone.ph-git-commit:after {
content: "\e27b";
margin-left: -1em;
}
/* file-text */
.ph-duotone.ph-file-text:before {
content: "\e23a";
opacity: 0.2;
}
.ph-duotone.ph-file-text:after {
content: "\e23b";
margin-left: -1em;
}
/* identification-card */
.ph-duotone.ph-identification-card:before {
content: "\e2c8";
opacity: 0.2;
}
.ph-duotone.ph-identification-card:after {
content: "\e2c9";
margin-left: -1em;
}
/* lightning */
.ph-duotone.ph-lightning:before {
content: "\e2de";
opacity: 0.2;
}
.ph-duotone.ph-lightning:after {
content: "\e2df";
margin-left: -1em;
}
/* puzzle-piece */
.ph-duotone.ph-puzzle-piece:before {
content: "\e596";
opacity: 0.2;
}
.ph-duotone.ph-puzzle-piece:after {
content: "\e597";
margin-left: -1em;
}
/* shield-check */
.ph-duotone.ph-shield-check:before {
content: "\e40c";
opacity: 0.2;
}
.ph-duotone.ph-shield-check:after {
content: "\e40f";
margin-left: -1em;
}
/* ===== style/fonts.css ===== */
/* ===================================================
FONTS — Single source of truth for custom @font-face
Loaded once from school.html ; component CSS
files reference these by family name.
=================================================== */
/* ── Welfare ── */
@font-face {
font-family: 'welfare';
src: url('../Fonts/welfare.woff2') format('woff2'),
url('../Fonts/welfare.woff') format('woff'),
url('../Fonts/welfare.otf') format('opentype'),
url('../Fonts/welfare.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ── NibPro (replaces Salmond site-wide) ──
The family name 'Salmond' is kept as an ALIAS that now resolves to the
NibPro faces, so every existing `font-family:'Salmond'` reference renders
NibPro without having to touch dozens of component files. New code may use
either 'NibPro' or 'Salmond'. */
@font-face {
font-family: 'NibPro';
src: url("../Fonts/NibPro.woff2") format("woff2"), url("../Fonts/fonts/NibPro-Regular.woff2") format('woff2'), url("../Fonts/fonts/NibPro-Regular.woff") format('woff'), url("../Fonts/NibPro.ttf") format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'NibPro';
src: url('../Fonts/fonts/NibPro-SemiBold.woff2') format('woff2'),
url('../Fonts/fonts/NibPro-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'NibPro';
src: url("../Fonts/NibPro.woff2") format("woff2"), url("../Fonts/fonts/NibPro-Regular.woff2") format('woff2'), url("../Fonts/fonts/NibPro-Regular.woff") format('woff'), url("../Fonts/NibPro.ttf") format('truetype');
font-weight: 700 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'NibPro';
src: url('../Fonts/fonts/NibPro-Italic.woff2') format('woff2'),
url('../Fonts/fonts/NibPro-Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* ── Salmond → NibPro alias (same files as NibPro above) ── */
@font-face {
font-family: 'Salmond';
src: url("../Fonts/NibPro.woff2") format("woff2"), url("../Fonts/fonts/NibPro-Regular.woff2") format('woff2'), url("../Fonts/fonts/NibPro-Regular.woff") format('woff'), url("../Fonts/NibPro.ttf") format('truetype');
font-weight: 400 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Salmond';
src: url("../Fonts/NibPro.woff2") format("woff2"), url("../Fonts/fonts/NibPro-Regular.woff2") format('woff2'), url("../Fonts/fonts/NibPro-Regular.woff") format('woff'), url("../Fonts/NibPro.ttf") format('truetype');
font-weight: 700 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Salmond';
src: url('../Fonts/fonts/NibPro-Italic.woff2') format('woff2'),
url('../Fonts/fonts/NibPro-Italic.woff') format('woff');
font-weight: 400 700;
font-style: italic;
font-display: swap;
}
/* ── AnekBangla (display) ── */
@font-face {
font-family: 'AnekBangla';
src: url("../Fonts/AnekBangla.woff2") format("woff2"), url("../Fonts/AnekBangla.ttf") format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ── AnekBangla (Cabinet Grotesk Extrabold remap, used as button face) ── */
@font-face {
font-family: 'AnekBangla';
src: url("../Fonts/AnekBangla.woff2") format("woff2"), url("../Fonts/CabinetGrotesk-Extrabold.woff2") format('woff2'), url("../Fonts/AnekBangla.ttf") format('truetype');
font-weight: 400 800;
font-style: normal;
font-display: swap;
}
/* ── AnekBangla (heavy display) ── */
@font-face {
font-family: 'AnekBangla';
src: url("../Fonts/AnekBangla.woff2") format('woff2'), url("../Fonts/AnekBangla.ttf") format('truetype');
font-weight: 400 800;
font-style: normal;
font-display: swap;
}
/* ── Agency ── */
@font-face {
font-family: 'Agency';
src: url('../Fonts/Agency.woff2') format('woff2'),
url('../Fonts/Agency-Regular.woff2') format('woff2'),
url('../Fonts/agency.woff2') format('woff2'),
url('../Fonts/AgencyFB.woff2') format('woff2'),
url('../Fonts/Agency.woff') format('woff'),
url('../Fonts/Agency-Regular.ttf') format('truetype'),
url('../Fonts/Agency.ttf') format('truetype'),
url('../Fonts/Agency-Regular.otf') format('opentype'),
url('../Fonts/Agency.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ── Boldonse ── */
@font-face {
font-family: 'Boldonse';
src: url('../Fonts/Boldonse-Regular.woff2') format('woff2'),
url('../Fonts/boldonse-regular.woff2') format('woff2'),
url('../Fonts/Boldonse-Regular.otf') format('opentype'),
url('../Fonts/Boldonse-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ===== style/school-nav.css ===== */
/* as-nav: scroll-lock class (only body-level rule needed by component) */
body.as-nav-lock {
overflow: hidden !important;
}
/* as-nav: scoped reset — replaces global *, a, button, ul resets */
#as-nav-root,
#as-nav-root *,
#as-nav-root *::before,
#as-nav-root *::after {
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
line-height: normal !important;
letter-spacing: normal !important;
text-transform: none !important;
text-indent: 0 !important;
text-shadow: none !important;
float: none !important;
}
#as-nav-root {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 16px !important;
color: #fff !important;
line-height: 1.5 !important;
-webkit-text-fill-color: unset !important;
}
#as-nav-root a {
text-decoration: none !important;
color: inherit !important;
background: none !important;
-webkit-text-fill-color: unset !important;
border: none !important;
}
#as-nav-root button {
border: none !important;
cursor: pointer !important;
font-family: inherit !important;
background: transparent !important;
-webkit-text-fill-color: unset !important;
}
#as-nav-root ul,
#as-nav-root li {
list-style: none !important;
}
#as-nav-root img {
border-style: none !important;
max-width: none !important;
height: auto;
}
#as-nav-root svg {
display: inline-block !important;
vertical-align: middle !important;
}
/* as-nav: z-index scale variable */
#as-nav-root {
--as-nav-z: 5000;
}
/* ===== SCROLLING BANNER ===== */
#as-nav-root .top-banner {
width: 100% !important;
background: #222 !important;
overflow: hidden !important;
position: relative !important;
z-index: calc(var(--as-nav-z) + 4) !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
border: none !important;
}
#as-nav-root .banner-track {
display: flex !important;
white-space: nowrap !important;
animation: as-nav-bannerScroll 20s linear infinite !important;
}
@media (prefers-reduced-motion: reduce) {
#as-nav-root .banner-track { animation: none !important; }
}
#as-nav-root .banner-item {
display: inline-flex !important;
align-items: center !important;
gap: 32px !important;
padding: 0 32px !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
color: #fff !important;
line-height: 1 !important;
}
#as-nav-root .banner-item a {
background: linear-gradient(90deg, #bafc01, #01fca3) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
transition: opacity .2s !important;
border: none !important;
padding: 0 !important;
font-size: inherit !important;
}
#as-nav-root .banner-item a:hover {
opacity: 0.8 !important;
}
/* as-nav: namespaced keyframes */
@keyframes as-nav-bannerScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* ===== MAIN NAV ===== */
#as-nav-root .main-nav {
position: relative !important;
top: 0 !important;
z-index: calc(var(--as-nav-z) + 3) !important;
background: #000000 !important;
height: 56px !important;
display: flex !important;
align-items: center !important;
padding: 0 !important;
border-bottom: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
box-shadow: none !important;
width: 100% !important;
}
/* as-nav: fixed state applied by JS when banner scrolls out */
#as-nav-root .main-nav.as-nav-fixed {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
}
#as-nav-root .nav-inner {
width: 100% !important;
max-width: 1440px !important;
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 100% !important;
padding: 0 8px !important;
}
/* ===== LOGO ===== */
#as-nav-root .logo {
display: flex !important;
align-items: center !important;
flex-shrink: 0 !important;
height: 100% !important;
margin-right: 16px !important;
background: none !important;
border: none !important;
padding: 0 !important;
}
#as-nav-root .logo img {
max-height: 40px !important;
width: auto !important;
display: block !important;
height: auto;
}
/* ===== NAV LINKS ===== */
#as-nav-root .nav-links {
display: flex !important;
align-items: center !important;
gap: 2px !important;
height: 100% !important;
}
#as-nav-root .nav-item {
position: relative !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
#as-nav-root .nav-trigger {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 16px 24px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #fff !important;
background: #262626 !important;
border-radius: 4px !important;
transition: background .2s ease, color .2s ease !important;
cursor: pointer !important;
white-space: nowrap !important;
border: none !important;
outline: none !important;
line-height: 1 !important;
letter-spacing: normal !important;
text-decoration: none !important;
-webkit-text-fill-color: unset !important;
box-shadow: none !important;
}
#as-nav-root .nav-trigger:hover,
#as-nav-root .nav-item.active .nav-trigger {
background: #fff !important;
color: #000 !important;
-webkit-text-fill-color: unset !important;
}
#as-nav-root .nav-trigger .plus-icon {
width: 14px !important;
height: 14px !important;
border-radius: 3px !important;
background: #eb3434 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #000000 !important;
transition: transform .3s ease !important;
flex-shrink: 0 !important;
line-height: 1 !important;
position: relative !important;
top: -3px !important;
padding: 0 !important;
margin: 0 !important;
}
/* ===== RIGHT SIDE ===== */
#as-nav-root .nav-right {
display: flex !important;
align-items: center !important;
gap: 4px !important;
flex-shrink: 0 !important;
}
#as-nav-root .login-link {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 16px 20px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #fff !important;
background: #262626 !important;
transition: background .2s, color .2s !important;
border-radius: 4px !important;
border: none !important;
text-decoration: none !important;
-webkit-text-fill-color: unset !important;
line-height: 1 !important;
box-shadow: none !important;
}
#as-nav-root .login-link:hover {
background: rgba(255, 255, 255, .1) !important;
}
#as-nav-root .login-link .arrow-icon {
width: 18px !important;
height: 18px !important;
border: 1.5px solid rgba(255, 255, 255, .5) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#as-nav-root .login-link .arrow-icon svg {
width: 10px !important;
height: 10px !important;
}
#as-nav-root .btn-demo {
padding: 16px 20px !important;
font-size: 14px !important;
font-weight: 600 !important;
background: #ebdc77 !important;
color: #000 !important;
border-radius: 2px !important;
transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important;
border: none !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
-webkit-text-fill-color: unset !important;
box-shadow: none !important;
cursor: pointer !important;
}
#as-nav-root .btn-demo:hover {
transform: translateY(-1px) !important;
background: #fff !important;
box-shadow: 0 4px 12px rgba(247, 255, 0, .3) !important;
}
#as-nav-root .btn-try {
padding: 16px 20px !important;
font-size: 14px !important;
font-weight: 600 !important;
background: #f58af5 !important;
color: #000 !important;
border-radius: 2px !important;
transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important;
border: none !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
-webkit-text-fill-color: unset !important;
box-shadow: none !important;
cursor: pointer !important;
}
#as-nav-root .btn-try:hover {
transform: translateY(-1px) !important;
background: #fff !important;
box-shadow: 0 4px 12px rgba(255, 0, 255, .3) !important;
}
/* ===== MEGA MENU OVERLAY ===== */
#as-nav-root .mega-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: rgba(0, 0, 0, .5) !important;
z-index: calc(var(--as-nav-z) + 1) !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity .3s ease !important;
border: none !important;
}
#as-nav-root .mega-overlay.visible {
opacity: 1 !important;
pointer-events: all !important;
}
/* ===== MEGA MENU PANEL ===== */
#as-nav-root .nav-item {
perspective: 800px !important;
}
#as-nav-root .mega-panel {
position: absolute !important;
top: 100% !important;
left: 0 !important;
width: max-content !important;
background: #000 !important;
z-index: calc(var(--as-nav-z) + 2) !important;
border-radius: 6px !important;
margin-top: 10px !important;
pointer-events: none !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-12px) scale3d(.96, .96, 1) !important;
transform-origin: top center !important;
transition:
opacity .2s cubic-bezier(.2, 0, .2, 1),
transform .25s cubic-bezier(.2, 0, .2, 1),
visibility 0s .25s !important;
will-change: transform, opacity !important;
box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .6) !important;
border: none !important;
}
#as-nav-root .mega-panel.open {
opacity: 1 !important;
visibility: visible !important;
pointer-events: all !important;
transform: translateY(0) scale3d(1, 1, 1) !important;
transition:
opacity .25s cubic-bezier(.2, 0, .2, 1),
transform .3s cubic-bezier(.2, 0, .1, 1),
visibility 0s 0s !important;
}
#as-nav-root .mega-content {
padding: 6px !important;
display: grid !important;
grid-template-columns: 250px auto !important;
gap: 6px !important;
align-items: stretch !important;
}
/* FEATURED CARD (left) */
#as-nav-root .mega-featured {
border-radius: 4px !important;
padding: 32px 28px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
position: relative !important;
overflow: hidden !important;
border: none !important;
}
#as-nav-root .mega-featured.theme-cyan {
background: linear-gradient(135deg, #67e8f9, #a5f3fc, #cffafe) !important;
}
#as-nav-root .mega-featured.theme-yellow {
background: linear-gradient(135deg, #fde68a, #fef08a, #fef9c3) !important;
}
#as-nav-root .mega-featured.theme-purple {
background: linear-gradient(135deg, #c4b5fd, #ddd6fe, #ede9fe) !important;
}
#as-nav-root .mega-featured.theme-pink {
background: linear-gradient(135deg, #f9a8d4, #f472b6, #fce7f3) !important;
}
#as-nav-root .mega-featured-text {
font-size: 28px !important;
font-weight: 800 !important;
color: #000 !important;
line-height: 1.2 !important;
letter-spacing: -0.02em !important;
-webkit-text-fill-color: unset !important;
}
#as-nav-root .mega-featured-btn {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: #000 !important;
color: #fff !important;
padding: 12px 20px !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 600 !important;
width: fit-content !important;
transition: background .2s, transform .2s !important;
text-decoration: none !important;
margin-top: 24px !important;
border: none !important;
line-height: 1 !important;
-webkit-text-fill-color: unset !important;
}
#as-nav-root .mega-featured-btn:hover {
background: #333 !important;
transform: translateY(-1px) !important;
}
#as-nav-root .mega-featured-btn .circle-arrow {
width: 22px !important;
height: 22px !important;
border: 1.5px solid rgba(255, 255, 255, .5) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#as-nav-root .mega-featured-btn .circle-arrow svg {
width: 10px !important;
height: 10px !important;
}
/* LINKS (right column) */
#as-nav-root .mega-links {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
min-width: 200px !important;
}
#as-nav-root .mega-links.as-nav-multi-col {
display: grid !important;
grid-template-rows: repeat(9, min-content) !important;
grid-auto-flow: column !important;
grid-auto-columns: 270px !important;
gap: 2px !important;
width: auto !important;
}
#as-nav-root .mega-link {
display: flex !important;
align-items: center !important;
padding: 14px 54px 14px 20px !important;
border-radius: 4px !important;
background: #2a2a2a !important;
transition: background .25s ease, border-color .25s ease, box-shadow .2s, transform .2s !important;
border: 1px solid transparent !important;
cursor: pointer !important;
text-decoration: none !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
white-space: nowrap !important;
line-height: 1 !important;
-webkit-text-fill-color: unset !important;
}
#as-nav-root .mega-link:hover {
background: #333 !important;
border-color: rgba(255, 255, 255, .1) !important;
transform: translateY(-2px) !important;
z-index: 1 !important;
position: relative !important;
}
/* Icon badges inside mega-links */
#as-nav-root .mega-link-icon {
width: 22px !important;
height: 22px !important;
border-radius: 5px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 12px !important;
flex-shrink: 0 !important;
margin-right: 10px !important;
line-height: 1 !important;
}
/* Theme Colors */
#as-nav-root .nav-item[data-as-nav-dropdown="product"] .mega-link:hover {
background: rgba(103, 232, 249, 0.35) !important;
box-shadow: 0 4px 20px rgba(103, 232, 249, 0.4), inset 0 0 0 1px rgba(103, 232, 249, 0.5) !important;
border-color: rgba(103, 232, 249, 0.6) !important;
}
#as-nav-root .nav-item[data-as-nav-dropdown="solutions"] .mega-link:hover {
background: rgba(253, 230, 138, 0.35) !important;
box-shadow: 0 4px 20px rgba(253, 230, 138, 0.4), inset 0 0 0 1px rgba(253, 230, 138, 0.5) !important;
border-color: rgba(253, 230, 138, 0.6) !important;
}
#as-nav-root .nav-item[data-as-nav-dropdown="resources"] .mega-link:hover {
background: rgba(196, 181, 253, 0.35) !important;
box-shadow: 0 4px 20px rgba(196, 181, 253, 0.4), inset 0 0 0 1px rgba(196, 181, 253, 0.5) !important;
border-color: rgba(196, 181, 253, 0.6) !important;
}
#as-nav-root .nav-item[data-as-nav-dropdown="company"] .mega-link:hover {
background: rgba(249, 168, 212, 0.35) !important;
box-shadow: 0 4px 20px rgba(249, 168, 212, 0.4), inset 0 0 0 1px rgba(249, 168, 212, 0.5) !important;
border-color: rgba(249, 168, 212, 0.6) !important;
}
#as-nav-root .mega-link.as-nav-highlight {
background: linear-gradient(135deg, #a855f7, #6366f1) !important;
color: #fff !important;
font-weight: 600 !important;
}
#as-nav-root .mega-link.as-nav-highlight:hover {
background: linear-gradient(135deg, #9333ea, #4f46e5) !important;
}
/* ===== MOBILE ===== */
#as-nav-root .mobile-toggle {
display: none !important;
width: 40px !important;
height: 40px !important;
background: transparent !important;
border: 1px solid rgba(255, 255, 255, .15) !important;
border-radius: 8px !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
cursor: pointer !important;
}
#as-nav-root .mobile-toggle span {
width: 20px !important;
height: 2px !important;
background: #fff !important;
border-radius: 2px !important;
transition: transform .3s, opacity .3s !important;
display: block !important;
}
#as-nav-root .mobile-toggle.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg) !important;
}
#as-nav-root .mobile-toggle.open span:nth-child(2) {
opacity: 0 !important;
}
#as-nav-root .mobile-toggle.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg) !important;
}
#as-nav-root .mobile-menu {
display: none !important;
position: fixed !important;
top: 56px !important;
right: 0 !important;
bottom: 0 !important;
width: 340px !important;
max-width: 85vw !important;
background: #111 !important;
z-index: calc(var(--as-nav-z) + 2) !important;
flex-direction: column !important;
padding: 20px !important;
overflow-y: auto !important;
transform: translateX(100%) !important;
transition: transform .35s cubic-bezier(.4, 0, .2, 1) !important;
border: none !important;
}
#as-nav-root .mobile-menu.open {
transform: translateX(0) !important;
}
#as-nav-root .mobile-menu-item {
border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}
#as-nav-root .mobile-menu-trigger {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding: 18px 0 !important;
font-size: 18px !important;
font-weight: 600 !important;
color: #fff !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
-webkit-text-fill-color: unset !important;
}
#as-nav-root .mobile-menu-trigger .mobile-plus {
font-size: 22px !important;
font-weight: 300 !important;
transition: transform .3s !important;
color: rgba(255, 255, 255, .5) !important;
}
#as-nav-root .mobile-menu-item.open .mobile-menu-trigger .mobile-plus {
transform: rotate(45deg) !important;
}
#as-nav-root .mobile-accordion {
max-height: 0 !important;
overflow: hidden !important;
transition: max-height .35s cubic-bezier(.4, 0, .2, 1) !important;
}
#as-nav-root .mobile-menu-item.open .mobile-accordion {
max-height: 500px !important;
}
#as-nav-root .mobile-accordion a {
display: block !important;
padding: 12px 0 12px 16px !important;
font-size: 15px !important;
font-weight: 400 !important;
color: rgba(255, 255, 255, .7) !important;
transition: color .2s !important;
border: none !important;
background: none !important;
-webkit-text-fill-color: unset !important;
}
#as-nav-root .mobile-accordion a:hover {
color: #fff !important;
}
#as-nav-root .mobile-menu-link {
display: block !important;
padding: 18px 0 !important;
font-size: 18px !important;
font-weight: 600 !important;
color: #fff !important;
border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
background: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
-webkit-text-fill-color: unset !important;
}
#as-nav-root .mobile-cta {
display: flex !important;
gap: 12px !important;
margin-top: 24px !important;
padding-top: 20px !important;
}
#as-nav-root .mobile-cta a {
flex: 1 !important;
text-align: center !important;
padding: 16px !important;
border-radius: 8px !important;
font-size: 15px !important;
font-weight: 600 !important;
border: none !important;
-webkit-text-fill-color: unset !important;
}
#as-nav-root .mobile-cta .m-demo {
background: #f7ff00 !important;
color: #000 !important;
}
#as-nav-root .mobile-cta .m-try {
background: #ff00ff !important;
color: #000 !important;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
#as-nav-root .nav-links,
#as-nav-root .nav-right {
display: none !important;
}
#as-nav-root .mobile-toggle {
display: flex !important;
}
#as-nav-root .mobile-menu {
display: flex !important;
}
#as-nav-root .mega-panel {
display: none !important;
}
}
/* ============================================================
Grouped Product mega-menu (labelled columns + spotlight) — ADDED
============================================================ */
#as-nav-root .mega-product-right { display: flex !important; flex-direction: column !important; gap: 6px !important; }
#as-nav-root .mega-groups { display: grid !important; grid-template-columns: repeat(3, 224px) !important; gap: 2px 10px !important; align-items: start !important; }
#as-nav-root .mega-group { display: flex !important; flex-direction: column !important; gap: 2px !important; }
#as-nav-root .mega-group-title { font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.4) !important; padding: 9px 12px 3px !important; }
#as-nav-root .mega-product-right .mega-link { padding: 9px 16px 9px 14px !important; font-size: 12.5px !important; }
#as-nav-root .as-nav-highlight { background: linear-gradient(135deg, rgba(103, 232, 249, 0.18), rgba(192, 132, 252, 0.16)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important; }
#as-nav-root .mega-subrow { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; margin-top: 6px !important; padding: 14px 18px !important; border-radius: 6px !important; background: linear-gradient(90deg, rgba(103, 232, 249, 0.18), rgba(192, 132, 252, 0.16)) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; }
#as-nav-root .mega-subrow-text { color: rgba(255, 255, 255, 0.85) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.3 !important; }
#as-nav-root .mega-subrow-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; background: #22d3ee !important; color: #04232b !important; padding: 10px 16px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap !important; transition: transform .2s, filter .2s !important; }
#as-nav-root .mega-subrow-btn:hover { transform: translateY(-2px) !important; background: #06b6d4 !important; box-shadow: 0 8px 22px rgba(34, 211, 238, 0.45) !important; }
#as-nav-root .mega-subrow-btn .circle-arrow { width: 20px !important; height: 20px !important; border: 1.5px solid rgba(0, 0, 0, 0.35) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: transform .2s !important; }
#as-nav-root .mega-subrow-btn .circle-arrow svg { width: 10px !important; height: 10px !important; }
#as-nav-root .mega-subrow-btn:hover .circle-arrow { transform: translate(2px, -2px) !important; }
/* Top banner — ensure the scrolling message is fully visible on phones */
@media (max-width: 640px) {
#as-nav-root .top-banner { height: auto !important; min-height: 30px !important; padding: 5px 0 !important; }
#as-nav-root .banner-item { font-size: 11.5px !important; padding: 0 16px !important; gap: 16px !important; line-height: 1.4 !important; }
}
/* ===== style/school-hero.css ===== */
:root {
--ds4-bg: #f4f4f4;
--ds4-text: #000000;
--ds4-yellow: #f8df67;
--ds4-peach: #fcdfb6;
--ds4-border: 3px solid #000;
--ds4-shadow: 6px 6px 0 #000;
--ds4-shadow-lg: 12px 12px 0 #000;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
}
body {
background-color: var(--ds4-bg);
color: var(--ds4-text);
/* Subtle dotted background grid */
background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
background-size: 18px 18px;
overflow-x: hidden;
}
.ds4-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 48px 24px 0;
max-width: 1300px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* Floating Background Elements */
.ds4-floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 200px);
pointer-events: none;
z-index: 0;
}
.ds4-shape {
position: absolute;
animation: ds4-float 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.ds4-shape { animation: none !important; }
}
@keyframes ds4-float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
/* Specific brutalist shapes */
.ds4-shape.s1 {
top: 6%;
left: 3vw;
animation-delay: 0s;
}
.ds4-shape.s2 {
top: 40%;
right: 4vw;
animation-delay: -3s;
}
.ds4-shape.t1 {
top: 8%;
right: 3vw;
animation-delay: -1.5s;
}
.ds4-shape.t2 {
bottom: 14%;
left: 2vw;
animation-delay: -4s;
}
.ds4-shape.t3 {
top: 15%;
left: 3vw;
animation-delay: -2s;
}
.ds4-shape.t4 {
bottom: 18%;
right: 4vw;
animation-delay: -5s;
}
.brutal-square {
width: 45px;
height: 45px;
background: #60a5fa;
border: 3px solid #000;
box-shadow: 4px 4px 0 #000;
border-radius: 4px;
}
.brutal-svg-wrap {
filter: drop-shadow(4px 4px 0 #000);
}
.brutal-svg-wrap svg {
width: 50px;
height: 50px;
overflow: visible;
}
.ds4-tag {
background: white;
border: 3px solid #000;
box-shadow: 4px 4px 0 #000;
padding: 8px 16px;
border-radius: 8px;
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.03em;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.ds4-tag.vibrant-pink {
background: #ff90e8;
color: #000000;
}
.ds4-tag.vibrant-cyan {
background: #22d3ee;
color: #000000;
}
.ds4-tag.vibrant-lime {
background: #bef264;
color: #000000;
}
.ds4-tag-icon {
font-size: 1.2rem;
}
.ds4-badge-box {
position: relative;
margin-bottom: 8px;
opacity: 0;
}
.ds4-badge {
background-color: #e4a8f6;
border: var(--ds4-border);
box-shadow: 4px 4px 0 #000;
padding: 5px 16px;
color: #000000;
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.2;
display: inline-block;
}
.ds4-title {
font-family: 'welfare', 'Inter', system-ui, sans-serif;
font-size: 70px;
font-weight: 400;
line-height: 1.05;
letter-spacing: 0.02em;
max-width: 800px;
margin-bottom: 16px;
text-transform: uppercase;
opacity: 0;
font-synthesis: none;
}
.ds4-title .grad-text {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
text-transform: inherit;
font-synthesis: none;
vertical-align: baseline;
}
.ds4-subtitle {
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-size: 18px;
font-weight: 500;
letter-spacing: 0.025em;
color: #4a4a4a;
max-width: 550px;
line-height: 1.6;
margin-bottom: 32px;
opacity: 0;
}
.ds4-btn-group {
display: flex;
gap: 24px;
align-items: center;
margin-bottom: 32px;
opacity: 0;
}
.ds4-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.03em;
text-decoration: none;
color: var(--ds4-text);
transition: transform 0.1s ease, box-shadow 0.1s ease;
cursor: pointer;
}
.ds4-btn-primary {
background-color: #ff774a;
border: var(--ds4-border);
box-shadow: var(--ds4-shadow);
padding-top: 8px;
padding-bottom: 8px;
font-size: 1.12rem;
line-height: 1.2;
}
.ds4-btn-primary:hover {
transform: translate(2px, 2px);
box-shadow: 4px 4px 0 #000;
}
.ds4-btn-primary:active {
transform: translate(6px, 6px);
box-shadow: 0 0 0 #000;
}
.ds4-btn-secondary {
background: transparent;
border: none;
display: flex;
gap: 8px;
}
.ds4-btn-secondary:hover {
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.ds4-trust-label {
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.03em;
color: #6b6b6b;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 60px;
opacity: 0;
}
.ds4-dashboard-container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
perspective: 1400px;
padding-bottom: 40px;
position: relative;
z-index: 10;
}
.ds4-dashboard-wrapper {
background: white;
border: 4px solid #000;
box-shadow: var(--ds4-shadow-lg);
border-radius: 4px;
padding: 0;
transform-style: preserve-3d;
transform: rotateX(15deg) scale(0.85) translateY(60px);
opacity: 0;
overflow: hidden;
display: flex;
}
.ds4-dashboard-wrapper img {
width: 100%;
height: auto;
display: block;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.ds4-scroll-spacer {
height: 600px;
}
@media (max-width: 768px) {
.ds4-btn-group {
flex-direction: column;
gap: 16px;
}
.ds4-dashboard-wrapper {
border-width: 3px;
box-shadow: 8px 8px 0 #000;
}
}
/* ===== style/school-utilities.css ===== */
/* ===================================================
SCHOOL UTILITIES — replaces Tailwind CDN
Only the utility classes actually used by school.html
are included. Loaded once from .
=================================================== */
/* Width / Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
/* Display */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
/* Layout container — Tailwind .container responsive width */
.container { width: 100%; }
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }
/* Auto margins */
.mx-auto { margin-left: auto; margin-right: auto; }
/* Padding utilities */
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 768px) { .md\:px-14 { padding-left: 3.5rem; padding-right: 3.5rem; } }
@media (min-width: 1024px) { .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; } }
/* Borders */
.border-b { border-bottom: 1px solid currentColor; }
.border-t { border-top: 1px solid currentColor; }
.border-\[color\:var\(--line\)\] { border-color: var(--line); }
/* Responsive display */
@media (min-width: 640px) { .sm\:block { display: block; } }
/* Inline arbitrary text colour used on the CTA */
.text-\[\#ff90fd\] { color: #ff90fd; }
/* ===== style/hierarchy.css ===== */
/* ====== Hierarchy Section Styles ====== */
body.hierarchy-font { font-family: 'Salmond', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
/* ====== Tree UI helpers ====== */
.tree-panel {
position: relative;
height: auto;
overflow: hidden;
}
.tree-scroll {
height: auto;
overflow: visible;
padding-right: 6px;
}
.tree-scroll::-webkit-scrollbar { width: 8px; }
.tree-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 999px; }
.tree-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.tree-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* Column spine (vertical) */
.spine {
position: absolute;
top: 72px;
bottom: 22px;
width: 2px;
background: #e2e8f0;
border-radius: 999px;
opacity: 1;
}
.spine.left { left: 26px; }
.spine.right { left: 26px; }
/* Node row: dot + connector elbow */
.node {
position: relative;
padding-left: 52px; /* room for spine + dot + elbow */
}
.node::before {
content: "";
position: absolute;
left: 25px;
top: 22px;
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--dot, #6366f1);
box-shadow: 0 0 0 6px var(--ring, rgba(99,102,241,.14));
z-index: 3;
}
.node::after {
content: "";
position: absolute;
left: 26px;
top: 26px;
width: 18px;
height: 2px;
background: #e2e8f0;
border-radius: 999px;
z-index: 2;
}
/* Root node special (no elbow line) */
.node-root {
padding-left: 0;
}
.node-root::before,
.node-root::after { display: none; }
/* Bridge connector from left column "Subject" to right column "Syllabus" */
.bridge-wrap { position: relative; }
.bridge-line {
position: absolute;
left: calc(50% - 70px);
right: calc(50% - 70px);
top: 310px; /* tuned for this layout */
height: 2px;
background: linear-gradient(90deg, #e2e8f0, rgba(99,102,241,.35), #e2e8f0);
border-radius: 999px;
pointer-events: none;
}
.bridge-dot {
position: absolute;
top: 306px;
width: 10px;
height: 10px;
border-radius: 999px;
background: #6366f1;
box-shadow: 0 0 0 6px rgba(99,102,241,.12);
pointer-events: none;
}
.bridge-dot.left { left: calc(50% - 74px); }
.bridge-dot.right { right: calc(50% - 74px); }
/* Make the full section wider (less empty space) */
.max-wide {
max-width: 1480px; /* wider than default Tailwind container */
}
/* Requested outer spacing */
.hierarchy-shell {
padding-left: 95px;
padding-right: 95px;
}
.ds1-border-main {
border: 3px solid #1a1a1a;
border-radius: 10px;
box-shadow: 6px 6px 0 #1a1a1a;
}
.ds1-border-sub {
border: 2px solid #1a1a1a;
border-radius: 10px;
box-shadow: 4px 4px 0 #1a1a1a;
}
.box-white { background: #ffffff; }
.box-yellow { background: #f0ee6e; }
.box-mint { background: #c5f0e8; }
.box-peach { background: #f5d5b5; }
.box-ice { background: #e7f0ff; }
.box-cream { background: #fff7d6; }
.box-sky { background: #e9f5ff; }
/* Simple tree view (single column) */
.tree-preview-panel .tree-scroll {
padding-right: 4px;
margin-top: 12px;
}
.tree-preview-panel .tree-preview-title {
font-size: 11px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: #334155;
}
.tree-preview-panel .tree-view-chip {
font-size: 11px;
line-height: 1.2;
font-weight: 400;
color: #475569;
}
.component-item-label {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.component-item-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
flex-shrink: 0;
}
.tree-preview-panel .simple-tree-wrap {
border: 2px dashed #cfd8e3;
border-radius: 14px;
background: #f8fafc;
padding: 10px 8px 12px;
min-height: 0;
}
.tree-preview-panel .simple-tree {
list-style: none;
margin: 0;
padding: 0;
}
.tree-preview-panel .simple-tree-item {
--depth: 0;
position: relative;
margin: 4px 0;
padding-left: calc((var(--depth) * 14px) + 2px);
}
.tree-preview-panel .simple-tree-item.depth-0 { --depth: 0; }
.tree-preview-panel .simple-tree-item.depth-1 { --depth: 1; }
.tree-preview-panel .simple-tree-item.depth-2 { --depth: 2; }
.tree-preview-panel .simple-tree-item.depth-3 { --depth: 3; }
.tree-preview-panel .simple-tree-item.depth-4 { --depth: 4; }
.tree-preview-panel .simple-tree-item.depth-5 { --depth: 5; }
.tree-preview-panel .simple-tree-item.depth-6 { --depth: 6; }
.tree-preview-panel .simple-tree-item:not(.depth-0)::before {
content: "";
position: absolute;
left: calc((var(--depth) * 14px) - 7px);
top: -7px;
width: 10px;
height: 20px;
border-left: 2px solid #c5cfda;
border-bottom: 2px solid #c5cfda;
border-bottom-left-radius: 8px;
pointer-events: none;
}
.tree-preview-panel .simple-node-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border: 1px solid #e2e8f0;
border-left: 3px solid #6366f1;
border-radius: 12px;
background: #ffffff;
padding: 8px 9px;
min-height: 46px;
}
.tree-preview-panel .simple-node-main {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
}
.tree-preview-panel .simple-node-icon {
font-size: 14px;
line-height: 1;
width: 18px;
text-align: center;
flex-shrink: 0;
}
.tree-preview-panel .simple-node-label {
font-size: 13px;
line-height: 1.25;
font-weight: 400;
color: #243b5a;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.tree-preview-panel .simple-node-actions {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.tree-preview-panel .simple-btn {
width: 24px;
height: 24px;
border-radius: 7px;
border: 1px solid transparent;
font-size: 0;
line-height: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
font-weight: 600;
padding: 0;
}
.tree-preview-panel .simple-btn::before {
display: block;
line-height: 1;
font-size: 10px;
}
.tree-preview-panel .simple-btn.up::before {
content: "\02C4";
}
.tree-preview-panel .simple-btn.down::before {
content: "\02C5";
}
.tree-preview-panel .simple-btn.del::before {
content: "\00D7";
font-size: 11px;
}
.tree-preview-panel .simple-btn.up {
border-color: #b7e8c7;
color: #16a34a;
background: #eefcf3;
}
.tree-preview-panel .simple-btn.down {
border-color: #bfd4ff;
color: #2563eb;
background: #eff5ff;
}
.tree-preview-panel .simple-btn.del {
border-color: #f3c1c1;
color: #ef4444;
background: #fff3f3;
}
.tree-preview-panel .simple-preview-footer {
margin-top: 10px;
font-size: 11px;
color: #64748b;
font-weight: 400;
}
@media (max-width: 1280px) {
.hierarchy-shell {
padding-left: 48px;
padding-right: 48px;
}
}
@media (max-width: 900px) {
.tree-preview-panel .simple-tree-wrap {
min-height: 0;
}
.tree-preview-panel .simple-node-row {
min-height: 44px;
}
.tree-preview-panel .simple-btn {
width: 21px;
height: 21px;
}
.tree-preview-panel .simple-btn::before {
font-size: 9px;
}
}
@media (max-width: 768px) {
.hierarchy-shell {
padding-left: 16px;
padding-right: 16px;
}
}
/* ===== style/admission.css ===== */
/* ====== Admission Section Styles ====== */
/* === SECTION === */
#admissions-flow {
position: relative;
overflow: clip;
background: #e8e4e0;
}
#admissions-flow::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(600px 400px at 10% 20%, rgba(124, 65, 255, .12), transparent 60%),
radial-gradient(500px 400px at 85% 60%, rgba(236, 48, 161, .08), transparent 55%),
radial-gradient(400px 300px at 50% 90%, rgba(37, 174, 96, .06), transparent 50%);
}
#admissions-flow .section-inner {
position: relative;
max-width: 1440px;
margin: 0 auto;
padding: 17px 95px 28px;
}
@media(min-width:768px) {
#admissions-flow .section-inner {
padding: 23px 95px 28px;
}
}
@media(max-width:1280px) {
#admissions-flow .section-inner {
padding-left: 48px;
padding-right: 48px;
}
}
@media(max-width:768px) {
#admissions-flow .section-inner {
padding-left: 16px;
padding-right: 16px;
}
}
/* === HEADER ROW === */
#admissions-flow .header-row {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: start;
min-width: 0;
}
@media(min-width:900px) {
#admissions-flow .header-row {
grid-template-columns: 1fr auto;
gap: 32px;
}
}
#admissions-flow .adm-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 12px;
border: 3px solid #111827;
background: #8fd8ff;
box-shadow: 0 2px 0 rgba(17, 24, 39, .18);
padding: 8px 18px;
font-size: clamp(11px, .9vw, 14px);
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
color: #111827;
line-height: 1.1;
white-space: nowrap;
margin-bottom: 0;
}
@media (max-width: 767px) {
#admissions-flow .adm-badge {
padding: 7px 12px;
font-size: 10px;
letter-spacing: .08em;
}
}
#admissions-flow .header-title {
font-family: 'welfare', 'Inter', system-ui, sans-serif;
margin: 4px auto 0;
font-size: 32px;
font-weight: 400;
line-height: 1.14;
letter-spacing: -0.02em;
font-synthesis: none;
}
@media(min-width:768px) {
#admissions-flow .header-title {
font-size: 44px;
}
}
#admissions-flow .gradient-text {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
background: linear-gradient(135deg, var(--adm-purple), var(--adm-pink), var(--adm-gold));
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: adm-shimmer 4s var(--adm-ease-inout) infinite;
}
@keyframes adm-shimmer {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
#admissions-flow .header-desc {
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
margin: 10px auto 0;
font-size: 17px;
font-weight: 700;
letter-spacing: 0.025em;
font-synthesis: none;
/* Darker than #admissions-flow .adm-badge fill (#8fd8ff) */
color: #0c3d52;
color: color-mix(in srgb, #8fd8ff 20%, #1a1a1a 80%);
max-width: 520px;
line-height: 1.48;
}
#admissions-flow .header-desc .header-desc-line {
display: block;
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-size: inherit;
letter-spacing: inherit;
font-synthesis: none;
}
@media(min-width:1024px) {
#admissions-flow .header-desc .header-desc-line {
white-space: nowrap;
}
}
/* KPI boxes */
#admissions-flow .kpi-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
#admissions-flow .kpi-box {
flex: 1;
min-width: 120px;
border-radius: 10px;
border: 2px solid var(--adm-ds1-border);
background: #fff;
box-shadow: 4px 4px 0 var(--adm-ds1-border);
padding: 12px 14px;
transition: transform .25s var(--adm-ease-out);
cursor: default;
}
#admissions-flow .kpi-box:nth-child(1) {
background: #fff7d6;
}
#admissions-flow .kpi-box:nth-child(2) {
background: #f5d5b5;
}
#admissions-flow .kpi-box:nth-child(3) {
background: #c5f0e8;
}
#admissions-flow .kpi-box:hover {
transform: translateY(-2px);
box-shadow: 5px 5px 0 var(--adm-ds1-border);
}
#admissions-flow .kpi-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--adm-text-muted);
}
#admissions-flow .kpi-value {
font-size: 15px;
font-weight: 800;
margin-top: 3px;
}
#admissions-flow .kpi-sub {
font-size: 10px;
color: var(--adm-text-muted);
margin-top: 2px;
}
/* === MAIN LAYOUT === */
#admissions-flow .main-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-top: 32px;
min-width: 0;
}
@media(min-width:900px) {
#admissions-flow .main-grid {
grid-template-columns: 360px 1fr;
gap: 28px;
}
}
/* === LEFT SIDEBAR === */
#admissions-flow .sidebar {
position: relative;
}
@media(min-width:900px) {
#admissions-flow .sidebar {
position: sticky;
top: 120px;
align-self: start;
max-height: none;
overflow: visible;
}
}
#admissions-flow .progress-card {
--progress-bg: #ffffff;
--progress-title: #111111;
--progress-muted: #5f5f63;
--progress-rail-start: var(--adm-purple);
--progress-rail-mid: var(--adm-pink);
--progress-rail-end: var(--adm-green);
border-radius: 10px;
border: 3px solid var(--adm-ds1-border);
background: var(--progress-bg);
box-shadow: 6px 6px 0 var(--adm-ds1-border);
padding: 24px;
transition: transform .25s var(--adm-ease-out);
color: var(--adm-text);
}
#admissions-flow .progress-card .progress-label-sm,
#admissions-flow .progress-card .rail-desc,
#admissions-flow .progress-card .features-header,
#admissions-flow .progress-card .features-list li {
color: var(--progress-muted);
}
#admissions-flow .progress-card .progress-title {
color: var(--progress-title);
}
#admissions-flow .progress-card .rail {
background: #d7dce2;
}
#admissions-flow .progress-card.progress-theme-purple {
--progress-bg: #f4edff;
--progress-title: #5b21b6;
--progress-muted: #5b5b7a;
--progress-rail-start: #7c3aed;
--progress-rail-mid: #8b5cf6;
--progress-rail-end: #a78bfa;
}
#admissions-flow .progress-card.progress-theme-pink {
--progress-bg: #fde8f3;
--progress-title: #9d174d;
--progress-muted: #7a5569;
--progress-rail-start: #be185d;
--progress-rail-mid: #db2777;
--progress-rail-end: #f472b6;
}
#admissions-flow .progress-card.progress-theme-green {
--progress-bg: #e5f7ef;
--progress-title: #166534;
--progress-muted: #4f6f63;
--progress-rail-start: #047857;
--progress-rail-mid: #059669;
--progress-rail-end: #34d399;
}
#admissions-flow .progress-card.progress-theme-gold {
--progress-bg: #fff4d9;
--progress-title: #92400e;
--progress-muted: #7a6648;
--progress-rail-start: #b45309;
--progress-rail-mid: #d97706;
--progress-rail-end: #fbbf24;
}
#admissions-flow .progress-card.progress-theme-dark {
--progress-bg: #e8edf4;
--progress-title: #0f172a;
--progress-muted: #475569;
--progress-rail-start: #334155;
--progress-rail-mid: #475569;
--progress-rail-end: #64748b;
}
#admissions-flow .progress-card .adm-btn-primary {
background: #111;
box-shadow: none;
}
#admissions-flow .progress-card .adm-btn-secondary {
border-color: var(--adm-ds1-border);
color: var(--adm-text);
}
#admissions-flow .progress-card .adm-btn-secondary:hover {
border-color: var(--adm-ds1-border);
color: var(--adm-text);
}
#admissions-flow .progress-card .features-divider {
border-color: #d4d4d8;
}
#admissions-flow .progress-card .features-header {
color: var(--progress-muted);
}
#admissions-flow .progress-card .features-list li {
color: var(--progress-muted);
}
#admissions-flow .progress-header {
display: flex;
flex-direction: column;
gap: 8px;
}
#admissions-flow .progress-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: nowrap;
}
#admissions-flow .progress-label-sm {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--adm-text-muted);
}
#admissions-flow .progress-title {
font-size: 40px;
font-weight: 800;
margin-top: 0;
line-height: 1.15;
}
#admissions-flow .step-badge {
border-radius: 999px;
border: 2px solid var(--adm-ds1-border);
background: linear-gradient(135deg, #ffd126, #fff2a6);
box-shadow: 2px 2px 0 var(--adm-ds1-border);
padding: 6px 12px;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
line-height: 1;
}
#admissions-flow .step-badge .num {
font-size: 16px;
font-weight: 900;
white-space: nowrap;
}
#admissions-flow .step-badge .lbl {
font-size: 10px;
font-weight: 600;
color: var(--adm-text-muted);
text-transform: uppercase;
letter-spacing: .05em;
}
/* Rail */
#admissions-flow .rail-wrap {
display: flex;
gap: 14px;
align-items: stretch;
margin-top: 16px;
}
#admissions-flow .rail {
width: 4px;
min-height: 100px;
border-radius: 999px;
background: #e8e8ec;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
#admissions-flow .rail-fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 999px;
background: linear-gradient(180deg, var(--progress-rail-start), var(--progress-rail-mid), var(--progress-rail-end));
transform-origin: top;
transform: scaleY(0);
will-change: transform;
transition: transform .3s var(--adm-ease-out);
}
#admissions-flow .rail-desc {
font-size: 12px;
color: var(--adm-text-muted);
line-height: 1.5;
}
#admissions-flow .btn-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
#admissions-flow .adm-btn-primary {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
background: var(--adm-purple);
color: #fff;
padding: 8px 16px;
font-size: 11px;
font-weight: 700;
border: none;
cursor: pointer;
transition: transform .25s var(--adm-ease-out), box-shadow .25s;
}
#admissions-flow .adm-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(124, 65, 255, .35);
}
#admissions-flow .adm-btn-secondary {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
background: transparent;
color: var(--adm-text-muted);
padding: 8px 14px;
font-size: 11px;
font-weight: 600;
border: 1px solid var(--adm-card-border);
cursor: pointer;
transition: border-color .25s, color .25s;
}
#admissions-flow .adm-btn-secondary:hover {
border-color: var(--adm-green);
color: var(--adm-green);
}
#admissions-flow .auto-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--adm-green);
opacity: .35;
transition: opacity .3s;
}
/* Features list */
#admissions-flow .features-divider {
border: none;
border-top: 1px solid var(--adm-card-border);
margin: 16px 0;
}
#admissions-flow .features-header {
display: flex;
justify-content: space-between;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--adm-text-muted);
margin-bottom: 10px;
}
#admissions-flow .features-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 7px;
}
#admissions-flow .features-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--adm-text-muted);
}
#admissions-flow .features-list li .fd {
width: 5px;
height: 5px;
border-radius: 50%;
flex-shrink: 0;
}
/* === RIGHT STEPS === */
#admissions-flow .steps-container {
border-radius: 0;
border: none;
background: transparent;
box-shadow: none;
padding: 20px;
min-width: 0;
}
#admissions-flow .steps-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
#admissions-flow .steps-title-sm {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--adm-text-muted);
}
#admissions-flow .steps-title {
font-size: 17px;
font-weight: 800;
margin-top: 2px;
}
#admissions-flow .steps-indicator {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--adm-text-muted);
}
#admissions-flow .steps-indicator .sid {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--adm-green);
}
#admissions-flow .steps-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
#admissions-flow .step-layout,
#admissions-flow .step-main {
min-width: 0;
}
/* One step per row */
#admissions-flow .step-row {
display: block;
}
#admissions-flow .step-row .step-card {
width: 100%;
}
#admissions-flow .step-arrow {
display: none;
}
#admissions-flow .step-arrow svg {
animation: none;
}
@keyframes adm-arrowSlideH {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(4px);
}
}
/* Vertical arrow between rows */
#admissions-flow .row-arrow {
display: none;
align-items: center;
justify-content: center;
padding: 6px 0;
line-height: 0;
color: #64748b;
}
#admissions-flow .row-arrow svg {
animation: adm-arrowBounce 2s var(--adm-ease-inout) infinite;
stroke: currentColor;
}
@keyframes adm-arrowBounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(4px);
}
}
/* Step card */
#admissions-flow .step-card {
border-radius: 10px;
border: 2px solid var(--adm-ds1-border);
background: #fff;
box-shadow: 4px 4px 0 var(--adm-ds1-border);
padding: 14px;
min-height: auto;
cursor: default;
position: relative;
overflow: visible;
transition: transform .25s var(--adm-ease-out), box-shadow .25s, z-index 0s;
z-index: 1;
}
#admissions-flow .step-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: center;
}
#admissions-flow .step-main {
display: flex;
flex-direction: column;
height: 100%;
}
/* Right panel holding the 4 feature tags */
#admissions-flow .step-tags-panel {
display: flex;
flex-direction: column;
gap: 8px;
align-self: center;
}
#admissions-flow #step-1,
#admissions-flow #step-5 {
background: #fff7d6;
}
#admissions-flow #step-2,
#admissions-flow #step-6 {
background: #e9f5ff;
}
#admissions-flow #step-3,
#admissions-flow #step-7 {
background: #c5f0e8;
}
#admissions-flow #step-4,
#admissions-flow #step-8 {
background: #f5d5b5;
}
/* Per-color title styling */
#admissions-flow #step-1 .step-name {
color: var(--adm-purple);
}
#admissions-flow #step-2 .step-name {
color: var(--adm-pink);
}
#admissions-flow #step-3 .step-name {
color: var(--adm-green);
}
#admissions-flow #step-4 .step-name {
color: #c9960c;
}
#admissions-flow #step-5 .step-name {
color: #222;
}
#admissions-flow #step-6 .step-name {
color: var(--adm-blue);
}
#admissions-flow #step-7 .step-name {
color: var(--adm-orange);
}
#admissions-flow #step-8 .step-name {
color: var(--adm-teal);
}
/* Per-color step-num badge */
#admissions-flow #step-1 .step-num {
background: #6d28d9;
border-color: #5b21b6;
color: #ffffff;
}
#admissions-flow #step-2 .step-num {
background: #be185d;
border-color: #9d174d;
color: #ffffff;
}
#admissions-flow #step-3 .step-num {
background: #047857;
border-color: #065f46;
color: #ffffff;
}
#admissions-flow #step-4 .step-num {
background: #b45309;
border-color: #92400e;
color: #ffffff;
}
#admissions-flow #step-5 .step-num {
background: #111111;
border-color: #000000;
color: #ffffff;
}
#admissions-flow #step-6 .step-num {
background: #1d4ed8;
border-color: #1e40af;
color: #ffffff;
}
#admissions-flow #step-7 .step-num {
background: #c2410c;
border-color: #9a3412;
color: #ffffff;
}
#admissions-flow #step-8 .step-num {
background: #0f766e;
border-color: #115e59;
color: #ffffff;
}
#admissions-flow .step-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
background-size: 55% 100%;
background-repeat: no-repeat;
background-position: -100% 0;
transition: background-position .7s var(--adm-ease-out);
pointer-events: none;
z-index: 2;
clip-path: inset(0 round 10px);
}
#admissions-flow .step-card:hover::after {
background-position: 200% 0;
}
#admissions-flow .step-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
z-index: 20;
}
/* Active color variants */
#admissions-flow .step-card.is-active {
z-index: 10;
}
#admissions-flow .step-card.is-active.active-purple {
background: var(--adm-purple);
border-color: var(--adm-purple);
color: #fff;
box-shadow: 0 8px 30px rgba(124, 65, 255, .25);
}
#admissions-flow .step-card.is-active.active-pink {
background: var(--adm-pink);
border-color: var(--adm-pink);
color: #fff;
box-shadow: 0 8px 30px rgba(236, 48, 161, .25);
}
#admissions-flow .step-card.is-active.active-green {
background: var(--adm-green);
border-color: var(--adm-green);
color: #fff;
box-shadow: 0 8px 30px rgba(37, 174, 96, .25);
}
#admissions-flow .step-card.is-active.active-gold {
background: var(--adm-gold);
border-color: var(--adm-gold);
color: #111;
box-shadow: 0 8px 30px rgba(255, 209, 38, .3);
}
#admissions-flow .step-card.is-active.active-dark {
background: #111;
border-color: #111;
color: #fff;
box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
}
#admissions-flow .step-card.is-active.active-blue {
background: #2563eb;
border-color: #2563eb;
color: #fff;
box-shadow: 0 8px 30px rgba(37, 99, 235, .25);
}
#admissions-flow .step-card.is-active.active-orange {
background: #f97316;
border-color: #f97316;
color: #fff;
box-shadow: 0 8px 30px rgba(249, 115, 22, .25);
}
#admissions-flow .step-card.is-active.active-teal {
background: #0d9488;
border-color: #0d9488;
color: #fff;
box-shadow: 0 8px 30px rgba(13, 148, 136, .25);
}
/* Override text colors inside active cards */
#admissions-flow .step-card.is-active .step-desc,
#admissions-flow .step-card.is-active .step-info-text,
#admissions-flow .step-card.is-active .sf-label {
color: rgba(255, 255, 255, .7);
}
#admissions-flow .step-card.is-active.active-gold .step-desc,
#admissions-flow .step-card.is-active.active-gold .step-info-text,
#admissions-flow .step-card.is-active.active-gold .sf-label {
color: rgba(0, 0, 0, .55);
}
#admissions-flow .step-card.is-active .step-num {
border-color: rgba(255, 255, 255, .3) !important;
background: rgba(255, 255, 255, .15) !important;
color: rgba(255, 255, 255, .8) !important;
}
#admissions-flow .step-card.is-active .step-name {
color: #fff !important;
}
#admissions-flow .step-card.is-active.active-gold .step-num {
border-color: rgba(0, 0, 0, .2) !important;
background: rgba(0, 0, 0, .08) !important;
color: rgba(0, 0, 0, .6) !important;
}
#admissions-flow .step-card.is-active.active-gold .step-name {
color: #111 !important;
}
#admissions-flow .step-card.is-active .sf {
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .15);
}
#admissions-flow .step-card.is-active.active-gold .sf {
background: rgba(0, 0, 0, .06);
border-color: rgba(0, 0, 0, .1);
}
#admissions-flow .step-card.is-active .sf-value {
color: #fff;
}
#admissions-flow .step-card.is-active.active-gold .sf-value {
color: #111;
}
#admissions-flow .step-card.is-active .step-info-link {
color: #fff;
}
#admissions-flow .step-card.is-active .adm-tag {
border-color: rgba(255, 255, 255, .3) !important;
background: rgba(255, 255, 255, .12) !important;
color: #fff !important;
}
#admissions-flow .step-card.is-active.active-gold .adm-tag {
border-color: rgba(0, 0, 0, .2) !important;
background: rgba(0, 0, 0, .06) !important;
color: #111 !important;
}
#admissions-flow .step-top {
display: flex;
align-items: start;
justify-content: space-between;
gap: 8px;
}
#admissions-flow .step-left {
display: flex;
align-items: start;
gap: 8px;
}
#admissions-flow .step-icon {
width: 38px;
height: 38px;
border-radius: 10px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
position: relative;
}
#admissions-flow .step-icon::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 14px;
background: radial-gradient(circle, currentColor, transparent 70%);
opacity: 0;
transition: opacity .4s;
pointer-events: none;
}
#admissions-flow .step-card.is-active .step-icon::before {
opacity: .15;
}
#admissions-flow .step-name {
font-size: clamp(22px, 2vw, 32px);
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 8px;
display: block;
}
#admissions-flow .step-desc {
font-size: 14px;
color: var(--adm-text-muted);
margin-top: 4px;
line-height: 1.55;
}
#admissions-flow .step-num {
font-size: 11px;
font-weight: 700;
color: var(--adm-text-muted);
border: 1px solid var(--adm-card-border);
border-radius: 999px;
padding: 2px 8px;
white-space: nowrap;
flex-shrink: 0;
}
/* Sub-features inside step (now in right panel, stacked vertically) */
#admissions-flow .step-features {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 0;
padding-top: 0;
}
#admissions-flow .sf {
min-width: 0;
border-radius: 6px;
border: 1px solid var(--adm-card-border);
background: var(--adm-card-bg);
padding: 8px 14px;
transition: border-color .3s, background .3s, filter .2s;
position: relative;
perspective: 600px;
z-index: 1;
width: 100%;
}
#admissions-flow .sf:hover {
filter: brightness(0.9);
z-index: 100;
}
#admissions-flow .sf-label {
font-size: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--adm-text-muted);
}
#admissions-flow .sf-value {
font-size: 12px;
font-weight: 700;
margin-top: 1px;
cursor: default;
}
/* 3D hover dropdown panel */
#admissions-flow .sf-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
max-width: 220px;
background: #000;
border: 1px solid #333;
border-radius: 4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
padding: 10px 12px;
z-index: 50;
transform-origin: top center;
transform: rotateX(-90deg) scaleY(0);
opacity: 0;
transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
pointer-events: none;
}
#admissions-flow .sf:hover .sf-dropdown {
transform: rotateX(0deg) scaleY(1);
opacity: 1;
pointer-events: auto;
}
#admissions-flow .sf-dropdown-text {
font-size: 11px;
font-weight: 500;
color: #fff !important;
line-height: 1.5;
}
/* Ensure dropdown always has dark bg even in active card state */
#admissions-flow .step-card.is-active .sf-dropdown {
background: #000 !important;
border-color: #333 !important;
}
/* Odd tags (1, 3) — white background */
#admissions-flow .step-features .sf:nth-child(odd) {
background: #ffffff !important;
border-color: #d0d0d0 !important;
border-radius: 6px !important;
}
#admissions-flow .step-features .sf:nth-child(odd) .sf-value {
color: #111111 !important;
}
/* Even tags (2, 4) — black background */
#admissions-flow .step-features .sf:nth-child(even) {
background: #111111 !important;
border-color: #111111 !important;
border-radius: 6px !important;
}
#admissions-flow .step-features .sf:nth-child(even) .sf-value {
color: #ffffff !important;
}
/* Tags */
#admissions-flow .step-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 10px;
}
#admissions-flow .adm-tag {
font-size: 10px;
font-weight: 600;
padding: 3px 10px;
border-radius: 999px;
border: 1px solid;
}
/* Step info row */
#admissions-flow .step-info-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
#admissions-flow .step-info-text {
font-size: 10px;
color: var(--adm-text-muted);
}
#admissions-flow .step-info-link {
font-size: 11px;
font-weight: 600;
color: var(--adm-purple);
border: none;
background: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
transition: color .2s;
}
#admissions-flow .step-info-link:hover {
color: var(--adm-pink);
}
/* CTA */
#admissions-flow .cta-card {
border-radius: 10px;
border: 3px solid var(--adm-ds1-border);
box-shadow: 6px 6px 0 var(--adm-ds1-border);
padding: clamp(14px, 2vw, 24px);
background: #e9f5ff;
position: relative;
overflow: hidden;
color: var(--adm-text);
}
#admissions-flow .cta-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 80% 30%, rgba(255, 209, 38, .2), transparent 50%);
pointer-events: none;
}
#admissions-flow .cta-top {
position: relative;
}
#admissions-flow .cta-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
opacity: .7;
}
#admissions-flow .cta-title {
font-size: 20px;
font-weight: 800;
margin-top: 4px;
}
#admissions-flow .cta-desc {
font-size: 13px;
opacity: .8;
margin-top: 4px;
}
#admissions-flow .cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
position: relative;
}
#admissions-flow .btn-cta-primary {
border-radius: 999px;
background: #fff;
color: #000;
padding: 10px 20px;
font-size: 13px;
font-weight: 800;
border: none;
cursor: pointer;
transition: transform .25s, box-shadow .25s;
}
#admissions-flow .btn-cta-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
#admissions-flow .btn-cta-secondary {
border-radius: 999px;
background: rgba(255, 255, 255, .15);
color: #fff;
padding: 10px 20px;
font-size: 13px;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, .2);
cursor: pointer;
transition: background .25s;
}
#admissions-flow .btn-cta-secondary:hover {
background: rgba(255, 255, 255, .25);
}
/* Reveal animation */
#admissions-flow .reveal {
opacity: 0;
transform: translateY(40px);
filter: blur(4px);
}
#admissions-flow .reveal.is-in {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* Color variants */
#admissions-flow .c-purple {
color: var(--adm-purple);
}
#admissions-flow .c-pink {
color: var(--adm-pink);
}
#admissions-flow .c-green {
color: var(--adm-green);
}
#admissions-flow .c-gold {
color: var(--adm-gold);
}
#admissions-flow .c-blue {
color: var(--adm-blue);
}
#admissions-flow .c-orange {
color: var(--adm-orange);
}
#admissions-flow .c-teal {
color: var(--adm-teal);
}
#admissions-flow .bg-purple {
background: rgba(124, 65, 255, .12);
border-color: rgba(124, 65, 255, .2);
}
#admissions-flow .bg-pink {
background: rgba(236, 48, 161, .12);
border-color: rgba(236, 48, 161, .2);
}
#admissions-flow .bg-green {
background: rgba(37, 174, 96, .12);
border-color: rgba(37, 174, 96, .2);
}
#admissions-flow .bg-gold {
background: rgba(255, 209, 38, .12);
border-color: rgba(255, 209, 38, .2);
}
#admissions-flow .bg-dark {
background: rgba(255, 255, 255, .05);
border-color: rgba(255, 255, 255, .08);
}
#admissions-flow .bg-blue {
background: rgba(37, 99, 235, .12);
border-color: rgba(37, 99, 235, .2);
}
#admissions-flow .bg-orange {
background: rgba(249, 115, 22, .12);
border-color: rgba(249, 115, 22, .2);
}
#admissions-flow .bg-teal {
background: rgba(13, 148, 136, .12);
border-color: rgba(13, 148, 136, .2);
}
/* Responsive */
@media(max-width:1200px) {
#admissions-flow .step-layout {
grid-template-columns: minmax(0, 60%) minmax(0, 40%);
}
#admissions-flow .main-grid {
grid-template-columns: 320px minmax(0, 1fr);
gap: 20px;
}
#admissions-flow .progress-card,
#admissions-flow .steps-container {
padding: 16px;
}
}
@media(max-width:900px) {
#admissions-flow .step-layout {
grid-template-columns: 1fr;
}
#admissions-flow .step-media {
min-height: auto;
max-height: 70px;
}
#admissions-flow .steps-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
#admissions-flow .btn-row {
width: 100%;
}
}
@media(max-width:1050px) {
#admissions-flow .main-grid {
grid-template-columns: 1fr;
gap: 18px;
}
#admissions-flow .sidebar {
position: relative;
top: auto;
max-height: none;
overflow: visible;
}
}
@media(max-width:900px) and (min-width:769px) {
#admissions-flow .section-inner {
padding-left: 24px;
padding-right: 24px;
}
}
@media(max-width:768px) {
#admissions-flow .header-row {
gap: 18px;
}
#admissions-flow .kpi-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#admissions-flow .kpi-box {
min-width: 0;
}
#admissions-flow .steps-container,
#admissions-flow .progress-card {
padding: 14px;
}
}
@media(max-width:640px) {
#admissions-flow .header-title {
font-size: 24px;
}
#admissions-flow .header-desc {
font-size: 13px;
}
#admissions-flow .kpi-row {
grid-template-columns: 1fr;
}
#admissions-flow .progress-topline {
flex-wrap: wrap;
}
#admissions-flow .step-name {
font-size: 14px;
}
#admissions-flow .step-desc {
font-size: 12px;
line-height: 1.4;
}
#admissions-flow .step-num {
font-size: 10px;
}
#admissions-flow .adm-btn-primary,
#admissions-flow .adm-btn-secondary,
#admissions-flow .btn-cta-primary,
#admissions-flow .btn-cta-secondary {
width: 100%;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
#admissions-flow * {
animation: none !important;
transition: none !important;
}
}
/* ═══════════════════════════════════════════════
MODULE SECTION v2 — layout & style overrides
═══════════════════════════════════════════════ */
/* 1. Wider section */
#admissions-flow .section-inner {
max-width: 1700px !important;
}
/* 2. Card: no padding (sections handle their own) */
#admissions-flow .step-card {
height: var(--adm-sync-card-height, 400px) !important;
min-height: var(--adm-sync-card-height, 400px) !important;
padding: 0 !important;
overflow: hidden !important;
}
/* 3. Three equal columns: left text | middle text | right image */
#admissions-flow .step-layout {
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.08fr) minmax(0, 0.84fr) !important;
align-items: stretch !important;
gap: 0 !important;
height: 100% !important;
}
/* Right image column — full height, flush to card edge */
#admissions-flow .step-img-col {
overflow: hidden;
border-radius: 0 8px 8px 0;
display: flex;
}
#admissions-flow .step-img-col .step-img-placeholder {
width: 100%;
height: 100%;
border-radius: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 600;
font-size: 11px;
color: rgba(255,255,255,.9);
padding: 16px 12px;
text-align: center;
}
#admissions-flow .step-img-col .step-img-placeholder svg {
width: 34px;
height: 34px;
}
/* 4. Left panel */
#admissions-flow .step-main {
padding: 16px 20px 18px 22px !important;
justify-content: flex-start !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
overflow: hidden !important;
}
/* 5. Very big title — maximum specificity */
#admissions-flow .step-card .step-layout .step-main .step-name {
font-size: 18px !important;
line-height: 1.22 !important;
font-weight: 800 !important;
letter-spacing: -0.01em !important;
margin: 0 0 10px !important;
word-break: break-word !important;
display: block !important;
}
#admissions-flow .step-main .step-desc {
font-size: 13px !important;
line-height: 1.45 !important;
margin-top: 0 !important;
}
/* 6. Number badge — inline, not stretched */
#admissions-flow .step-num {
display: none !important;
}
/* 7. Right panel — no dividing line */
#admissions-flow .step-tags-panel {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: 16px 20px 18px 22px !important;
border-left: none !important;
background: rgba(255,255,255,.45) !important;
height: 100% !important;
align-self: stretch !important;
}
#admissions-flow .step-img-col {
height: 100% !important;
align-self: stretch !important;
}
/* Right header row */
#admissions-flow .step-right-header {
display: flex;
align-items: center;
margin-bottom: 6px;
}
#admissions-flow .step-right-label {
font-size: 11px;
font-weight: 700;
color: #64748b;
letter-spacing: .07em;
text-transform: uppercase;
}
/* Right title */
#admissions-flow .step-right-title {
font-size: 17px;
font-weight: 700;
color: #0f172a;
line-height: 1.28;
margin-bottom: 10px;
}
/* Right desc text */
#admissions-flow .step-right-desc {
font-size: 13px;
color: #475569;
line-height: 1.55;
margin-bottom: 0;
flex: 1;
}
/* Image area — very short strip at bottom */
#admissions-flow .step-img-wrap {
flex: 0 0 auto;
height: 72px;
border-radius: 10px;
overflow: hidden;
display: flex;
}
#admissions-flow .step-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 12px;
}
#admissions-flow .step-img-placeholder {
width: 100%;
height: 100%;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
gap: 14px;
font-weight: 600;
font-size: 12px;
color: rgba(255,255,255,.9);
padding: 0 20px;
}
#admissions-flow .step-img-placeholder svg {
width: 28px;
height: 28px;
flex-shrink: 0;
}
/* Override #step-5 background */
#admissions-flow #step-5 { background: #f1f5f9 !important; }
@media (max-width: 1200px) {
#admissions-flow .step-layout {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.78fr) !important;
}
}
@media (max-width: 1050px) {
#admissions-flow .step-card {
height: auto !important;
min-height: 340px !important;
}
}
@media (max-width: 900px) {
#admissions-flow .step-layout {
grid-template-columns: 1fr !important;
}
#admissions-flow .step-main,
#admissions-flow .step-tags-panel {
padding: 16px !important;
}
#admissions-flow .step-img-col {
border-radius: 0 0 8px 8px;
}
}
/* ==========================================================================
Paired module stage v3
========================================================================== */
#admissions-flow .steps-column {
min-width: 0;
}
#admissions-flow .steps-grid,
#admissions-flow #final-cta {
display: none !important;
}
#admissions-flow .steps-container {
padding: 0 20px !important;
min-width: 0;
}
#admissions-flow .steps-viewport {
position: sticky;
top: 120px;
height: var(--adm-stage-height, 520px);
overflow: hidden;
perspective: 1600px;
}
#admissions-flow .steps-track {
display: flex;
flex-direction: column;
gap: 18px;
transform-style: preserve-3d;
will-change: transform;
}
#admissions-flow .step-group {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
min-height: var(--adm-stage-height, 520px);
transform-origin: center center;
transform-style: preserve-3d;
will-change: transform, opacity, filter;
}
#admissions-flow .pair-card {
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
min-height: calc((var(--adm-stage-height, 520px) - 18px) / 2);
border-radius: 12px;
border: 2px solid var(--adm-ds1-border);
background: #fff;
box-shadow: 5px 5px 0 var(--adm-ds1-border);
overflow: hidden;
}
#admissions-flow .pair-card__content {
padding: 18px 22px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
#admissions-flow .pair-card__eyebrow {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: #64748b;
margin-bottom: 8px;
}
#admissions-flow .pair-card__title {
font-size: clamp(22px, 1.75vw, 32px);
line-height: 1.04;
font-weight: 800;
letter-spacing: -0.03em;
color: #111827;
margin: 0 0 10px;
}
#admissions-flow .pair-card__desc {
font-size: 13px;
line-height: 1.55;
color: #475569;
max-width: 560px;
}
#admissions-flow .pair-card__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
#admissions-flow .pair-card__chips span {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 5px 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: .02em;
border: 1px solid transparent;
}
#admissions-flow .pair-card__visual {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 14px;
text-align: center;
color: rgba(255,255,255,.94);
font-size: 12px;
font-weight: 700;
line-height: 1.45;
}
#admissions-flow .pair-card__visual svg {
width: 34px;
height: 34px;
flex-shrink: 0;
}
#admissions-flow .pair-card--purple {
background: linear-gradient(180deg, #fff8de 0%, #fff4c8 100%);
}
#admissions-flow .pair-card--purple .pair-card__title {
color: #6d28d9;
}
#admissions-flow .pair-card--purple .pair-card__visual {
background: linear-gradient(160deg, #7c3aed 0%, #a78bfa 100%);
}
#admissions-flow .pair-card--purple .pair-card__chips span {
color: #6d28d9;
background: rgba(124, 58, 237, .08);
border-color: rgba(124, 58, 237, .16);
}
#admissions-flow .pair-card--pink {
background: linear-gradient(180deg, #fff0f7 0%, #ffe2f0 100%);
}
#admissions-flow .pair-card--pink .pair-card__title {
color: #be185d;
}
#admissions-flow .pair-card--pink .pair-card__visual {
background: linear-gradient(160deg, #9d174d 0%, #f472b6 100%);
}
#admissions-flow .pair-card--pink .pair-card__chips span {
color: #be185d;
background: rgba(236, 72, 153, .08);
border-color: rgba(236, 72, 153, .16);
}
#admissions-flow .pair-card--green {
background: linear-gradient(180deg, #ecfbf3 0%, #daf6e8 100%);
}
#admissions-flow .pair-card--green .pair-card__title {
color: #047857;
}
#admissions-flow .pair-card--green .pair-card__visual {
background: linear-gradient(160deg, #065f46 0%, #34d399 100%);
}
#admissions-flow .pair-card--green .pair-card__chips span {
color: #047857;
background: rgba(16, 185, 129, .08);
border-color: rgba(16, 185, 129, .16);
}
#admissions-flow .pair-card--gold {
background: linear-gradient(180deg, #fff7df 0%, #fff0c0 100%);
}
#admissions-flow .pair-card--gold .pair-card__title {
color: #b45309;
}
#admissions-flow .pair-card--gold .pair-card__visual {
background: linear-gradient(160deg, #92400e 0%, #fbbf24 100%);
}
#admissions-flow .pair-card--gold .pair-card__chips span {
color: #b45309;
background: rgba(251, 191, 36, .12);
border-color: rgba(217, 119, 6, .16);
}
#admissions-flow .pair-card--dark {
background: linear-gradient(180deg, #edf2f7 0%, #dde5ee 100%);
}
#admissions-flow .pair-card--dark .pair-card__title {
color: #0f172a;
}
#admissions-flow .pair-card--dark .pair-card__visual {
background: linear-gradient(160deg, #0f172a 0%, #475569 100%);
}
#admissions-flow .pair-card--dark .pair-card__chips span {
color: #334155;
background: rgba(51, 65, 85, .08);
border-color: rgba(51, 65, 85, .15);
}
#admissions-flow .pair-card--blue {
background: linear-gradient(180deg, #eef5ff 0%, #dbeafe 100%);
}
#admissions-flow .pair-card--blue .pair-card__title {
color: #1d4ed8;
}
#admissions-flow .pair-card--blue .pair-card__visual {
background: linear-gradient(160deg, #1d4ed8 0%, #60a5fa 100%);
}
#admissions-flow .pair-card--blue .pair-card__chips span {
color: #1d4ed8;
background: rgba(37, 99, 235, .08);
border-color: rgba(37, 99, 235, .16);
}
#admissions-flow .step-group.is-active .pair-card {
box-shadow: 8px 10px 0 var(--adm-ds1-border);
}
#admissions-flow #final-cta-stage {
margin-top: 26px;
}
@media (max-width: 1200px) {
#admissions-flow .pair-card {
grid-template-columns: minmax(0, 1fr) 190px;
}
}
@media (max-width: 1050px) {
#admissions-flow .steps-container {
padding: 0 !important;
height: auto !important;
}
#admissions-flow .steps-viewport {
position: static;
top: auto;
height: auto !important;
overflow: visible;
perspective: none;
}
#admissions-flow .steps-track {
transform: none !important;
gap: 14px;
}
#admissions-flow .step-group {
min-height: auto;
gap: 14px;
transform: none !important;
opacity: 1 !important;
filter: none !important;
}
#admissions-flow .pair-card {
grid-template-columns: 1fr;
min-height: auto;
}
#admissions-flow .pair-card__visual {
min-height: 128px;
}
}
@media (max-width: 640px) {
#admissions-flow .pair-card__content {
padding: 16px;
}
#admissions-flow .pair-card__title {
font-size: 22px;
}
#admissions-flow .pair-card__desc {
font-size: 12px;
line-height: 1.5;
}
}
/* ===== style/global.css ===== */
/* ===================================================
GLOBAL UTILITIES
Link this file in every HTML page:
(adjust the path as needed per folder depth)
=================================================== */
/* ── Animated Gradient Text ── */
/* Usage: your words */
/* Notes:
- data-text must match the text content exactly (needed for the border layer)
- inline-block: abspos ::before + inset:0 must share the same box as the fill; display:inline breaks alignment
- inherit font metrics so gradient words match sibling title size/tracking
- border works cleanly on all letters including P, W, R, O
*/
.grad-text {
display: inline-block;
position: relative;
vertical-align: baseline;
/* Contain ::before (z-index: -1) so the stroke stays above section/page backgrounds */
z-index: 0;
isolation: isolate;
overflow: visible;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
background: linear-gradient(
90deg,
#38bdf8 0%,
#f43f8e 20%,
#ffe600 40%,
#38bdf8 50%,
#f43f8e 70%,
#ffe600 85%,
#38bdf8 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: grad-text-slide 9s linear infinite;
}
/* Border layer — renders same text behind with stroke only, no fill */
/* paint-order: stroke fill keeps P/W/R/O counters clean */
.grad-text::before {
content: attr(data-text);
position: absolute;
inset: 0;
z-index: -1;
font: inherit;
letter-spacing: inherit;
word-spacing: inherit;
white-space: pre;
paint-order: stroke fill;
-webkit-text-stroke: 0.75px #000;
-webkit-text-stroke-width: 0.75px;
-webkit-text-stroke-color: #000;
-webkit-text-fill-color: transparent;
color: transparent;
pointer-events: none;
}
@keyframes grad-text-slide {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── AnekBangla Font Declaration ── */
/* ── Salmond body copy — extra letter spacing ── */
body.hierarchy-font p,
body.hierarchy-font li,
body.hierarchy-font .desc,
body.hierarchy-font .description,
body.hierarchy-font [class*="__copy"],
body.hierarchy-font [class*="__subtitle"],
body.hierarchy-font [class*="__mini-copy"],
body.hierarchy-font [class*="-subtitle"],
body.hierarchy-font [class*="-copy"] {
letter-spacing: 0.05em;
}
/* ── Button typography — AnekBangla ── */
body.hierarchy-font button,
body.hierarchy-font .btn,
body.hierarchy-font .btn-theme {
font-family: 'AnekBangla', 'Inter', system-ui, sans-serif;
}
/* ── Main section titles (under tagged section badges) — Title Case ── */
.ds1-section-title,
.school-ds14__title,
.hiw-header-v2__title,
.ds2-title,
.hiw-school-heading,
.ds5-intro__title,
.school-faq-section__title,
.school-stats-section-intro .ds1-section-title,
.fg-section-header .ds1-section-title,
.pp-intro-title,
.id-headline,
.numbers-title,
.card-title,
.header-title {
text-transform: capitalize !important;
}
/* Make grad-text inside titles inherit Title Case from parent */
.ds1-section-title .grad-text,
.school-ds14__title .grad-text,
.hiw-header-v2__title .grad-text,
.ds2-title .grad-text,
.hiw-school-heading .grad-text,
.ds5-intro__title .grad-text,
.school-faq-section__title .grad-text,
.pp-intro-title .grad-text,
.id-headline .grad-text,
.numbers-title .grad-text,
.card-title .grad-text,
.header-title .grad-text {
text-transform: capitalize !important;
}
/* ===== style/text-slider-band.css ===== */
/* ===== TEXT SLIDER BAND ===== */
/* All classes prefixed with tsb- (text-slider-band) to avoid global conflicts */
.tsb-wrap {
--tsb-color: #bc0202;
width: 100%;
max-width: 100%;
background: transparent;
margin: 24px 0;
padding: 22px 0;
box-sizing: border-box;
overflow: hidden;
overflow: clip;
contain: layout paint;
position: relative;
z-index: 1;
}
/* ── Per-section colour variants (drive both lines + band together) ── */
.tsb-wrap--scarlet { --tsb-color: #b41e04; }
.tsb-wrap--cobalt { --tsb-color: #2505a3; }
.tsb-wrap--ruby { --tsb-color: #bc0202; }
/* ── Vibrant flower colours per band (uses currentColor on the SVG path) ── */
.tsb-flower-icon { color: #ffe600; } /* default */
.tsb-wrap--scarlet .tsb-flower-icon { color: #ffe600; } /* electric yellow on red */
.tsb-wrap--cobalt .tsb-flower-icon { color: #ff9d00; } /* vivid orange on blue */
.tsb-wrap--ruby .tsb-flower-icon { color: #00ffd5; } /* neon aqua on red */
@media (max-width: 768px) {
.tsb-wrap {
margin: 18px 0;
padding: 16px 0;
max-width: 100%;
overflow: hidden;
overflow: clip;
contain: layout paint;
}
.tsb-band {
min-height: clamp(58px, 16vw, 74px);
max-width: 100%;
overflow: hidden;
overflow: clip;
contain: layout paint;
}
.tsb-marquee-track {
position: absolute;
inset: 0 auto 0 0;
height: 100%;
padding: 0;
max-width: none;
}
}
/* ── Stripe stacks (top + bottom) ── */
.tsb-stripes {
width: 100%;
display: flex;
flex-direction: column;
gap: 3px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tsb-line {
width: 100%;
background: var(--tsb-color);
border-radius: 1px;
}
.tsb-line--xs { height: 1px; }
.tsb-line--sm { height: 3px; }
.tsb-line--md { height: 6px; }
.tsb-line--lg { height: 8px; }
/* ── Middle band (matches the same colour as the stripes) ── */
.tsb-band {
width: 100%;
max-width: 100%;
min-height: calc(clamp(1.4rem, 2.6vw, 2.2rem) + 56px);
background: var(--tsb-color);
overflow: hidden;
overflow: clip;
contain: layout paint;
position: relative;
margin: 3px 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* ── Marquee track ── */
@keyframes tsb-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes tsb-marquee-reverse {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
.tsb-marquee-track {
position: absolute;
inset: 0 auto 0 0;
display: flex;
width: max-content;
height: 100%;
align-items: center;
animation: tsb-marquee 60s linear infinite;
padding: 0;
}
.tsb-marquee-track--reverse {
animation: tsb-marquee-reverse 60s linear infinite;
}
/* When two tracks are stacked inside the same band, reduce per-track padding */
.tsb-band--double .tsb-marquee-track {
padding: 0;
}
.tsb-slide-text {
display: flex;
align-items: center;
padding: 0 30px;
white-space: nowrap;
font-family: 'Boldonse', 'Inter', sans-serif;
font-size: clamp(1.4rem, 2.6vw, 2.2rem);
font-weight: 400;
letter-spacing: clamp(1px, 0.12vw, 2px);
word-spacing: 0.35em;
text-transform: capitalize;
color: #ffffff;
line-height: 1;
}
/* ── Spinning flower icon (separator) ── */
@keyframes tsb-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.tsb-flower-icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 14px;
animation: tsb-spin 10s linear infinite;
}
.tsb-flower-icon svg {
width: clamp(22px, 2.2vw, 34px);
height: auto;
}
@media (prefers-reduced-motion: reduce) {
.tsb-marquee-track,
.tsb-flower-icon { animation: none !important; }
}
/* ===== style/ds1-bento.css ===== */
/* ===== DS1 BENTO GRID — Didasko Clone ===== */
/* ---------- Google Font ---------- */
/* ---------- Page / Embed Shell ---------- */
.ds1-page,
.ds1-embed {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: #e8e4e0;
background-image:
radial-gradient(circle, #d4d0cc 1px, transparent 1px);
background-size: 20px 20px;
}
.ds1-page {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 24px;
}
.ds1-embed {
padding: 72px 24px;
}
/* ---------- Section Wrapper ---------- */
.ds1-section {
max-width: 1100px;
width: 100%;
margin: 0 auto;
}
.ds1-section-header {
text-align: center;
margin-bottom: 48px;
}
.ds1-badge {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #1a1a1a;
background: #ffe066;
border: 2px solid #1a1a1a;
border-radius: 6px;
padding: 6px 16px;
margin-bottom: 8px;
}
.ds1-section-title {
font-size: clamp(24px, 3.5vw, 36px);
font-weight: 900;
text-transform: uppercase;
color: #1a1a1a;
line-height: 1.1;
letter-spacing: -1px;
margin: 0 0 12px;
}
.ds1-section-subtitle {
font-size: 16px;
font-weight: 400;
color: #6b6b6b;
max-width: 560px;
margin: 0 auto;
line-height: 1.5;
}
/* ---------- Bento Grid ---------- */
.ds1-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 20px;
}
/* ---------- Card Base ---------- */
.ds1-card {
border: 3px solid #1a1a1a;
border-radius: 2px;
box-shadow: 6px 6px 0 #1a1a1a;
padding: 36px 32px;
position: relative;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ds1-card:hover {
transform: translate(-2px, -2px);
box-shadow: 8px 8px 0 #e85d75;
}
/* ---------- Card Variants ---------- */
.ds1-card--yellow {
background: #f0ee6e;
}
.ds1-card--white {
background: #fff;
}
.ds1-card--mint {
background: #c5f0e8;
}
.ds1-card--peach {
background: #f5d5b5;
}
/* ---------- Grid Placement ---------- */
.ds1-card--1 {
grid-column: 1 / 3;
grid-row: 1;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 20px;
min-height: 160px;
}
.ds1-card--2 {
grid-column: 3;
grid-row: 1;
min-height: 160px;
}
.ds1-card--3 {
grid-column: 1;
grid-row: 2;
min-height: 160px;
}
.ds1-card--4 {
grid-column: 2 / 4;
grid-row: 2;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 20px;
min-height: 160px;
}
.ds1-card--5 {
grid-column: 1 / 3;
grid-row: 3;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 20px;
min-height: 160px;
}
.ds1-card--6 {
grid-column: 3;
grid-row: 3;
min-height: 160px;
}
/* ---------- Card Text ---------- */
.ds1-card__title {
font-size: clamp(18px, 2.5vw, 26px);
font-weight: 900;
text-transform: uppercase;
color: #1a1a1a;
line-height: 1.1;
letter-spacing: -0.5px;
margin: 0 0 16px;
}
.ds1-card__desc {
font-size: 15px;
font-weight: 400;
color: #6b6b6b;
line-height: 1.55;
margin: 0;
}
/* ---------- Card 1: Course Card Illustration ---------- */
.ds1-illustration-course {
background: #d9d5f0;
border-radius: 10px;
padding: 20px 16px 12px;
max-width: 240px;
justify-self: center;
border: 1.5px solid #c4c0da;
}
.ds1-illustration-course__icon {
width: 36px;
height: 36px;
background: #fff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.ds1-illustration-course__icon svg {
width: 20px;
height: 20px;
color: #7c6cdc;
}
.ds1-illustration-course__label {
font-size: 14px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 14px;
}
.ds1-illustration-course__stats {
display: flex;
gap: 16px;
border-top: 1px solid #c4c0da;
padding-top: 10px;
}
.ds1-illustration-course__stat {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 500;
color: #555;
}
.ds1-illustration-course__stat svg {
width: 14px;
height: 14px;
color: #888;
}
/* ---------- Card 4: Gauge Illustration ---------- */
.ds1-illustration-gauge {
background: #fff;
border-radius: 12px;
padding: 16px 20px 14px;
max-width: 240px;
justify-self: center;
border: 1.5px solid #e0e0e0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.ds1-gauge-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.ds1-gauge-header__left {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: #1a1a1a;
}
.ds1-gauge-header__dot {
width: 10px;
height: 10px;
background: #4ecdc4;
border-radius: 3px;
}
.ds1-gauge-header__right {
font-size: 11px;
font-weight: 500;
color: #888;
background: #f5f5f5;
padding: 3px 10px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.ds1-gauge-header__right svg {
width: 10px;
height: 10px;
}
.ds1-gauge-canvas-wrap {
display: flex;
justify-content: center;
margin-bottom: 8px;
}
.ds1-gauge-canvas-wrap canvas {
width: 160px;
height: 100px;
}
.ds1-gauge-footer {
text-align: center;
font-size: 13px;
font-weight: 400;
color: #888;
}
.ds1-gauge-footer strong {
font-weight: 800;
color: #1a1a1a;
}
/* ---------- Card 5: Leaderboard Illustration ---------- */
.ds1-illustration-leaderboard {
background: #fff;
border-radius: 12px;
padding: 20px;
max-width: 280px;
justify-self: center;
border: 1.5px solid #e0e0e0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.ds1-leaderboard__title {
font-size: 14px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 12px;
}
.ds1-leaderboard__head {
display: flex;
gap: 32px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #aaa;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
}
.ds1-leaderboard__row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
}
.ds1-leaderboard__rank {
width: 28px;
height: 28px;
border-radius: 6px;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: #1a1a1a;
}
.ds1-leaderboard__trend {
font-size: 12px;
line-height: 1;
}
.ds1-leaderboard__trend--up {
color: #4ecdc4;
}
.ds1-leaderboard__trend--down {
color: #e85d75;
}
.ds1-leaderboard__avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: #d9d5f0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #6c5ce7;
overflow: hidden;
}
.ds1-leaderboard__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ds1-leaderboard__name {
font-size: 14px;
font-weight: 500;
color: #1a1a1a;
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.ds1-grid {
grid-template-columns: 1fr 1fr;
}
.ds1-card--1 {
grid-column: 1 / 3;
}
.ds1-card--2 {
grid-column: 1;
grid-row: 2;
}
.ds1-card--3 {
grid-column: 2;
grid-row: 2;
}
.ds1-card--4 {
grid-column: 1 / 3;
grid-row: 3;
}
.ds1-card--5 {
grid-column: 1 / 3;
grid-row: 4;
}
.ds1-card--6 {
grid-column: 1 / 3;
grid-row: 5;
}
}
@media (max-width: 600px) {
.ds1-embed {
padding: 56px 16px;
}
.ds1-grid {
grid-template-columns: 1fr;
}
.ds1-card--1,
.ds1-card--2,
.ds1-card--3,
.ds1-card--4,
.ds1-card--5,
.ds1-card--6 {
grid-column: 1;
grid-row: auto;
}
.ds1-card--1,
.ds1-card--4,
.ds1-card--5 {
grid-template-columns: 1fr;
}
}
/* ===== style/arrow-numbers-embed.css ===== */
#school-numbers {
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: #f2f0e4;
color: #1a1a1a;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#school-numbers *,
#school-numbers *::before,
#school-numbers *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#school-numbers .numbers-section {
background: #f2f0e4;
padding: 40px 0;
position: relative;
overflow: visible;
}
/* Full-width row: no right padding so stacked cards can meet the viewport edge */
#school-numbers .numbers-container {
max-width: none;
width: 100%;
margin: 0;
padding: 0 0 0 clamp(40px, 5vw, 120px);
display: flex;
gap: clamp(28px, 3vw, 52px);
align-items: flex-start;
}
/* Copy column — wide enough for Welfare title on two nowrap lines beside stat cards */
#school-numbers .numbers-left {
flex: 0 1 auto;
width: min(760px, 62vw);
min-width: 0;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
overflow: visible;
}
/* Matches .ds9-title-area .ds1-badge (e.g. “Documents, Compliance & Automation”):
bordered label, 6px radius, uppercase — background per section (#ffb097). */
#school-numbers .numbers-pill {
display: inline-block;
background: #ffb097;
color: #1a1a1a;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 18px;
border-radius: 6px;
border: 2px solid #1a1a1a;
margin-bottom: 8px;
}
#school-numbers .numbers-title {
font-family: 'welfare', 'Inter', system-ui, sans-serif;
font-size: clamp(2rem, 5vw, 3.1rem);
font-weight: 400;
line-height: 1;
letter-spacing: 0.04em;
color: #1a1a1a;
margin-bottom: 24px;
max-width: 100%;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Two rows: tight leading; first line may wrap if narrow; second stays one line */
#school-numbers .numbers-title__line {
display: block;
max-width: 100%;
line-height: 0.88;
}
#school-numbers .numbers-title > .numbers-title__line + .numbers-title__line {
margin-top: -0.055em;
}
#school-numbers .numbers-title > .numbers-title__line:first-child {
white-space: normal;
overflow-wrap: break-word;
}
#school-numbers .numbers-title > .numbers-title__line:last-child {
white-space: nowrap;
}
#school-numbers .numbers-title .grad-text {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
vertical-align: baseline;
}
#school-numbers .numbers-desc {
font-size: 16px;
font-weight: 400;
line-height: 1.65;
color: #4a4a4a;
max-width: 100%;
}
#school-numbers .numbers-desc--lead {
font-size: clamp(17px, 1.2vw, 18px);
font-weight: 700;
font-style: italic;
color: #1a4d5c;
line-height: 1.62;
}
/* Card stack width: modest bump above previous clamp without going full-bleed */
#school-numbers .numbers-right {
flex: 0 0 auto;
width: min(100%, clamp(640px, 54vw, 1200px));
margin-left: auto;
position: relative;
height: 560px;
}
#school-numbers .stat-card {
position: absolute;
left: 0;
right: 0;
}
#school-numbers .stat-card:nth-child(1) {
top: 0;
z-index: 1;
}
#school-numbers .stat-card:nth-child(2) {
top: 20px;
z-index: 2;
}
#school-numbers .stat-card:nth-child(3) {
top: 40px;
z-index: 3;
}
#school-numbers .stat-card:nth-child(4) {
top: 60px;
z-index: 4;
}
#school-numbers .stat-card__inner {
border-radius: 0;
position: relative;
padding: 22px clamp(28px, 3.5vw, 64px) 68px 40px;
min-height: 500px;
display: flex;
flex-direction: column;
justify-content: flex-start;
will-change: transform;
}
#school-numbers .stat-card:nth-child(n + 2) .stat-card__inner {
visibility: hidden;
opacity: 1;
}
#school-numbers .stat-card--black .stat-card__inner {
background: #000000;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}
#school-numbers .stat-card--yellow .stat-card__inner {
background: #fef95d;
box-shadow: 0 4px 30px rgba(254, 249, 93, 0.3);
}
#school-numbers .stat-card--green .stat-card__inner {
background: #5afca6;
box-shadow: 0 4px 30px rgba(90, 252, 166, 0.3);
}
#school-numbers .stat-card--pink .stat-card__inner {
background: #ffa5eb;
box-shadow: 0 4px 30px rgba(255, 165, 235, 0.3);
}
#school-numbers .stat-card__icon {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 16px;
right: clamp(18px, 2.4vw, 40px);
margin-bottom: 0;
flex-shrink: 0;
}
#school-numbers .stat-card--black .stat-card__icon {
background: rgba(255, 255, 255, 0.15);
}
#school-numbers .stat-card--yellow .stat-card__icon,
#school-numbers .stat-card--green .stat-card__icon,
#school-numbers .stat-card--pink .stat-card__icon {
background: rgba(0, 0, 0, 0.08);
}
#school-numbers .stat-card__icon svg {
width: 26px;
height: 26px;
}
#school-numbers .stat-card__heading {
font-family: 'AnekBangla', 'AnekBangla', 'Inter', system-ui, sans-serif;
font-size: 30px;
font-weight: 400;
line-height: 1.08;
letter-spacing: 0;
margin: 0 0 20px 0;
max-width: min(560px, calc(100% - 96px));
}
#school-numbers .stat-card--black .stat-card__heading {
color: #ffffff;
}
#school-numbers .stat-card--yellow .stat-card__heading,
#school-numbers .stat-card--green .stat-card__heading,
#school-numbers .stat-card--pink .stat-card__heading {
color: #1a1a1a;
}
#school-numbers .stat-card__desc {
font-size: 17px;
font-weight: 400;
line-height: 1.55;
max-width: 320px;
margin-top: auto;
}
#school-numbers .stat-card--black .stat-card__desc {
color: rgba(255, 255, 255, 0.85);
}
#school-numbers .stat-card--yellow .stat-card__desc,
#school-numbers .stat-card--green .stat-card__desc,
#school-numbers .stat-card--pink .stat-card__desc {
color: #1a1a1a;
}
/* Feature body + checklist bullets (matches Operations & Coordination / id-vrow2 cards) */
#school-numbers .stat-card__body--ops {
--stat-bullets-accent: #fef95d;
--stat-bullets-line: #0a0a0a;
--stat-bullets-border: #000000;
--stat-bullets-fg: #0f172a;
--stat-slogan-color: #0f172a;
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
margin: 0;
padding: 0;
max-width: min(560px, calc(100% - 8px));
align-self: flex-start;
}
#school-numbers .stat-card--black .stat-card__body--ops {
--stat-bullets-accent: #fef95d;
--stat-bullets-line: rgba(255, 255, 255, 0.38);
--stat-bullets-border: #ffffff;
--stat-bullets-fg: rgba(255, 255, 255, 0.92);
--stat-slogan-color: #fef95d;
}
#school-numbers .stat-card--yellow .stat-card__body--ops {
--stat-bullets-accent: #5afca6;
--stat-slogan-color: #a16207;
}
#school-numbers .stat-card--green .stat-card__body--ops {
--stat-bullets-accent: #fef95d;
--stat-slogan-color: #047857;
}
#school-numbers .stat-card--pink .stat-card__body--ops {
--stat-bullets-accent: #13e5fc;
--stat-slogan-color: #be185d;
}
#school-numbers .stat-card__body--ops .stat-card__slogan {
margin: 0 0 clamp(0.72rem, 1.65vw, 0.95rem);
font-size: clamp(0.92rem, 2.1vw, 1.12rem);
line-height: 1.22;
display: block;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--stat-slogan-color);
}
#school-numbers .stat-card__body--ops > p:not(.stat-card__slogan) {
font-size: clamp(0.78rem, 1.45vw, 0.95rem);
line-height: 1.45;
font-weight: 400;
display: block;
margin: 0 0 clamp(0.32rem, 0.85vw, 0.48rem);
color: var(--stat-bullets-fg);
}
#school-numbers .stat-card__body--ops ul {
list-style: none;
margin: auto 0 0;
padding: 0.55rem 0;
display: inline-flex;
flex-direction: column;
align-items: stretch;
flex: 0 0 auto;
max-width: 100%;
align-self: flex-start;
gap: 0;
background-image:
radial-gradient(circle closest-side, var(--stat-bullets-line) 0.85px, transparent 1px),
radial-gradient(circle closest-side, var(--stat-bullets-line) 0.85px, transparent 1px);
background-size: 8px 2px, 8px 2px;
background-position: 0 0, 0 100%;
background-repeat: repeat-x, repeat-x;
}
#school-numbers .stat-card__body--ops li {
font-size: clamp(0.74rem, 1.35vw, 0.9rem);
line-height: 1.32;
font-weight: 400;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem;
padding: 0.48rem 0;
position: relative;
color: var(--stat-bullets-fg);
}
#school-numbers .stat-card__body--ops li + li {
padding-top: 0.58rem;
margin-top: 0;
background-image: radial-gradient(circle closest-side, var(--stat-bullets-line) 0.85px, transparent 1px);
background-size: 8px 2px;
background-repeat: repeat-x;
background-position: 0 0;
}
#school-numbers .stat-card__body--ops li::before {
content: "";
flex: 0 0 18px;
width: 18px;
height: 18px;
box-sizing: border-box;
border-radius: 0;
border: 1.5px solid var(--stat-bullets-border);
background-color: var(--stat-bullets-accent);
box-shadow: none;
position: relative;
margin: 0;
align-self: center;
}
#school-numbers .stat-card__body--ops li::after {
content: "";
position: absolute;
left: 9px;
top: 50%;
width: 10px;
height: 8px;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M2 5.5L5.5 9.2L12 1.8' stroke='%23000' stroke-width='1.35' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
#school-numbers .numbers-spacer {
height: 0;
}
@media (max-width: 1280px) {
#school-numbers .numbers-container {
padding-left: clamp(32px, 4vw, 64px);
padding-right: 0;
}
}
@media (max-width: 1024px) {
#school-numbers .numbers-container {
flex-direction: column;
gap: 48px;
max-width: 1340px;
margin: 0 auto;
padding-left: 48px;
padding-right: 48px;
}
#school-numbers .numbers-left {
flex: 1;
max-width: 100%;
}
#school-numbers .numbers-title {
font-size: clamp(2rem, 5vw, 3.1rem);
}
#school-numbers .numbers-right {
width: 100%;
max-width: 100%;
margin-left: 0;
height: auto;
}
#school-numbers .stat-card {
position: relative !important;
top: auto !important;
}
#school-numbers .stat-card__heading {
font-size: 26px;
letter-spacing: 0.04em;
}
#school-numbers .stat-card:nth-child(n + 2) .stat-card__inner {
visibility: visible;
opacity: 1;
}
}
@media (max-width: 640px) {
#school-numbers .numbers-section {
padding: 32px 0;
}
#school-numbers .numbers-container {
padding: 0 16px;
}
#school-numbers .numbers-title {
font-size: clamp(1.75rem, 5.5vw, 3.1rem);
}
#school-numbers .stat-card__inner {
border-radius: 0;
padding: 20px 32px 40px;
min-height: 300px;
}
#school-numbers .stat-card__heading {
font-size: 26px;
letter-spacing: 0.04em;
margin-bottom: 16px;
max-width: calc(100% - 70px);
}
#school-numbers .stat-card__icon {
width: 44px;
height: 44px;
top: 14px;
right: 20px;
}
#school-numbers .stat-card__icon svg {
width: 20px;
height: 20px;
}
}
/* ── Mobile scroll-stacking (opt-in: JS adds .numbers-stack-mobile) ──────────
Re-creates the desktop overlap on phones so the cards can slide up and pile
on top of one another as you scroll. Scoped to the class the script only
adds while it is actually driving the animation, so the plain stacked list
remains the safe fallback (no JS / reduced-motion / not opted-in). */
@media (max-width: 1024px) {
#school-numbers.numbers-stack-mobile .numbers-right {
position: relative;
/* height is set inline by the script to match the tallest card */
}
#school-numbers.numbers-stack-mobile .stat-card {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
}
#school-numbers.numbers-stack-mobile .stat-card:nth-child(1) { z-index: 1; }
#school-numbers.numbers-stack-mobile .stat-card:nth-child(2) { z-index: 2; }
#school-numbers.numbers-stack-mobile .stat-card:nth-child(3) { z-index: 3; }
#school-numbers.numbers-stack-mobile .stat-card:nth-child(4) { z-index: 4; }
/* Hidden until the timeline reveals them — avoids a flash of all four cards
before the script initialises. */
#school-numbers.numbers-stack-mobile .stat-card:nth-child(n + 2) .stat-card__inner {
visibility: hidden;
}
}
/* ===== style/arrow2-embed.css ===== */
#school-arrow2 {
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: #1a1a1a;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-top: 0;
}
#school-arrow2,
#school-arrow2 *,
#school-arrow2 *::before,
#school-arrow2 *::after {
box-sizing: border-box;
}
#school-arrow2 .numbers-section {
position: relative;
overflow: visible;
padding: 18px 0 8px;
background: transparent;
}
#school-arrow2 .container {
max-width: 1320px;
margin: 0 auto;
width: 100%;
display: flex;
gap: 24px;
align-items: flex-start;
}
#school-arrow2 .numbers-left-cards,
#school-arrow2 .numbers-right {
flex: 1;
position: relative;
height: 426px;
}
#school-arrow2 .stat-card {
position: absolute;
left: 0;
right: 0;
}
#school-arrow2 .stat-card:nth-child(1) {
top: 0;
z-index: 1;
}
#school-arrow2 .stat-card:nth-child(2) {
top: 18px;
z-index: 2;
}
#school-arrow2 .stat-card:nth-child(3) {
top: 36px;
z-index: 3;
}
#school-arrow2 .stat-card__inner {
position: relative;
overflow: hidden;
height: 390px;
padding: 30px 48px 26px;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0;
will-change: transform;
}
#school-arrow2 .stat-card:nth-child(n + 2) .stat-card__inner {
visibility: hidden;
opacity: 1;
}
#school-arrow2 .stat-card__step {
position: absolute;
top: 16px;
right: 22px;
font-size: 122px;
font-weight: 800;
line-height: 1;
letter-spacing: -4px;
pointer-events: none;
user-select: none;
}
#school-arrow2 .stat-card--purple .stat-card__inner {
background: linear-gradient(135deg, #2e1065 0%, #6d28d9 50%, #db2777 100%);
box-shadow:
0 4px 30px rgba(109, 40, 217, 0.35),
inset 0 1px 0 rgba(219, 39, 119, 0.1);
}
#school-arrow2 .stat-card--black .stat-card__inner {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #06b6d4 100%);
box-shadow:
0 4px 30px rgba(15, 23, 42, 0.35),
inset 0 1px 0 rgba(6, 182, 212, 0.1);
}
#school-arrow2 .stat-card--teal .stat-card__inner {
background: linear-gradient(135deg, #064e3b 0%, #047857 50%, #65a30d 100%);
box-shadow:
0 4px 30px rgba(4, 120, 87, 0.35),
inset 0 1px 0 rgba(101, 163, 13, 0.1);
}
#school-arrow2 .stat-card--indigo .stat-card__inner {
background: linear-gradient(135deg, #1e1b4b 0%, #3730a3 50%, #f43f5e 100%);
box-shadow:
0 4px 30px rgba(55, 48, 163, 0.35),
inset 0 1px 0 rgba(244, 63, 94, 0.1);
}
#school-arrow2 .stat-card--navy .stat-card__inner {
background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 50%, #d97706 100%);
box-shadow:
0 4px 30px rgba(127, 29, 29, 0.35),
inset 0 1px 0 rgba(217, 119, 6, 0.1);
}
#school-arrow2 .stat-card--wine .stat-card__inner {
background: linear-gradient(135deg, #082f49 0%, #0284c7 50%, #14b8a6 100%);
box-shadow:
0 4px 30px rgba(2, 132, 199, 0.35),
inset 0 1px 0 rgba(20, 184, 166, 0.1);
}
#school-arrow2 .stat-card--purple .stat-card__step {
color: rgba(219, 39, 119, 0.2);
}
#school-arrow2 .stat-card--black .stat-card__step {
color: rgba(6, 182, 212, 0.2);
}
#school-arrow2 .stat-card--teal .stat-card__step {
color: rgba(101, 163, 13, 0.2);
}
#school-arrow2 .stat-card--indigo .stat-card__step {
color: rgba(244, 63, 94, 0.2);
}
#school-arrow2 .stat-card--navy .stat-card__step {
color: rgba(217, 119, 6, 0.2);
}
#school-arrow2 .stat-card--wine .stat-card__step {
color: rgba(20, 184, 166, 0.2);
}
#school-arrow2 .stat-card__title {
margin: 0 0 20px;
padding-bottom: 0;
font-family: 'AnekBangla', 'AnekBangla', 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 29px;
font-weight: 400;
line-height: 1.12;
letter-spacing: 0.05em;
font-synthesis: none;
}
#school-arrow2 .stat-card--purple .stat-card__title {
color: #ffffff;
}
#school-arrow2 .stat-card--black .stat-card__title {
color: #5afca6;
}
#school-arrow2 .stat-card--teal .stat-card__title {
color: #ffffff;
}
#school-arrow2 .stat-card--indigo .stat-card__title {
color: #e0d4ff;
}
#school-arrow2 .stat-card--navy .stat-card__title {
color: #ffffff;
}
#school-arrow2 .stat-card--wine .stat-card__title {
color: #ffd6d6;
}
#school-arrow2 .stat-card__slogan {
max-width: 440px;
margin-bottom: 14px !important;
font-size: 16px;
font-style: italic;
font-weight: 600;
line-height: 1.34;
}
#school-arrow2 .stat-card--purple .stat-card__slogan {
color: #fcd34d;
}
#school-arrow2 .stat-card--black .stat-card__slogan {
color: #ffa5eb;
}
#school-arrow2 .stat-card--teal .stat-card__slogan {
color: #5afca6;
}
#school-arrow2 .stat-card--indigo .stat-card__slogan {
color: #c4a7e7;
}
#school-arrow2 .stat-card--navy .stat-card__slogan {
color: #64b5f6;
}
#school-arrow2 .stat-card--wine .stat-card__slogan {
color: #ff8a80;
}
#school-arrow2 .stat-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 10px;
}
#school-arrow2 .stat-card__body > div:last-child {
margin-top: auto;
transform: translateY(-12px);
}
#school-arrow2 .stat-card__body p {
max-width: 440px;
margin-bottom: 8px !important;
font-size: 15px;
font-weight: 400;
line-height: 1.48;
}
#school-arrow2 .stat-card--purple .stat-card__body p {
color: rgba(255, 255, 255, 0.88);
}
#school-arrow2 .stat-card--black .stat-card__body p {
color: rgba(255, 255, 255, 0.82);
}
#school-arrow2 .stat-card--teal .stat-card__body p {
color: rgba(255, 255, 255, 0.85);
}
#school-arrow2 .stat-card--indigo .stat-card__body p {
color: rgba(255, 255, 255, 0.82);
}
#school-arrow2 .stat-card--navy .stat-card__body p {
color: rgba(255, 255, 255, 0.82);
}
#school-arrow2 .stat-card--wine .stat-card__body p {
color: rgba(255, 255, 255, 0.85);
}
#school-arrow2 .numbers-spacer {
height: 0;
}
#school-arrow2 .stat-card__tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: #ffffff;
}
#school-arrow2 .stat-card__tag-icon {
font-weight: 800;
}
#school-arrow2 .stat-card--purple .stat-card__tag {
background: #1e1b4b;
}
#school-arrow2 .stat-card--purple .stat-card__tag-icon {
color: #f472b6;
}
#school-arrow2 .stat-card--black .stat-card__tag {
background: #020617;
}
#school-arrow2 .stat-card--black .stat-card__tag-icon {
color: #22d3ee;
}
#school-arrow2 .stat-card--teal .stat-card__tag {
background: #022c22;
}
#school-arrow2 .stat-card--teal .stat-card__tag-icon {
color: #a3e635;
}
#school-arrow2 .stat-card--indigo .stat-card__tag {
background: #0f172a;
}
#school-arrow2 .stat-card--indigo .stat-card__tag-icon {
color: #fb7185;
}
#school-arrow2 .stat-card--navy .stat-card__tag {
background: #1a0505;
}
#school-arrow2 .stat-card--navy .stat-card__tag-icon {
color: #fbbf24;
}
#school-arrow2 .stat-card--wine .stat-card__tag {
background: #041a29;
}
#school-arrow2 .stat-card--wine .stat-card__tag-icon {
color: #2dd4bf;
}
@media (max-width: 1024px) {
#school-arrow2 .container {
flex-direction: column;
gap: 48px;
max-width: none;
}
#school-arrow2 .numbers-left-cards,
#school-arrow2 .numbers-right {
width: 100%;
height: auto;
}
#school-arrow2 .stat-card {
position: relative !important;
top: auto !important;
}
#school-arrow2 .stat-card__title {
font-size: 25px;
}
#school-arrow2 .stat-card__slogan {
font-size: 17px;
}
#school-arrow2 .stat-card:nth-child(n + 2) .stat-card__inner {
visibility: visible;
opacity: 1;
}
}
@media (max-width: 640px) {
#school-arrow2 .numbers-section {
padding: 28px 0 24px;
}
#school-arrow2 .stat-card__inner {
height: auto;
min-height: 320px;
padding: 28px 28px 36px;
border-radius: 6px;
}
#school-arrow2 .stat-card__title {
font-size: 25px;
}
#school-arrow2 .stat-card__slogan {
margin-bottom: 20px;
font-size: 15px;
}
#school-arrow2 .stat-card__body p {
font-size: 14px;
}
#school-arrow2 .stat-card__step {
top: 12px;
right: 16px;
font-size: 90px;
}
}
/* ===== style/ds5-care-grid.css ===== */
:root {
--ds5-bg: #032d4b;
--ds5-card: #17486f;
--ds5-card-soft: #66a9df;
--ds5-text: #f4f1ea;
--ds5-muted: #b0c5d5;
--ds5-accent: #5aa9ea;
--ds5-button-bg: #032b48;
--ds5-button-text: #f6fbff;
}
body.ds5-page .ds5-care-section *,
body.ds5-page .ds5-care-section *::before,
body.ds5-page .ds5-care-section *::after,
[data-ds5-section] *,
[data-ds5-section] *::before,
[data-ds5-section] *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body.ds5-page {
margin: 0;
min-height: 100vh;
font-family: 'Manrope', sans-serif;
background: var(--ds5-bg);
color: var(--ds5-text);
}
[data-ds5-section] {
font-family: 'Manrope', sans-serif;
color: var(--ds5-text);
}
.ds5-care-section {
background: var(--ds5-bg);
padding: 0;
}
.ds5-care-shell {
width: min(calc(100% - 240px), 1120px);
max-width: none;
margin: 0 auto;
padding: 130px 0 110px;
}
.ds5-care-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 280px));
grid-template-areas:
"intro intro intro personal"
"nutrition . social ."
". medical . cta";
grid-auto-rows: clamp(230px, 12vw, 250px);
align-items: stretch;
justify-content: center;
}
.ds5-intro {
grid-area: intro;
align-self: start;
padding: 0 36px 0 0;
max-width: 1200px;
}
.ds5-intro__title,
.ds5-card__title,
.ds5-cta-card__title {
margin: 0;
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
letter-spacing: -0.03em;
}
.ds5-intro__title {
font-family: 'welfare', 'Cormorant Garamond', serif;
font-size: 50px;
line-height: 1.08;
font-weight: 400;
letter-spacing: 0.04em;
}
.ds5-intro__desc {
margin: 10px 0 0;
max-width: 640px;
font-family: 'NibPro', 'Inter', system-ui, sans-serif;
font-size: clamp(0.9rem, 0.86vw, 1.08rem);
line-height: 1.4;
color: var(--ds5-muted);
}
.ds5-card,
.ds5-cta-card {
position: relative;
overflow: hidden;
min-height: 100%;
padding: 24px 28px;
display: flex;
flex-direction: column;
justify-content: flex-start;
transition: transform 0.28s ease, background-color 0.28s ease;
}
.ds5-card::before,
.ds5-cta-card::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(180deg, rgba(3, 21, 36, 0.08), rgba(3, 21, 36, 0.4)),
var(--ds5-hover-image);
background-repeat: no-repeat, no-repeat;
background-position: center, center;
background-size: 100% 100%, cover;
opacity: 0;
transform: scale(1.04);
transition: opacity 0.32s ease, transform 0.32s ease;
pointer-events: none;
}
.ds5-cta-card::before {
background-image:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(18, 51, 83, 0.08)),
var(--ds5-hover-image);
}
.ds5-card::before {
background-size: 100% 100%, 100% 100%;
}
.ds5-card__icon,
.ds5-card__content,
.ds5-cta-card__content {
position: relative;
z-index: 1;
}
.ds5-card {
background: var(--ds5-card);
color: var(--ds5-text);
}
.ds5-card--personal {
grid-area: personal;
--ds5-hover-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' fill='none'%3E%3Cpath d='M160 52l68 52v96H92v-96l68-52Z' stroke='%23dcecff' stroke-opacity='.46' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M128 200v-52h64v52' stroke='%23dcecff' stroke-opacity='.46' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M92 128l-24 32v48l44 44' stroke='%23dcecff' stroke-opacity='.4' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M228 128l24 32v48l-44 44' stroke='%23dcecff' stroke-opacity='.4' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ds5-card--nutrition {
grid-area: nutrition;
--ds5-hover-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' fill='none'%3E%3Cpath d='M76 174h168' stroke='%23dcecff' stroke-opacity='.46' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M92 174c0-52 28-90 68-102' stroke='%23dcecff' stroke-opacity='.46' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M228 174c0-52-28-90-68-102' stroke='%23dcecff' stroke-opacity='.46' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M108 174c8 42 26 76 52 100' stroke='%23dcecff' stroke-opacity='.4' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M212 174c-8 42-26 76-52 100' stroke='%23dcecff' stroke-opacity='.4' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M232 54v72' stroke='%23dcecff' stroke-opacity='.52' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M196 90h72' stroke='%23dcecff' stroke-opacity='.52' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ds5-card--social {
grid-area: social;
--ds5-hover-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' fill='none'%3E%3Ccircle cx='124' cy='76' r='24' stroke='%23dcecff' stroke-opacity='.48' stroke-width='8'/%3E%3Cpath d='M124 100v78' stroke='%23dcecff' stroke-opacity='.48' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M124 126h52' stroke='%23dcecff' stroke-opacity='.48' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M102 228h74' stroke='%23dcecff' stroke-opacity='.42' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M90 178H72c-18 0-32-14-32-32v-50' stroke='%23dcecff' stroke-opacity='.42' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M182 228h66v-72c0-42-30-74-72-74h-18' stroke='%23dcecff' stroke-opacity='.42' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ds5-card--medical {
grid-area: medical;
--ds5-hover-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' fill='none'%3E%3Cpath d='M92 70h86v70H92z' stroke='%23dcecff' stroke-opacity='.46' stroke-width='8' stroke-linejoin='round'/%3E%3Cpath d='M120 40h30' stroke='%23dcecff' stroke-opacity='.46' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M135 140v40' stroke='%23dcecff' stroke-opacity='.46' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M114 160h42' stroke='%23dcecff' stroke-opacity='.46' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M198 176l44 44' stroke='%23dcecff' stroke-opacity='.4' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M244 220c10 10 10 26 0 36l-8 8c-10 10-26 10-36 0l-44-44 44-44 44 44Z' stroke='%23dcecff' stroke-opacity='.4' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ds5-card--personal { --ds5-hover-image: url("../assets/4bg/cardEverything.png"); }
.ds5-card--nutrition { --ds5-hover-image: url("../assets/4bg/cardLess.png"); }
.ds5-card--social { --ds5-hover-image: url("../assets/4bg/cardPrice.png"); }
.ds5-card--medical { --ds5-hover-image: url("../assets/4bg/cardSupport.png"); }
.ds5-cta-card {
grid-area: cta;
background: var(--ds5-card-soft);
color: #123353;
--ds5-hover-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' fill='none'%3E%3Cpath d='M70 160h180' stroke='%23123353' stroke-opacity='.18' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M160 70v180' stroke='%23123353' stroke-opacity='.18' stroke-width='12' stroke-linecap='round'/%3E%3Ccircle cx='160' cy='160' r='94' stroke='%23123353' stroke-opacity='.12' stroke-width='10'/%3E%3C/svg%3E");
}
.ds5-card__icon {
position: absolute;
top: 22px;
right: 24px;
width: 38px;
height: 38px;
color: var(--ds5-accent);
}
.ds5-card__icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ds5-card__content,
.ds5-cta-card__content {
margin-top: 0;
width: 100%;
}
.ds5-cta-card__content {
display: flex;
flex-direction: column;
min-height: 100%;
}
.ds5-card__content {
padding-right: 0;
}
.ds5-card__title {
font-family: 'NibPro', 'Inter', system-ui, sans-serif;
font-size: 24px;
line-height: 1.08;
font-weight: 700;
letter-spacing: -0.02em;
max-width: 12ch;
padding-right: 58px;
}
.ds5-card--medical .ds5-card__title {
max-width: 18ch;
}
.ds5-card__desc {
margin: 26px 0 0;
max-width: none;
font-family: 'NibPro', 'Inter', system-ui, sans-serif;
font-size: 15.5px;
line-height: 1.32;
font-weight: 400;
letter-spacing: -0.01em;
overflow-wrap: normal;
word-break: normal;
text-wrap: pretty;
color: var(--ds5-muted);
}
.ds5-cta-card__title {
font-family: 'NibPro', 'Inter', system-ui, sans-serif;
font-size: 26px;
line-height: 1.02;
font-weight: 700;
letter-spacing: -0.02em;
color: #123353;
}
.ds5-cta-card__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 188px;
min-height: 56px;
margin-top: auto;
padding: 0 22px;
border-radius: 999px;
background: var(--ds5-button-bg);
color: var(--ds5-button-text);
font-size: 0.96rem;
font-weight: 700;
text-decoration: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}
.ds5-card:hover,
.ds5-card:focus-visible,
.ds5-card.is-hovered,
.ds5-cta-card:hover,
.ds5-cta-card.is-hovered {
transform: translateY(-6px);
}
.ds5-card:hover::before,
.ds5-card.is-hovered::before,
.ds5-card:focus-visible::before,
.ds5-cta-card:hover::before,
.ds5-cta-card.is-hovered::before {
opacity: 1;
transform: scale(1);
}
.ds5-card:hover,
.ds5-card.is-hovered {
background: #1b537f;
}
.ds5-card:focus-visible {
outline: 2px solid rgba(144, 203, 255, 0.8);
outline-offset: -2px;
}
.ds5-cta-card__button:hover,
.ds5-cta-card__button:focus-visible {
transform: translateY(-3px);
background: #04233c;
box-shadow: 0 20px 36px rgba(3, 24, 41, 0.22);
outline: none;
}
@media (max-width: 1200px) {
.ds5-care-shell {
width: calc(100% - 80px);
padding: 28px 40px 36px;
}
.ds5-care-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: clamp(220px, 22vw, 245px);
}
.ds5-card,
.ds5-cta-card {
padding: 22px 26px 24px;
}
}
@media (max-width: 960px) {
.ds5-care-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"intro intro"
"personal social"
"nutrition medical"
"cta cta";
gap: 18px;
grid-auto-rows: auto;
}
.ds5-intro {
padding: 0 0 8px;
max-width: none;
}
.ds5-card,
.ds5-cta-card {
min-height: 250px;
}
}
@media (max-width: 640px) {
.ds5-care-shell {
width: 100%;
padding: 54px 16px 64px;
}
.ds5-care-grid {
grid-template-columns: 1fr;
grid-template-areas:
"intro"
"personal"
"nutrition"
"social"
"medical"
"cta";
}
.ds5-intro__title {
font-size: clamp(3rem, 12vw, 4.2rem);
}
.ds5-card,
.ds5-cta-card {
min-height: 230px;
padding: 26px 24px 28px;
}
.ds5-cta-card__button {
width: 100%;
min-width: 0;
}
}
@media (max-width: 900px) {
.ds5-care-shell {
width: min(calc(100% - 36px), 680px);
padding: 72px 0 78px;
}
.ds5-care-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"intro intro"
"personal nutrition"
"social medical"
"cta cta";
grid-auto-rows: auto;
gap: 16px;
justify-content: center;
}
.ds5-intro {
grid-area: intro;
max-width: 100%;
padding: 0 0 10px;
}
.ds5-card,
.ds5-cta-card {
min-height: 236px;
padding: 24px;
}
.ds5-card__icon {
top: 20px;
right: 20px;
width: 32px;
height: 32px;
}
.ds5-intro__title {
font-size: 42px;
line-height: 1.07;
letter-spacing: 0.035em;
}
.ds5-intro__desc {
max-width: 560px;
font-size: 15.5px;
line-height: 1.42;
}
.ds5-card__title {
max-width: 14ch;
padding-right: 44px;
font-size: 22px;
line-height: 1.08;
}
.ds5-card--medical .ds5-card__title {
max-width: 18ch;
}
.ds5-card__desc {
margin-top: 24px;
font-size: 15.5px;
line-height: 1.36;
}
.ds5-cta-card__content {
min-height: 188px;
}
.ds5-cta-card__title {
font-size: 24px;
line-height: 1.04;
}
.ds5-cta-card__button {
width: 100%;
min-width: 0;
min-height: 52px;
padding: 0 18px;
font-size: 14.5px;
}
}
@media (max-width: 640px) {
.ds5-care-shell {
width: min(calc(100% - 28px), 420px);
padding: 56px 0 64px;
}
.ds5-care-grid {
grid-template-columns: 1fr;
grid-template-areas:
"intro"
"personal"
"nutrition"
"social"
"medical"
"cta";
gap: 14px;
}
.ds5-intro__title {
font-size: 36px;
line-height: 1.06;
}
.ds5-card,
.ds5-cta-card {
min-height: 220px;
padding: 24px 24px 26px;
}
.ds5-card__title {
max-width: 15ch;
padding-right: 44px;
font-size: 23px;
}
.ds5-card--medical .ds5-card__title {
max-width: 18ch;
}
.ds5-card__desc {
margin-top: 24px;
font-size: 15.5px;
line-height: 1.38;
}
.ds5-cta-card__content {
min-height: 180px;
}
}
@media (max-width: 380px) {
.ds5-care-shell {
width: calc(100% - 20px);
}
.ds5-intro__title {
font-size: 32px;
}
.ds5-card,
.ds5-cta-card {
padding: 22px 20px 24px;
}
.ds5-card__icon {
top: 18px;
right: 18px;
width: 30px;
height: 30px;
}
.ds5-card__title {
padding-right: 40px;
font-size: 22px;
}
}
/* ===== style/school-stats-scroll.css ===== */
/* ===== SCHOOL STATS SCROLL SECTION ===== */
/* Scoped entirely to [data-stats-scroll] — zero bleed to other sections */
[data-stats-scroll] {
position: relative;
width: 100%;
/* height is set by JS to create the scroll "runway" */
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
[data-stats-scroll-sticky] {
position: sticky;
top: 60px;
width: 100%;
height: 85vh;
overflow: hidden;
display: flex;
align-items: flex-start;
}
[data-stats-scroll-track] {
display: flex;
align-items: stretch;
gap: 20px;
padding: 0 60px 40px;
will-change: transform;
/* width is set by JS */
}
/* ---- Individual Cards ---- */
[data-stats-card] {
flex: 0 0 360px;
border-radius: 8px;
overflow: hidden;
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 580px;
padding: 30px 26px 56px;
box-sizing: border-box;
transition: box-shadow 0.3s ease;
}
[data-stats-card]:hover {
box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
/* Light plain card */
[data-stats-card="light"] {
background:
radial-gradient(circle at 84% 14%, rgba(255,255,255,0.9) 0 10%, rgba(255,255,255,0) 28%),
linear-gradient(140deg, #dce9f5 0%, #e8d8f0 100%);
}
[data-stats-card="light"]::before {
content: '';
position: absolute;
top: 28px;
right: 24px;
width: 108px;
height: 132px;
border-radius: 26px 26px 14px 14px;
background:
linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.26)),
repeating-linear-gradient(90deg, rgba(26,35,64,0.12) 0 7px, transparent 7px 15px);
box-shadow: -18px 16px 0 rgba(255,255,255,0.22);
opacity: 0.72;
transform: rotate(6deg);
pointer-events: none;
z-index: 0;
}
[data-stats-card="light"]::after {
content: '';
position: absolute;
left: -24px;
bottom: -18px;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(149,5,157,0.16) 0, rgba(149,5,157,0) 68%);
pointer-events: none;
z-index: 0;
}
.ssc-card--library-photo {
background: url('../assets/images/library.png') center/cover no-repeat !important;
}
.ssc-card--library-photo::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(180deg, rgba(7,10,18,0.10) 0%, rgba(7,10,18,0.16) 38%, rgba(7,10,18,0.28) 100%),
radial-gradient(circle at 20% 18%, rgba(8,12,24,0.10) 0%, rgba(8,12,24,0) 42%);
backdrop-filter: blur(7px) brightness(0.86) saturate(0.96);
-webkit-backdrop-filter: blur(7px) brightness(0.86) saturate(0.96);
pointer-events: none;
z-index: 0;
}
.ssc-card--library-photo::after {
display: none;
}
.ssc-card--library-photo .ssc-stat-label {
font-weight: 600;
}
.ssc-card--library-photo .ssc-stat-number {
color: #ffffff !important;
}
.ssc-card--library-photo .ssc-stat {
margin-top: auto;
padding: 0;
border-radius: 0;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
.ssc-card--library-photo .ssc-stat-number,
.ssc-card--library-photo .ssc-stat-desc {
text-shadow: 0 4px 18px rgba(4,8,16,0.72);
}
.ssc-card--library-photo .ssc-stat-label {
text-shadow:
0 2px 10px rgba(4,8,16,0.88),
0 0 14px rgba(255,255,255,0.08);
}
.ssc-card--library-photo .ssc-stat-divider {
background: rgba(255,255,255,0.22) !important;
}
.ssc-card--library-photo .ssc-stat-desc {
color: rgba(255,255,255,0.94) !important;
}
/* Dark photo card — has a background image set inline */
[data-stats-card="photo"] {
color: #fff;
}
[data-stats-card="photo"]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.72) 45%, rgba(0,0,0,0.18) 100%);
z-index: 1;
}
[data-stats-card="photo"] > * {
position: relative;
z-index: 2;
}
.ssc-card--bulk-green {
background:
radial-gradient(circle at 22% 18%, rgba(110, 231, 183, 0.18) 0%, rgba(110, 231, 183, 0) 32%),
radial-gradient(circle at 78% 78%, rgba(22, 163, 74, 0.24) 0%, rgba(22, 163, 74, 0) 34%),
linear-gradient(145deg, #07150d 0%, #0b2a18 26%, #14532d 52%, #1f7a43 76%, #0b2415 100%) !important;
}
.ssc-card--bulk-green .ssc-bulk-gif {
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
width: clamp(126px, 40%, 176px);
height: auto;
display: block;
object-fit: contain;
pointer-events: none;
z-index: 1;
filter: drop-shadow(0 12px 24px rgba(3, 12, 7, 0.28));
}
.ssc-card--bulk-green::before {
background: linear-gradient(180deg, rgba(3, 14, 8, 0.34) 0%, rgba(7, 31, 16, 0.18) 28%, rgba(7, 31, 16, 0.08) 48%, rgba(3, 12, 7, 0.24) 100%) !important;
}
[data-stats-card="neon"] {
background: linear-gradient(180deg, #fafafa 0%, #f5f7ff 100%) !important;
}
[data-stats-card="neon"]::before {
content: '';
position: absolute;
right: 20px;
bottom: 24px;
width: 156px;
height: 156px;
border-radius: 30px;
background:
linear-gradient(135deg, rgba(245,158,11,0.12), rgba(139,92,246,0.12)),
linear-gradient(90deg, rgba(30,41,59,0.06) 1px, transparent 1px),
linear-gradient(rgba(30,41,59,0.06) 1px, transparent 1px);
background-size: auto, 18px 18px, 18px 18px;
box-shadow: inset 0 0 0 1px rgba(30,41,59,0.08);
opacity: 0.8;
transform: rotate(8deg);
pointer-events: none;
z-index: 0;
}
[data-stats-card="neon"]::after {
content: '';
position: absolute;
right: 36px;
bottom: 42px;
width: 120px;
height: 86px;
background:
radial-gradient(circle at 10px 10px, rgba(245,158,11,0.55) 0 4px, transparent 5px),
radial-gradient(circle at 82px 10px, rgba(239,68,68,0.45) 0 4px, transparent 5px),
radial-gradient(circle at 82px 62px, rgba(139,92,246,0.45) 0 4px, transparent 5px),
linear-gradient(rgba(30,41,59,0.15), rgba(30,41,59,0.15)) 10px 9px / 72px 2px no-repeat,
linear-gradient(rgba(30,41,59,0.15), rgba(30,41,59,0.15)) 81px 10px / 2px 52px no-repeat,
linear-gradient(rgba(30,41,59,0.15), rgba(30,41,59,0.15)) 10px 61px / 72px 2px no-repeat;
opacity: 0.92;
pointer-events: none;
z-index: 0;
}
/* Grey plain card */
[data-stats-card="grey"] {
background:
linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0)) top/100% 46% no-repeat,
linear-gradient(180deg, #f2f4f8 0%, #ebeff4 100%);
}
[data-stats-card="grey"]::before {
content: '';
position: absolute;
top: 34px;
right: 34px;
width: 24px;
height: 24px;
border: 6px solid rgba(26,35,64,0.18);
border-radius: 4px;
box-shadow:
-44px 0 0 -6px rgba(26,35,64,0.16),
0 44px 0 -6px rgba(26,35,64,0.14),
-16px 16px 0 -10px rgba(26,35,64,0.18),
-28px 60px 0 -10px rgba(26,35,64,0.16),
-60px 28px 0 -10px rgba(26,35,64,0.16);
opacity: 0.8;
pointer-events: none;
z-index: 0;
}
[data-stats-card="grey"]::after {
content: '';
position: absolute;
right: 18px;
bottom: 18px;
width: 126px;
height: 126px;
border-radius: 26px;
background:
linear-gradient(90deg, rgba(26,35,64,0.05) 1px, transparent 1px),
linear-gradient(rgba(26,35,64,0.05) 1px, transparent 1px);
background-size: 18px 18px;
-webkit-mask-image: radial-gradient(circle at center, #000 55%, transparent 82%);
mask-image: radial-gradient(circle at center, #000 55%, transparent 82%);
opacity: 0.75;
pointer-events: none;
z-index: 0;
}
.ssc-card--qr-split {
background: linear-gradient(135deg, #131a38 0%, #31215f 50%, #0f5c78 100%) !important;
}
.ssc-card--qr-split .ssc-qr-gif {
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
width: clamp(120px, 38%, 168px);
height: auto;
display: block;
object-fit: contain;
pointer-events: none;
z-index: 1;
filter: drop-shadow(0 12px 24px rgba(7, 13, 28, 0.28));
}
.ssc-card--qr-split::before {
content: '';
position: absolute;
right: -42px;
top: -42px;
width: 204px;
height: 204px;
border-radius: 50%;
border: 1px solid rgba(132, 173, 255, 0.18);
background: none;
box-shadow: none;
opacity: 1;
pointer-events: none;
z-index: 0;
}
.ssc-card--qr-split::after {
content: '';
position: absolute;
right: -14px;
top: -14px;
width: 132px;
height: 132px;
border-radius: 50%;
border: 1px solid rgba(122, 212, 255, 0.28);
background: none;
pointer-events: none;
z-index: 0;
}
/* CTA card */
[data-stats-card="cta"] {
background: #000 !important;
}
[data-stats-card="cta"]::before {
display: none;
}
[data-stats-card="cta"]::after {
display: none;
}
[data-stats-card="cta"] .ssc-noti-gif {
order: 2;
width: min(100%, 240px);
max-width: 240px;
height: auto;
display: block;
object-fit: contain;
margin: 42px auto 18px;
pointer-events: none;
z-index: 2;
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.24));
}
[data-stats-card="utility"] {
background: linear-gradient(145deg, #eef4ff 0%, #dfe9ff 52%, #f4f8ff 100%);
}
[data-stats-card="utility"]::before {
content: '';
position: absolute;
top: 26px;
right: 24px;
width: 140px;
height: 92px;
border-radius: 24px;
background:
linear-gradient(rgba(37,99,235,0.14), rgba(37,99,235,0.14)) 22px 24px / 40px 6px no-repeat,
linear-gradient(rgba(14,165,233,0.14), rgba(14,165,233,0.14)) 78px 24px / 40px 6px no-repeat,
linear-gradient(rgba(26,35,64,0.12), rgba(26,35,64,0.12)) 54px 44px / 30px 2px no-repeat,
linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.36));
border: 1px solid rgba(37,99,235,0.12);
box-shadow: -18px 18px 0 rgba(255,255,255,0.28);
pointer-events: none;
z-index: 0;
}
[data-stats-card="utility"]::after {
content: '';
position: absolute;
left: 24px;
bottom: 24px;
width: 146px;
height: 92px;
background:
radial-gradient(circle at 16px 26px, rgba(37,99,235,0.22) 0 6px, transparent 7px),
radial-gradient(circle at 130px 66px, rgba(14,165,233,0.22) 0 6px, transparent 7px),
linear-gradient(135deg, transparent 45%, rgba(26,35,64,0.12) 45% 55%, transparent 55%) 26px 32px / 76px 24px no-repeat,
linear-gradient(315deg, transparent 45%, rgba(26,35,64,0.12) 45% 55%, transparent 55%) 52px 48px / 76px 24px no-repeat;
opacity: 0.9;
pointer-events: none;
z-index: 0;
}
/* ---- Logo area (top of card) ---- */
.ssc-logo {
display: none;
align-items: center;
gap: 8px;
margin-bottom: 0;
}
.ssc-logo-icon {
width: 26px;
height: 26px;
flex-shrink: 0;
}
.ssc-logo-text {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #1a2340;
}
[data-stats-card="photo"] .ssc-logo-text {
color: #fff;
}
[data-stats-card="photo"] .ssc-logo-icon path,
[data-stats-card="photo"] .ssc-logo-icon circle,
[data-stats-card="photo"] .ssc-logo-icon rect {
fill: #fff;
stroke: none;
}
/* ---- Decorative watermark ---- */
.ssc-watermark {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 0;
opacity: 0.08;
}
.ssc-watermark svg {
width: 55%;
height: auto;
}
[data-stats-card] .ssc-watermark + * {
position: relative;
z-index: 1;
}
/* ---- Bottom stat area ---- */
.ssc-stat {
display: flex;
flex-direction: column;
gap: 7px;
position: relative;
z-index: 1;
flex: 1 1 auto;
min-height: 100%;
min-width: 0;
align-items: stretch;
}
.ssc-stat-label {
font-size: 13px;
font-weight: 500;
color: #7a8594;
letter-spacing: 0.02em;
}
[data-stats-card="grey"] .ssc-stat-label,
[data-stats-card="cta"] .ssc-stat-label,
[data-stats-card="utility"] .ssc-stat-label {
display: inline-flex;
align-self: flex-start;
padding: 4px 10px;
border-radius: 999px;
}
[data-stats-card="grey"] .ssc-stat-label {
background: rgba(26,35,64,0.06);
color: #52607a;
}
[data-stats-card="cta"] .ssc-stat-label {
background: rgba(99,102,241,0.12);
color: #4f46e5;
}
[data-stats-card="utility"] .ssc-stat-label {
background: rgba(14,165,233,0.12);
color: #0369a1;
}
[data-stats-card="photo"] .ssc-stat-label {
color: rgba(255,255,255,0.75);
}
.ssc-stat-number {
font-family: 'AnekBangla', 'AnekBangla', 'Inter', system-ui, sans-serif;
font-size: 30px;
font-weight: 400;
line-height: 1.08;
color: #1a2340;
letter-spacing: 0;
text-wrap: balance;
}
.ssc-stat-number,
.ssc-cta-title {
order: 1;
}
.ssc-stat-label {
order: 2;
display: block !important;
align-self: auto !important;
padding: 0 !important;
border-radius: 0 !important;
background: none !important;
font-family: 'Agency', 'Inter', system-ui, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.12;
letter-spacing: 0.03em;
text-transform: none;
color: #5f6b82;
margin-top: 12px;
}
[data-stats-card="light"] .ssc-stat-label {
color: #5d6783;
}
.ssc-card--qr-split .ssc-stat-label {
color: #8fcfff !important;
}
[data-stats-card="photo"] .ssc-stat-label {
color: rgba(255,255,255,0.82) !important;
}
[data-stats-card="cta"] .ssc-stat-label {
color: #5d63ea !important;
}
[data-stats-card="cta"] .ssc-cta-title {
color: #fff;
}
[data-stats-card="cta"] .ssc-cta-sub {
color: rgba(255,255,255,0.92);
}
[data-stats-card="cta"] .ssc-stat-divider {
background: rgba(255,255,255,0.2);
}
[data-stats-card="split"] .ssc-stat-label {
color: #7edfff !important;
}
[data-stats-card="neon"] .ssc-stat-label {
color: #69748a !important;
}
[data-stats-card="utility"] .ssc-stat-label {
color: #0d6f98 !important;
}
[data-stats-card="light"] .ssc-stat-number,
[data-stats-card="grey"] .ssc-stat-number,
[data-stats-card="neon"] .ssc-stat-number,
[data-stats-card="utility"] .ssc-stat-number,
[data-stats-card="cta"] .ssc-cta-title {
max-width: 232px;
}
[data-stats-card="photo"] .ssc-stat-number {
color: #fff;
}
.ssc-stat-divider {
order: 3;
width: 100%;
height: 1px;
background: rgba(26,35,64,0.15);
margin: auto 0 10px;
}
[data-stats-card="photo"] .ssc-stat-divider {
background: rgba(255,255,255,0.25);
}
.ssc-stat-desc {
order: 4;
display: block;
margin: 0;
box-sizing: border-box;
min-width: 0;
font-size: 16px;
line-height: 1.28;
color: #4a5568;
max-width: 100%;
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
letter-spacing: 0;
width: 100%;
text-wrap: wrap;
overflow-wrap: break-word;
}
.ssc-stat-desc-line {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
[data-stats-card="photo"] .ssc-stat-desc {
color: rgba(255,255,255,0.9);
}
.ssc-stat-desc--replacement {
max-width: 100%;
}
[data-stats-card="split"] .ssc-logo-text {
color: #94a3b8 !important;
}
[data-stats-card="split"] .ssc-stat-label {
color: #38bdf8 !important;
}
[data-stats-card="split"] .ssc-stat-number {
color: #fff !important;
}
[data-stats-card="split"] .ssc-stat-divider {
background: rgba(56,189,248,0.3) !important;
}
[data-stats-card="split"] .ssc-stat-desc {
color: #94a3b8 !important;
}
.ssc-card--qr-split .ssc-stat-number {
color: #f8fbff !important;
}
.ssc-card--qr-split .ssc-stat-divider {
background: rgba(146, 198, 255, 0.34) !important;
}
.ssc-card--qr-split .ssc-stat-desc {
color: #d9e7fb !important;
}
[data-stats-card="split"] .ssc-stat > .ssc-stat-desc:last-child,
[data-stats-card="neon"] .ssc-stat > .ssc-stat-desc:last-child {
display: none;
}
[data-stats-card="neon"] > div[style*="display:flex"][style*="flex-wrap:wrap"] {
display: none !important;
}
[data-stats-card="neon"] > div[aria-hidden="true"],
.ssc-cta-icon {
display: none !important;
}
[data-stats-card="split"] > div[aria-hidden="true"] {
display: block !important;
}
[data-stats-card="neon"] > div[aria-hidden="true"] {
display: block !important;
}
[data-stats-card="neon"] > div[style*="display:flex"][style*="flex-wrap:wrap"] {
display: flex !important;
}
[data-stats-card="neon"] .ssc-logo,
[data-stats-card="utility"] .ssc-logo {
display: flex !important;
}
[data-stats-scroll] .ssc-logo,
[data-stats-scroll] .ssc-cta-icon,
[data-stats-scroll] [data-stats-card="neon"] > div[style*="display:flex"][style*="flex-wrap:wrap"] {
display: none !important;
}
/* ---- CTA card specifics ---- */
.ssc-cta-icon {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: auto;
}
.ssc-cta-icon svg {
width: 52px;
height: 52px;
stroke: #1a2340;
stroke-width: 1.5;
fill: none;
}
.ssc-cta-body {
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
z-index: 1;
}
.ssc-cta-title {
font-family: 'Boldonse', 'AnekBangla', 'Inter', system-ui, sans-serif;
font-size: 23.5px;
font-weight: 400;
color: #1a2340;
line-height: 1.38;
letter-spacing: 0.04em;
text-wrap: balance;
}
.ssc-cta-sub {
order: 4;
display: block;
margin: 0;
box-sizing: border-box;
min-width: 0;
font-size: 16px;
color: #4a5568;
line-height: 1.28;
max-width: 100%;
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
letter-spacing: 0;
width: 100%;
text-wrap: wrap;
overflow-wrap: break-word;
}
.ssc-cta-sub-line {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.ssc-cta-sub a {
color: #2563eb;
text-decoration: underline;
text-underline-offset: 2px;
}
.ssc-cta-email {
display: block;
width: 100%;
padding: 14px 20px;
border: 1.5px solid #c8d0e0;
border-radius: 10px;
background: #fff;
font-size: 14px;
color: #4a5568;
text-align: center;
box-sizing: border-box;
font-family: inherit;
cursor: default;
}
.ssc-cta-button {
display: block;
width: 100%;
padding: 14px 20px;
border-radius: 10px;
background: #1a2340;
color: #fff;
font-size: 15px;
font-weight: 600;
font-family: 'AnekBangla', 'Inter', system-ui, sans-serif;
text-align: center;
text-decoration: none;
box-sizing: border-box;
transition: background 0.2s ease;
}
.ssc-cta-button:hover {
background: #2a3560;
}
/* Normalize bottom-copy optics across all eight cards */
[data-stats-scroll] [data-stats-card] {
--ssc-copy-color: rgba(17, 24, 39, 0.9);
--ssc-copy-shadow: none;
}
[data-stats-scroll] .ssc-card--library-photo,
[data-stats-scroll] .ssc-card--qr-split,
[data-stats-scroll] [data-stats-card="photo"],
[data-stats-scroll] [data-stats-card="cta"],
[data-stats-scroll] [data-stats-card="split"] {
--ssc-copy-color: rgba(255, 255, 255, 0.92);
--ssc-copy-shadow: 0 2px 10px rgba(5, 8, 18, 0.34);
}
[data-stats-scroll] .ssc-stat-desc,
[data-stats-scroll] .ssc-cta-sub {
color: var(--ssc-copy-color) !important;
text-shadow: var(--ssc-copy-shadow) !important;
font-weight: 400 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ===== RESPONSIVE ===== */
/* Tablet (≤1024px): narrower cards, tighter padding */
@media (max-width: 1024px) {
[data-stats-card] {
flex: 0 0 300px;
min-height: 460px;
padding: 24px;
}
[data-stats-scroll-track] {
padding: 32px 40px;
gap: 16px;
}
.ssc-stat-number {
font-size: 23.5px;
}
.ssc-cta-title {
font-size: 23.5px;
}
}
/* Mobile (≤767px): keep the same scroll-driven horizontal card strip */
@media (max-width: 767px) {
[data-stats-scroll] {
height: auto;
}
[data-stats-scroll-sticky] {
position: sticky;
top: 72px;
height: calc(100svh - 88px);
min-height: 520px;
max-height: 720px;
overflow: hidden;
align-items: flex-start;
}
[data-stats-scroll-track] {
flex-direction: row;
transform: none;
padding: 0 16px 32px;
gap: 14px;
width: max-content;
}
[data-stats-card] {
flex: 0 0 min(82vw, 320px);
width: min(82vw, 320px);
min-height: min(680px, calc(100svh - 116px));
border-radius: 8px;
}
.ssc-stat-number {
font-size: 23.5px;
}
.ssc-cta-title {
font-size: 23.5px;
}
.ssc-cta-icon {
margin-bottom: 12px;
}
.ssc-stat-desc {
max-width: 100%;
}
}
/* Intro title above stats scroll — Welfare; matches fg-section-header casing; .grad-text uses global.css (data-text must match span text) */
.school-stats-section-intro {
text-align: center;
}
.school-stats-section-intro .ds1-section-title {
font-family: 'welfare', 'Inter', system-ui, sans-serif;
font-size: clamp(2rem, 5vw, 3.1rem);
font-weight: 400;
font-synthesis: none;
text-transform: none;
letter-spacing: 0.04em;
line-height: 1.04;
color: #1a1a1a;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-wrap: balance;
}
.school-stats-section-intro .ds1-section-title .grad-text {
font-family: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: none;
}
.school-stats-section-intro__subtitle--legacy {
display: none;
}
.school-stats-section-intro .school-stats-section-intro__subtitle {
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-weight: 700;
font-synthesis: none;
/* Darker than .school-stats-section-intro .ds1-badge fill (#f997ff) */
color: #4a1452 !important;
color: color-mix(in srgb, #f997ff 22%, #1a1a1a 78%) !important;
}
.school-stats-section-intro .ds1-badge {
display: inline-block;
font-family: 'Agency', 'Inter', system-ui, sans-serif;
background: #f997ff;
color: #1a1a1a;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 18px;
border-radius: 6px;
border: 2px solid #1a1a1a;
margin-bottom: 10px;
}
[data-stats-scroll] .ssc-stat-label {
color: #95059d !important;
}
@media (min-width: 1100px) {
.school-stats-section-intro .ds1-section-title {
white-space: nowrap;
text-wrap: nowrap;
}
}
/* ===== END SCHOOL STATS SCROLL SECTION ===== */
/* ===== style/school-faqs.css ===== */
/**
* FAQ embed — scoped to #school-faq-section.
* Background matches Schools page sections: dot grid on #f4f4f4.
* Boldonse: section title. Salmond: questions, answers, numbers.
* Hover effect ported from faqs.html — white gradient lift, no yellow.
*/
#school-faq-section {
--line: rgba(0, 0, 0, 0.48);
--text: #111111;
--muted: rgba(0, 0, 0, 0.6);
--open: #219653;
--close: #d64545;
margin: 55px 0;
color: var(--text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background-color: var(--ds4-bg, #f4f4f4);
background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
background-size: 18px 18px;
}
#school-faq-section .school-faq-section__title {
font-family: "Welfare", "Inter", system-ui, -apple-system, sans-serif;
font-size: 3.9rem;
font-weight: 400;
line-height: 1.08;
letter-spacing: 0.02em;
color: #c02300;
margin: 0 0 10px 0;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
}
#school-faq-section,
#school-faq-section * {
box-sizing: border-box;
}
#school-faq-section .faq-wrap {
width: 100%;
perspective: 1600px;
}
#school-faq-section .faq-item {
position: relative;
transform-origin: center;
transform-style: preserve-3d;
transition: background-color 280ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease;
will-change: transform;
}
#school-faq-section .faq-item::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0));
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
z-index: 0;
}
#school-faq-section .faq-item:hover {
transform: translateZ(10px) rotateX(2deg) rotateY(-1.1deg);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 18px 30px rgba(0, 0, 0, 0.06);
z-index: 1;
}
#school-faq-section .faq-item:hover::before,
#school-faq-section .faq-item.is-open::before {
opacity: 1;
}
#school-faq-section .faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 680ms cubic-bezier(0.22, 1, 0.36, 1);
perspective: 1200px;
position: relative;
z-index: 1;
}
#school-faq-section .faq-answer > div {
overflow: hidden;
}
#school-faq-section .faq-item.is-open .faq-answer {
grid-template-rows: 1fr;
}
#school-faq-section .faq-row {
display: grid;
grid-template-columns: 80px minmax(0, 1fr) auto 36px;
align-items: center;
column-gap: 14px;
padding: 10px 64px 10px clamp(300px, 40vw, 620px);
background: transparent;
border: 0;
cursor: pointer;
width: 100%;
position: relative;
z-index: 1;
}
#school-faq-section .faq-number {
font-family: "Salmond", "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 30px;
line-height: 0.82;
font-weight: 800;
letter-spacing: -0.08em;
color: var(--text);
text-align: center;
font-synthesis: none;
transform: translateX(-420px);
pointer-events: none;
transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease;
opacity: 0.92;
}
#school-faq-section .faq-item:hover .faq-number {
transform: translateX(-420px) translateZ(18px) rotateY(8deg);
opacity: 1;
}
#school-faq-section .faq-item.is-open .faq-number {
transform: translateX(-420px) translateZ(26px) rotateY(12deg) scale(1.04);
opacity: 1;
}
#school-faq-section .faq-question {
min-width: 0;
font-size: 17px;
line-height: 1.05;
letter-spacing: 0.02em;
color: var(--text);
text-align: left;
font-family: "Salmond", "Inter", ui-sans-serif, system-ui, sans-serif;
font-synthesis: none;
transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), text-shadow 220ms ease;
transform-origin: left center;
}
#school-faq-section .faq-item:hover .faq-question {
transform: translateZ(12px) translateX(2px);
text-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}
#school-faq-section .faq-item.is-open .faq-question {
transform: translateZ(18px) translateX(6px);
text-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
}
#school-faq-section .faq-item.is-open:hover .faq-question {
text-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}
#school-faq-section .open-close-label {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 60px;
height: 24px;
padding: 0 11px;
border-radius: 0;
border: 1px solid rgba(0, 0, 0, 0.08);
font-size: 11px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
justify-self: end;
opacity: 0;
transform: translateZ(0) rotateX(-14deg) translateY(4px);
filter: blur(1px);
transition: background-color 220ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, filter 220ms ease;
}
#school-faq-section .faq-item:not(.is-open) .open-close-label {
background: var(--open);
}
#school-faq-section .faq-item.is-open .open-close-label {
background: var(--close);
}
#school-faq-section .faq-item:hover .open-close-label,
#school-faq-section .faq-item.is-open .open-close-label {
opacity: 1;
transform: translateZ(14px) rotateX(0deg) translateY(0);
filter: blur(0);
}
#school-faq-section .faq-plus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
font-size: 26px;
line-height: 1;
font-weight: 400;
color: #0a9820;
text-align: center;
justify-self: end;
transform: translateX(22px) translateZ(0) rotate(0deg);
transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), text-shadow 220ms ease;
transform-origin: center;
}
#school-faq-section .faq-item.is-open .faq-plus {
color: #c02300;
transform: translateX(22px) translateZ(24px) rotate(135deg) scale(1.08);
text-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}
#school-faq-section .faq-answer-inner {
padding: 0 140px 8px clamp(300px, 40vw, 620px);
max-width: min(100%, 1240px);
font-family: "NibPro", "Salmond", "Inter", ui-sans-serif, system-ui, sans-serif !important;
font-size: 17px;
font-weight: 400;
font-style: normal;
line-height: 1.6;
letter-spacing: 0.05em;
color: var(--muted);
font-synthesis: none;
opacity: 0;
transform: translateY(-18px) rotateX(-10deg) scale(0.98);
transform-origin: top center;
transition: opacity 420ms ease, transform 680ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease;
}
#school-faq-section .faq-answer-inner p {
font-family: "NibPro", "Salmond", "Inter", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 400 !important;
margin: 0 0 0.9em 0;
}
#school-faq-section .faq-answer-inner p:last-child {
margin-bottom: 0;
}
#school-faq-section .faq-item.is-open .faq-answer-inner {
opacity: 1;
transform: translateY(0) rotateX(0deg) scale(1);
}
#school-faq-section .faq-item.is-open:hover .faq-answer-inner {
color: var(--muted);
}
#school-faq-section .faq-more-row {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at right top, rgba(111, 231, 216, 0.16), transparent 28%),
linear-gradient(135deg, #18213d 0%, #11182d 58%, #0b1020 100%);
box-shadow: 0 22px 44px rgba(7, 11, 24, 0.18);
}
#school-faq-section .faq-more-row::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 36%),
radial-gradient(circle at 84% 20%, rgba(255, 255, 255, 0.12), transparent 24%);
pointer-events: none;
}
#school-faq-section .faq-more-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 20px;
min-height: 94px;
padding: 18px clamp(18px, 4vw, 52px);
}
#school-faq-section .faq-more-copy {
min-width: 0;
max-width: 760px;
}
#school-faq-section .faq-more-title {
margin: 0;
font-family: "Salmond", "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 20px;
line-height: 1.02;
letter-spacing: 0.01em;
color: #ffffff;
font-synthesis: none;
}
#school-faq-section .faq-more-text {
margin: 8px 0 0;
font-family: "Salmond", "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 13px;
line-height: 1.55;
letter-spacing: 0.018em;
color: rgba(255, 255, 255, 0.76);
font-synthesis: none;
}
#school-faq-section .faq-contact-btn {
position: relative;
display: inline-flex;
align-items: center;
overflow: hidden;
min-height: 52px;
padding: 0 5px 0 24px;
border-radius: 9999px;
background: #74e8dc;
text-decoration: none;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
#school-faq-section .faq-contact-btn .pill-fill {
position: absolute;
z-index: 0;
right: 5px;
top: 5px;
width: 42px;
height: 42px;
border-radius: 9999px;
background: #000000;
pointer-events: none;
transition: width 0.62s cubic-bezier(0.19, 1, 0.22, 1);
}
#school-faq-section .faq-contact-btn__label {
position: relative;
z-index: 1;
padding-right: 16px;
white-space: nowrap;
font-family: "Boldonse", "AnekBangla", system-ui, -apple-system, sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #000000;
transition: color 0.26s ease;
}
#school-faq-section .faq-contact-btn__icon {
position: relative;
z-index: 1;
display: inline-flex;
width: 42px;
height: 42px;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: #000000;
color: #ffffff;
}
#school-faq-section .faq-contact-btn:hover {
transform: translateY(-1px);
}
#school-faq-section .faq-contact-btn:hover .pill-fill {
width: calc(100% - 10px);
}
#school-faq-section .faq-contact-btn:hover .faq-contact-btn__label {
color: #ffffff;
}
@media (max-width: 1024px) {
#school-faq-section .faq-row {
grid-template-columns: 70px minmax(0, 1fr) auto 30px;
padding: 9px 34px 9px 39%;
column-gap: 12px;
}
#school-faq-section .faq-number {
font-size: 24px;
transform: translateX(-180px);
}
#school-faq-section .faq-item:hover .faq-number {
transform: translateX(-180px) translateZ(14px) rotateY(8deg);
}
#school-faq-section .faq-item.is-open .faq-number {
transform: translateX(-180px) translateZ(20px) rotateY(10deg) scale(1.04);
}
#school-faq-section .faq-question {
font-size: 15px;
}
#school-faq-section .open-close-label {
min-width: 54px;
height: 22px;
padding: 0 9px;
font-size: 10px;
border-radius: 0;
}
#school-faq-section .faq-plus {
font-size: 22px;
width: 26px;
height: 26px;
transform: translateX(12px) translateZ(0) rotate(0deg);
}
#school-faq-section .faq-item.is-open .faq-plus {
transform: translateX(12px) translateZ(18px) rotate(135deg) scale(1.06);
}
#school-faq-section .faq-answer-inner {
padding-left: 39%;
padding-right: 90px;
}
#school-faq-section .faq-more-grid {
grid-template-columns: minmax(0, 1fr) auto;
min-height: 0;
padding: 16px 34px;
}
#school-faq-section .faq-contact-btn {
justify-self: start;
}
}
@media (max-width: 768px) {
#school-faq-section .school-faq-section__title {
font-size: clamp(2rem, 10.5vw, 2.65rem);
line-height: 1.04;
letter-spacing: 0.01em;
max-width: 11ch;
}
#school-faq-section .faq-row {
grid-template-columns: 38px minmax(0, 1fr) 22px;
padding: 10px 16px;
column-gap: 8px;
}
#school-faq-section .faq-number {
font-size: 18px;
transform: translateX(0);
}
#school-faq-section .faq-item:hover .faq-number {
transform: translateX(0) translateZ(8px) rotateY(4deg);
}
#school-faq-section .faq-item.is-open .faq-number {
transform: translateX(0) translateZ(12px) rotateY(6deg) scale(1.03);
}
#school-faq-section .faq-question {
font-size: 14px;
}
#school-faq-section .open-close-label {
display: none;
}
#school-faq-section .faq-plus {
font-size: 20px;
width: 20px;
height: 20px;
transform: translateX(0) translateZ(0) rotate(0deg);
}
#school-faq-section .faq-item.is-open .faq-plus {
transform: translateX(0) translateZ(10px) rotate(135deg) scale(1.04);
}
#school-faq-section .faq-answer-inner {
padding: 0 16px 10px 60px;
}
#school-faq-section .faq-more-grid {
grid-template-columns: 1fr;
row-gap: 12px;
padding: 16px;
}
#school-faq-section .faq-more-title {
font-size: clamp(1.25rem, 5.7vw, 1.55rem);
line-height: 1.08;
}
#school-faq-section .faq-more-text {
font-size: 12px;
line-height: 1.5;
}
#school-faq-section .faq-contact-btn {
justify-self: start;
width: min(100%, 260px);
min-height: 48px;
padding-left: 20px;
justify-content: space-between;
}
#school-faq-section .faq-contact-btn .pill-fill,
#school-faq-section .faq-contact-btn__icon {
width: 38px;
height: 38px;
}
#school-faq-section .faq-contact-btn__label {
padding-right: 12px;
font-size: 10.5px;
letter-spacing: 0.16em;
}
}
/* ===== style/school-numbers-title.css ===== */
#school-numbers h2.numbers-title,
#school-numbers h2.numbers-title .numbers-title__line,
#school-numbers h2.numbers-title .grad-text {
font-family: 'welfare', 'Inter', system-ui, sans-serif !important;
font-synthesis: none;
}
/* ===== style/school-identity-governance.css ===== */
/* Identity & Governance strip (from 9th.html) — scoped to .school-id-gov-embed only */
.school-id-gov-embed {
/* Same dotted field as school.html body + .hiw-school-embed .hiw-section (hero / page chrome) */
--id-section-bg: var(--ds4-bg, #f4f4f4);
--id-section-dot: #d1d1d1;
background-color: var(--id-section-bg);
background-image: radial-gradient(var(--id-section-dot) 1px, transparent 1px);
background-size: 18px 18px;
background-repeat: repeat;
/* Inner colored tile width (frame adds padding outside this) */
--card-size-w: clamp(440px, 35vw, 700px);
/* Outer shell + inner tile share the same corner treatment (sharp / “pointy”) */
--id-card-corner: 0;
--card-gap: 0px;
--id-shell-pad: 10px 12px;
--id-shell-border: 2px solid #000000;
--id-join-w: 40px;
--slider-speed: 42s;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #0f172a;
}
.school-id-gov-embed *,
.school-id-gov-embed *::before,
.school-id-gov-embed *::after {
box-sizing: border-box;
}
.school-id-gov-embed .id-gov-container {
max-width: 1800px;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.school-id-gov-embed .id-gov-container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.school-id-gov-embed .id-gov-container {
padding-left: 2rem;
padding-right: 2rem;
}
}
/* Section kicker — same pattern as .hiw-school-embed .hiw-school-head + .hiw-school-badge */
.school-id-gov-embed .id-gov-section-head {
text-align: center;
max-width: 760px;
margin: 0 auto;
padding: 0 16px;
}
.school-id-gov-embed .id-gov-kicker {
display: inline-block;
background: #eeabb5;
color: #1a1a1a;
font-family: Inter, system-ui, -apple-system, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 6px;
border: 2px solid #1a1a1a;
margin-bottom: 0;
}
/* Let the wrapper paint the dot grid; keep the section clear so dots stay visible */
.school-id-gov-embed .identity-white,
.school-id-gov-embed #identity-governance {
background: transparent;
padding: 72px 0 64px;
}
.school-id-gov-embed .id-headline {
margin-top: 4px;
font-family: 'welfare', 'Inter', system-ui, sans-serif;
font-size: clamp(2rem, 5vw, 3.1rem);
line-height: 1.04;
letter-spacing: 0.04em;
font-weight: 400;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #0f172a;
max-width: min(48ch, 92vw);
text-align: center;
margin-left: auto;
margin-right: auto;
text-wrap: balance;
}
.school-id-gov-embed .id-headline .grad-text {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
text-transform: none;
font-synthesis: none;
vertical-align: baseline;
}
.school-id-gov-embed .id-headline-subline {
display: block;
margin-top: 8px;
font-size: clamp(0.82rem, 1.45vw, 1.2rem);
line-height: 1.12;
letter-spacing: -0.01em;
font-weight: 700;
text-transform: none;
}
.school-id-gov-embed .id-subcopy {
margin-top: 16px;
max-width: min(58rem, 96vw);
font-family: 'Salmond', 'Inter', system-ui, -apple-system, sans-serif;
font-size: clamp(0.9rem, 1.05vw, 1.08rem);
font-weight: 700;
font-synthesis: none;
/* Darker than .id-gov-kicker fill (#eeabb5) */
color: #5a3038;
color: color-mix(in srgb, #eeabb5 24%, #1a1a1a 76%);
line-height: 1.42;
margin-left: auto;
margin-right: auto;
text-align: center;
text-wrap: balance;
}
/* One sentence per line on wide viewports (br already splits copy into two sentences) */
@media (min-width: 1024px) {
.school-id-gov-embed .id-subcopy {
max-width: min(64rem, 92vw);
}
}
.school-id-gov-embed .id-focus-blue {
color: #1d4ed8;
}
.school-id-gov-embed .id-focus-green {
color: #0f766e;
}
.school-id-gov-embed .id-focus-purple {
color: #7c3aed;
}
.school-id-gov-embed .id-focus-red {
color: #be123c;
}
.school-id-gov-embed .id-slider-wrap {
margin-top: 28px;
overflow: hidden;
position: relative;
padding: 4px 0;
}
.school-id-gov-embed .id-slider-wrap::before,
.school-id-gov-embed .id-slider-wrap::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 44px;
z-index: 2;
pointer-events: none;
}
.school-id-gov-embed .id-slider-wrap::before {
left: 0;
background: linear-gradient(90deg, var(--id-section-bg) 0%, transparent 100%);
}
.school-id-gov-embed .id-slider-wrap::after {
right: 0;
background: linear-gradient(270deg, var(--id-section-bg) 0%, transparent 100%);
}
.school-id-gov-embed .id-slider-track {
display: flex;
width: max-content;
will-change: transform;
animation: schoolIdGovAutoSlide var(--slider-speed) linear infinite;
}
.school-id-gov-embed .id-slider-wrap:hover > .id-slider-track,
.school-id-gov-embed .id-slider-wrap:focus-within > .id-slider-track {
animation-play-state: paused;
}
.school-id-gov-embed .id-slider-group {
display: flex;
gap: 0;
/* No trailing padding — padding-right here created a visible gap after the last joiner before the duplicated loop (e.g. Tickets → Front Office). */
padding-right: 0;
align-items: center;
}
/* Outer frame: white mat + thin black border (screenshot style) */
.school-id-gov-embed .id-card-shell {
flex-shrink: 0;
background: #ffffff;
padding: var(--id-shell-pad);
border: var(--id-shell-border);
border-radius: var(--id-card-corner);
box-sizing: border-box;
}
.school-id-gov-embed .id-card-shell:hover .id-card.id-vcard {
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
}
/* Connector: square — line — square; grid keeps nodes flush to join edges so the line meets both shells */
.school-id-gov-embed .id-card-join {
flex: 0 0 var(--id-join-w);
width: var(--id-join-w);
display: grid;
grid-template-columns: 5px 1fr 5px;
align-items: center;
align-self: center;
column-gap: 0;
}
.school-id-gov-embed .id-card-join-node {
width: 5px;
height: 5px;
justify-self: center;
background: #000000;
}
.school-id-gov-embed .id-card-join-line {
width: 100%;
min-width: 0;
height: 2px;
background: #000000;
}
/* Inner colored module: rounded like reference */
.school-id-gov-embed .id-card.id-vcard {
width: var(--card-size-w);
/* Wider than tall — keeps width, trims overall height */
aspect-ratio: 5 / 4;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0;
border: none;
border-radius: var(--id-card-corner);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease;
}
.school-id-gov-embed .id-card-cap {
flex: 0 0 40%;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--cap-bg);
color: var(--cap-fg, #ffffff);
/* Tighter vertical padding so larger type fits without growing the 40% band */
padding: 0.28rem 0.85rem 0.26rem;
border-bottom: 2px solid rgba(0, 0, 0, 0.14);
overflow: hidden;
}
.school-id-gov-embed .id-card-cap h3 {
margin: 0;
font-family: 'AnekBangla', 'AnekBangla', Inter, sans-serif;
font-size: clamp(0.95rem, 2.6vw, 1.55rem);
line-height: 1.02;
letter-spacing: 0;
word-spacing: 0.12em;
text-transform: uppercase;
font-weight: 400;
text-wrap: balance;
text-shadow: var(--cap-title-shadow, 0 1px 2px rgba(0, 0, 0, 0.2));
}
.school-id-gov-embed .id-card-body {
flex: 1;
min-height: 0;
background: var(--body-bg);
color: var(--body-fg);
padding: 0.45rem 1rem 0.55rem;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Operations row: fill the coloured body — no tiny type, no list stretching empty space */
.school-id-gov-embed .id-card.id-vrow2.id-vcard {
aspect-ratio: 4 / 3;
}
.school-id-gov-embed .id-card.id-vrow2 .id-card-body {
padding: clamp(1.12rem, 2.85vw, 1.45rem) clamp(0.85rem, 2vw, 1.15rem) clamp(0.55rem, 1.6vw, 0.85rem);
justify-content: flex-start;
gap: 0;
background: #ffffff;
color: var(--body-fg);
}
.school-id-gov-embed .id-card.id-vrow2 .id-card-body .id-card-slogan {
margin: 0 0 clamp(0.72rem, 1.65vw, 0.95rem);
font-size: clamp(0.92rem, 2.1vw, 1.12rem);
line-height: 1.22;
display: block;
-webkit-line-clamp: unset;
overflow: visible;
}
.school-id-gov-embed .id-card.id-vrow2 .id-card-body p:not(.id-card-slogan) {
font-size: clamp(0.78rem, 1.45vw, 0.95rem);
line-height: 1.45;
font-weight: 400;
display: block;
-webkit-line-clamp: unset;
overflow: visible;
opacity: 1;
margin: 0 0 clamp(0.32rem, 0.85vw, 0.48rem);
}
.school-id-gov-embed .id-card.id-vrow2 .id-card-body ul {
display: inline-flex;
flex-direction: column;
align-items: stretch;
flex: 0 0 auto;
max-width: 100%;
align-self: flex-start;
margin: auto 0 0;
gap: 0;
padding: 0.55rem 0;
/* Dotted rules span width of longest bullet row only (not full card); rows stretch to match */
background-image: radial-gradient(circle closest-side, #0a0a0a 0.85px, transparent 1px),
radial-gradient(circle closest-side, #0a0a0a 0.85px, transparent 1px);
background-size: 8px 2px, 8px 2px;
background-position: 0 0, 0 100%;
background-repeat: repeat-x, repeat-x;
}
.school-id-gov-embed .id-card.id-vrow2 .id-card-body li {
font-size: clamp(0.74rem, 1.35vw, 0.9rem);
line-height: 1.32;
font-weight: 400;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem;
-webkit-line-clamp: unset;
overflow: visible;
padding: 0.48rem 0;
position: relative;
}
.school-id-gov-embed .id-card.id-vrow2 .id-card-body li + li {
padding-top: 0.58rem;
margin-top: 0;
background-image: radial-gradient(circle closest-side, #0a0a0a 0.85px, transparent 1px);
background-size: 8px 2px;
background-repeat: repeat-x;
background-position: 0 0;
}
/* Checkbox: in-flow flex item so label text aligns to vertical center; tick absolutely over box */
.school-id-gov-embed .id-card.id-vrow2 .id-card-body li::before {
content: "";
flex: 0 0 18px;
width: 18px;
height: 18px;
box-sizing: border-box;
border-radius: 0;
border: 1.5px solid #000000;
background-color: var(--header-accent);
box-shadow: none;
position: relative;
left: auto;
top: auto;
margin: 0;
transform: none;
align-self: center;
}
.school-id-gov-embed .id-card.id-vrow2 .id-card-body li::after {
content: "";
position: absolute;
left: 9px;
top: 50%;
width: 10px;
height: 8px;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M2 5.5L5.5 9.2L12 1.8' stroke='%23000' stroke-width='1.35' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
.school-id-gov-embed .id-card-body .id-card-slogan {
margin: 0 0 0.28rem;
font-size: clamp(0.72rem, 1.55vw, 0.88rem);
line-height: 1.2;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--slogan-color, var(--body-fg));
text-wrap: balance;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.school-id-gov-embed .id-card-body p:not(.id-card-slogan) {
margin: 0;
font-size: 0.6rem;
line-height: 1.32;
font-weight: 600;
opacity: 0.95;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.school-id-gov-embed .id-card-body p:not(.id-card-slogan) + p:not(.id-card-slogan) {
margin-top: 0.2rem;
}
.school-id-gov-embed .id-card-body ul {
list-style: none;
margin: 0.28rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.12rem;
flex: 1;
min-height: 0;
overflow: hidden;
}
.school-id-gov-embed .id-card-body li {
position: relative;
margin: 0;
padding-left: 0.85rem;
font-size: 0.58rem;
line-height: 1.22;
font-weight: 600;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.school-id-gov-embed .id-card-body li::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 5px;
height: 5px;
border-radius: 1px;
background: var(--bullet, var(--cap-bg));
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
transform: rotate(45deg);
}
/* Row 2: solid header band + black title; checkboxes match --header-accent */
.school-id-gov-embed .id-card.id-vrow2 .id-card-cap {
flex: 0 0 auto;
height: 3.35rem;
max-height: 3.35rem;
min-height: 3.35rem;
background: var(--header-cap-bg);
color: #0a0a0a;
padding: 0.06rem 0.75rem;
border-bottom: 2px solid #000000;
justify-content: center;
}
.school-id-gov-embed .id-card.id-vrow2 .id-card-cap h3 {
color: #0a0a0a;
font-size: clamp(1.08rem, 3.35vw, 1.72rem);
line-height: 0.95;
letter-spacing: 0.025em;
text-shadow: none;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* Header band + checkbox use the same solid brand hex (no tinting) */
.school-id-gov-embed .id-card.id-vrow2-1 {
--header-cap-bg: #ffa5ec;
--header-accent: #ffa5ec;
--body-bg: #ffffff;
--body-fg: #0f172a;
--slogan-color: #be185d;
}
.school-id-gov-embed .id-card.id-vrow2-2 {
--header-cap-bg: #13e5fc;
--header-accent: #13e5fc;
--body-bg: #ffffff;
--body-fg: #0f172a;
--slogan-color: #0e7490;
}
.school-id-gov-embed .id-card.id-vrow2-3 {
--header-cap-bg: #fef95d;
--header-accent: #fef95d;
--body-bg: #ffffff;
--body-fg: #0f172a;
--slogan-color: #a16207;
}
.school-id-gov-embed .id-card.id-vrow2-4 {
--header-cap-bg: #5afca6;
--header-accent: #5afca6;
--body-bg: #ffffff;
--body-fg: #0f172a;
--slogan-color: #047857;
}
.school-id-gov-embed .id-card.id-vrow2-5 {
/* Slightly lightened orange vs base #ff7545 */
--header-cap-bg: color-mix(in srgb, #ff7545 70%, white);
--header-accent: color-mix(in srgb, #ff7545 70%, white);
--body-bg: #ffffff;
--body-fg: #0f172a;
--slogan-color: #c2410c;
}
.school-id-gov-embed .id-card.id-vrow2-6 {
/* Slightly lightened purple vs base #8d7dff */
--header-cap-bg: color-mix(in srgb, #8d7dff 70%, white);
--header-accent: color-mix(in srgb, #8d7dff 70%, white);
--body-bg: #ffffff;
--body-fg: #0f172a;
--slogan-color: #5b21b6;
}
.school-id-gov-embed .id-card.id-vrow2-7 {
--header-cap-bg: #fef95d;
--header-accent: #fef95d;
--body-bg: #ffffff;
--body-fg: #0f172a;
--slogan-color: #a16207;
}
.school-id-gov-embed .id-card.id-vrow2-8 {
--header-cap-bg: #ffa5ec;
--header-accent: #ffa5ec;
--body-bg: #ffffff;
--body-fg: #0f172a;
--slogan-color: #be185d;
}
@keyframes schoolIdGovAutoSlide {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.school-id-gov-embed .id-slider-track {
animation: none !important;
}
.school-id-gov-embed .id-card {
transition: none !important;
}
}
/* ===== Solution/css/pain-points.css ===== */
/* ── Pain Points Section ── */
/* Extrabold — CabinetGrotesk-Extrabold.woff2 (only this file for the pain-point headline) */
@keyframes pp-float-a {
0%,100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-9px) rotate(4deg); }
}
@keyframes pp-float-b {
0%,100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-7px) rotate(-5deg); }
}
@keyframes pp-float-c {
0%,100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-11px) rotate(3deg); }
}
.pp-section {
background: #ebe3d8;
width: 100%;
max-width: 100vw;
margin-inline: 0;
overflow: clip;
padding: clamp(36px, 4vw, 60px) clamp(75px, 8vw, 135px);
display: grid;
grid-template-columns: 400px 1fr;
column-gap: clamp(32px, 4vw, 64px);
row-gap: clamp(24px, 3vw, 36px);
align-items: start;
}
.pp-problem-header {
grid-column: 1 / -1;
max-width: 980px;
margin: 0 auto;
text-align: center;
}
.pp-problem-badge {
display: inline-flex;
align-items: center;
gap: 10px;
border: 2px solid #1a1a1a;
background: #ff5050eb;
padding: 6px 16px;
border-radius: 6px;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
.pp-problem-badge-text {
font-family: 'Agency', 'Inter', system-ui, sans-serif !important;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 1;
color: #1a1a1a;
white-space: nowrap;
}
.pp-problem-title {
margin: 12px 0 0;
font-family: 'welfare', 'Inter', system-ui, sans-serif !important;
font-size: 3.2rem;
font-weight: 400;
line-height: 0.94;
letter-spacing: 0.03em;
color: #0f172a;
text-wrap: balance;
font-synthesis: none;
}
.pp-problem-title .grad-text {
line-height: 1.12 !important;
padding-bottom: 0.08em;
margin-bottom: -0.08em;
}
.pp-problem-subtitle {
max-width: 1040px;
margin: 12px auto 0;
font-family: 'Salmond', 'Inter', system-ui, sans-serif !important;
font-size: clamp(0.98rem, 1.22vw, 1.18rem);
font-weight: 400;
font-synthesis: none;
line-height: 1.36;
letter-spacing: 0.06em;
color: #64748b;
text-wrap: balance;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.pp-intro {
position: sticky;
top: 40px;
text-align: left;
}
.pp-intro-title {
font-family: 'AnekBangla', 'Inter', system-ui, sans-serif;
font-size: clamp(1.4rem, 2.2vw, 2.2rem);
font-weight: 400;
font-synthesis: none;
text-transform: none;
letter-spacing: -0.02em;
color: #1a1a1a;
line-height: 1.15;
margin: 0 0 18px 0;
}
.pp-intro-subtitle {
font-family: 'Lora', Georgia, serif;
font-size: 1.35rem;
font-style: italic;
color: #6b4c2a;
margin: 0 0 60px 0;
}
.pp-intro-para {
font-family: 'Inter', sans-serif;
font-size: 0.98rem;
color: #5a4a3a;
line-height: 1.75;
margin: 0;
}
/* ── Cards grid ── */
.pp-cards {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
gap: clamp(12px, 1.5vw, 20px);
overflow: visible;
align-items: stretch;
}
/* ── Card ── */
.pp-card {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
cursor: default;
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-card:hover { transform: translateY(-5px); }
/* Label box */
.pp-card-label {
background: var(--pp-label-bg);
border-radius: 3px;
padding: 10px 14px;
box-shadow: 0 2px 8px rgba(60,40,10,0.18);
display: flex;
align-items: center;
gap: 9px;
flex-shrink: 0;
transition: box-shadow 0.3s ease;
overflow: hidden;
}
.pp-card:hover .pp-card-label { box-shadow: 0 4px 16px rgba(60,40,10,0.26); }
.pp-label-icon {
width: 24px; height: 24px;
object-fit: contain;
flex-shrink: 0;
}
.pp-card-title {
font-size: clamp(14px, 1.2vw, 18px);
font-weight: 900;
color: #fff;
letter-spacing: -0.01em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 3px rgba(0,0,0,0.25);
font-family: 'Inter', sans-serif;
}
/* Body wrap — gradient border */
.pp-card-body-wrap {
flex: 1;
padding: 2px;
border-radius: 5px;
background: var(--pp-label-bg);
position: relative;
}
.pp-card-body {
background: #fff;
border-radius: 3px;
padding: 12px 16px 28px;
position: relative;
height: 100%;
box-shadow: 0 2px 12px rgba(60,40,10,0.08);
transition: box-shadow 0.3s ease, background-color 0.22s ease;
isolation: isolate;
display: flex;
flex-direction: column;
overflow: hidden;
}
.pp-card:hover .pp-card-body {
box-shadow: 0 8px 28px rgba(60,40,10,0.14);
background: var(--pp-hover-body);
}
/* Dot-grid texture */
.pp-card-body::before {
content: "";
position: absolute;
inset: 10px 12px 12px;
z-index: 0;
pointer-events: none;
border-radius: 2px;
background-image: radial-gradient(circle at 1px 1px, rgba(120,100,70,0.2) 1px, transparent 1px);
background-size: 16px 16px;
opacity: 0.35;
}
/* Left stripe */
.pp-card-body::after {
content: "";
position: absolute;
left: 0; top: 12px; bottom: 12px;
width: 4px;
border-radius: 0 3px 3px 0;
background: var(--pp-stripe);
opacity: 0.7;
transition: opacity 0.3s ease;
}
.pp-card:hover .pp-card-body::after { opacity: 1; top: 6px; bottom: 6px; }
/* Right stripe */
.pp-card-body .pp-right-stripe {
position: absolute;
right: 0; top: 12px; bottom: 12px;
width: 4px;
border-radius: 3px 0 0 3px;
background: var(--pp-stripe);
opacity: 0.7;
transition: opacity 0.3s ease, top 0.3s ease, bottom 0.3s ease;
pointer-events: none;
z-index: 0;
}
.pp-card:hover .pp-card-body .pp-right-stripe { opacity: 1; top: 6px; bottom: 6px; }
/* Floating icons — sharp, not blurry */
.pp-float-icon {
position: absolute;
pointer-events: none;
z-index: 1;
opacity: 0.13;
transition: opacity 0.3s ease;
/* no filter, no blur — keep icons crisp */
}
.pp-card:hover .pp-float-icon { opacity: 0.22; }
.pp-float-icon img {
display: block;
width: 100%;
height: auto;
/* Remove crisp-edges — it causes aliasing artifacts on PNGs at an angle */
image-rendering: auto;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.pp-fi-1 { bottom: 12px; right: 12px; width: 54px; animation: pp-float-a 4.2s ease-in-out infinite; }
.pp-fi-2 { bottom: 18px; right: 76px; width: 38px; animation: pp-float-b 5.1s ease-in-out infinite 0.8s; }
.pp-fi-3 { top: 12px; right: 14px; width: 32px; animation: pp-float-c 3.8s ease-in-out infinite 1.4s; }
/* Copy */
.pp-card-copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
padding-right: 20px;
flex: 1;
}
.pp-card-quote {
font-family: "Lora", Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: clamp(15px, 1.2vw, 18px);
line-height: 1.35;
color: var(--pp-kicker);
margin-bottom: 16px;
}
/* ── Hover text swap: smooth cross-fade, no glitch ── */
.pp-card-para {
font-size: clamp(13.5px, 1.05vw, 15.5px);
line-height: 1.6;
font-weight: 400;
color: #5a4e44;
position: relative;
display: block;
margin-bottom: 8px;
max-width: calc(100% - 10px);
/* do NOT transition color here — causes flash mid-transition */
}
.pp-card-para:last-child { margin-bottom: 0; }
/* Normal text layer */
.pp-card-para > .pp-para-normal {
display: block;
transition: opacity 0.28s ease;
opacity: 1;
}
.pp-card:hover .pp-card-para > .pp-para-normal {
opacity: 0;
}
/* Curly/handwritten layer — overlaid absolutely */
.pp-card-para > .pp-para-curly {
position: absolute;
inset: 0;
display: block;
opacity: 0;
transition: opacity 0.28s ease 0.05s; /* tiny delay so normal fades first */
font-family: "Segoe Script", "Lucida Handwriting", cursive;
font-size: 0.9em;
font-weight: 700;
line-height: inherit;
letter-spacing: normal;
color: var(--pp-kicker);
white-space: normal;
pointer-events: none;
}
.pp-card:hover .pp-card-para > .pp-para-curly {
opacity: 1;
}
/* Warning badge */
.pp-warn-badge {
position: absolute;
right: -12px; bottom: -12px;
width: 32px; height: 32px;
border-radius: 50%;
background: #111;
border: 2px solid #111;
display: grid;
place-items: center;
z-index: 20;
transition: transform 0.22s ease;
box-shadow: 0 3px 10px rgba(0,0,0,0.28);
}
.pp-warn-badge::before {
content: "\26A0";
color: #ff2f43;
font-size: 13px;
font-weight: 900;
line-height: 1;
}
.pp-card:hover .pp-warn-badge { transform: translateY(-3px) scale(1.08); }
/* Themes */
.pp-t1 { --pp-label-bg:linear-gradient(90deg,#0a0a0a 65%,#b03010 82%,#f97316); --pp-stripe:linear-gradient(#0a0a0a,#f97316); --pp-hover-body:#fff8f5; --pp-kicker:#8a2a0e; }
.pp-t2 { --pp-label-bg:linear-gradient(90deg,#0a0a0a 65%,#0369a1 82%,#06b6d4); --pp-stripe:linear-gradient(#0a0a0a,#06b6d4); --pp-hover-body:#f0faff; --pp-kicker:#0a4a6a; }
.pp-t3 { --pp-label-bg:linear-gradient(90deg,#0a0a0a 65%,#6d28d9 82%,#a855f7); --pp-stripe:linear-gradient(#0a0a0a,#a855f7); --pp-hover-body:#faf5ff; --pp-kicker:#4a1b8a; }
.pp-t4 { --pp-label-bg:linear-gradient(90deg,#0a0a0a 65%,#047857 82%,#34d399); --pp-stripe:linear-gradient(#0a0a0a,#34d399); --pp-hover-body:#f0fff8; --pp-kicker:#0a5a3a; }
.pp-t5 { --pp-label-bg:linear-gradient(90deg,#0a0a0a 65%,#9d174d 82%,#f472b6); --pp-stripe:linear-gradient(#0a0a0a,#f472b6); --pp-hover-body:#fff0f7; --pp-kicker:#7a0f3c; }
.pp-t6 { --pp-label-bg:linear-gradient(100deg,#1a0533,#5b1fa6,#c084fc); --pp-stripe:linear-gradient(#1a0533,#7c3aed); --pp-hover-body:#faf5ff; --pp-kicker:#3b1280; }
/* ── Responsive ── */
@media (max-width: 1200px) {
.pp-section { grid-template-columns: 300px 1fr; }
}
@media (max-width: 960px) {
.pp-section {
grid-template-columns: 1fr;
padding: clamp(28px, 4vw, 48px) clamp(55px, 6vw, 95px);
}
.pp-intro { position: static; margin-bottom: 28px; }
.pp-intro-title { font-size: clamp(1.6rem, 4vw, 2.4rem); }
}
@media (max-width: 640px) {
.pp-section { padding: 28px 20px; /* narrower on small screens */ }
.pp-problem-title { font-size: clamp(1.65rem, 6.2vw, 2.35rem); }
.pp-cards { grid-template-columns: 1fr; gap: 16px; }
.pp-card-title { white-space: normal; font-size: 14px; }
.pp-warn-badge { right: -8px; bottom: -8px; width: 26px; height: 26px; }
.pp-warn-badge::before { font-size: 11px; }
.pp-fi-1 { width: 40px; }
.pp-fi-2 { width: 28px; }
.pp-fi-3 { width: 24px; }
}
@media (max-width: 400px) {
.pp-intro-title { font-size: 1.4rem; }
.pp-card-body { padding: 10px 12px 24px; }
}
/* ===== Solution/css/pp-ds13-cards.css ===== */
/* DS13-shaped cards in pain-points section (matches MAW-A/ds13.html) */
.pp-section {
position: relative;
}
.pp-section .pp-cards.pp-ds13-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(14px, 2vw, 26px);
width: 100%;
align-items: start;
justify-items: stretch;
}
.pp-ds13-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
pointer-events: none;
}
.pp-ds13-card {
--pp-ds13-bg: #151e2e;
--pp-ds13-accent: #f01a71;
width: 100%;
max-width: 520px;
margin-inline: auto;
/* Shorter than before (was 440/380) so the card isn't half-empty; the SVG bg
uses preserveAspectRatio="none" so the bubble simply stretches to fit. */
aspect-ratio: 440 / 296;
position: relative;
filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.1));
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pp-ds13-card:hover {
transform: translateY(-6px);
}
.pp-ds13-card-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
display: block;
}
.pp-ds13-theme-black {
--pp-ds13-bg: #151e2e;
--pp-ds13-accent: #f01a71;
}
.pp-ds13-theme-blue {
--pp-ds13-bg: #004bb8;
--pp-ds13-accent: #f0ef1a;
}
.pp-ds13-theme-green {
--pp-ds13-bg: #037d5a;
--pp-ds13-accent: #f98585;
}
.pp-ds13-theme-pink {
--pp-ds13-bg: #a31461;
--pp-ds13-accent: #71f4ec;
}
.pp-ds13-card-inner {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
/* Bottom padding reserves room for the corner icon (kept smaller so the
paragraph can sit lower in the card). */
padding: clamp(14px, 2.5vw, 26px) clamp(20px, 4.2vw, 36px) clamp(34px, 4vw, 46px);
/* Flex column: title + subtitle stay at the top, the paragraph is pushed to
the bottom (margin-top:auto), creating the deliberate gap in between. */
display: flex;
flex-direction: column;
box-sizing: border-box;
}
/* The title/subtitle/paragraph live inside an unclassed wrapper ; make it
fill the card's content area so the paragraph (margin-top:auto) drops to the
bottom and a long gap opens up under the subtitle — without growing the card. */
.pp-ds13-card-inner > div:first-child {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.pp-ds13-card-title {
font-family: 'AnekBangla', 'AnekBangla', 'Inter', system-ui, sans-serif;
font-weight: 400;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: clamp(1.2rem, 1.9vw, 1.5rem);
line-height: 1.1;
color: #fff;
text-transform: capitalize;
letter-spacing: 0.5px;
margin: 0 0 clamp(8px, 1.1vw, 12px);
}
.pp-ds13-card-subtitle {
font-size: clamp(0.82rem, 1.05vw, 0.95rem);
font-weight: 500;
font-style: italic;
color: var(--pp-ds13-accent);
margin: 0 0 0;
line-height: 1.4;
}
.pp-ds13-card-desc {
font-family: 'Salmond', 'Inter', sans-serif !important;
font-size: clamp(0.85rem, 1.05vw, 0.98rem) !important;
line-height: 1.35;
color: #fff;
font-weight: 400;
max-width: 100%;
letter-spacing: 0.4px;
/* margin-top:auto drops the paragraph to the bottom of the card */
margin: auto 0 0;
}
.pp-ds13-card-footer {
position: absolute;
right: clamp(10px, 1.8vw, 16px);
bottom: clamp(10px, 1.8vw, 16px);
display: flex;
justify-content: flex-end;
flex-shrink: 0;
pointer-events: none;
}
.pp-ds13-icon-slot {
width: clamp(58px, 8vw, 74px);
height: clamp(58px, 8vw, 74px);
flex-shrink: 0;
display: flex;
align-items: flex-end;
justify-content: flex-end;
box-sizing: border-box;
background: none;
border-radius: 0;
padding: clamp(8px, 1.2vw, 14px) 0 0 clamp(8px, 1.2vw, 14px);
}
.pp-ds13-icon-img {
width: clamp(28px, 6vw, 42px);
height: clamp(28px, 6vw, 42px);
object-fit: contain;
object-position: center;
display: block;
pointer-events: none;
}
@media (max-width: 640px) {
.pp-section .pp-cards.pp-ds13-grid {
grid-template-columns: 1fr;
gap: 18px;
}
/* Smaller cards on phones — narrower + shorter than the desktop bubble */
.pp-ds13-card {
max-width: 360px;
aspect-ratio: 440 / 318;
}
.pp-ds13-card-inner {
padding: 16px 22px clamp(46px, 13vw, 58px);
}
}
/* ===== Solution/css/ds8-features.css ===== */
/* ── DS8 Feature Grid Section (school.html) ── */
/* All classes prefixed with fg- to avoid conflicts */
/* Body copy in feature boxes — mapped to the local Salmond font files */
.fg-section {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
color: #111;
background-color: #EFECE6;
box-sizing: border-box;
}
.fg-section-header {
max-width: 1500px;
margin: 0 auto;
padding: 72px clamp(24px, 4vw, 72px) 12px;
box-sizing: border-box;
}
.fg-section-header .ds1-section-title {
max-width: 980px;
margin-left: auto;
margin-right: auto;
font-family: 'welfare', 'Inter', system-ui, sans-serif;
font-size: clamp(2rem, 5vw, 3.45rem);
line-height: 1.04;
letter-spacing: 0.04em;
text-transform: none;
font-weight: 400;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-wrap: balance;
}
/* Keep “to” in Welfare — same stack as parent (avoid text-transform + section Inter fighting the face) */
.fg-section-header .ds1-section-title .fg-prep {
font-family: 'welfare', 'Inter', system-ui, sans-serif;
font-weight: 400;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
text-transform: none;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fg-section-header .ds1-section-title .grad-text {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
text-transform: none;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: baseline;
}
.fg-section-header .ds1-section-subtitle {
max-width: 1440px;
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-weight: 700;
font-synthesis: none;
font-size: 1.3rem;
/* Darker than .fg-section-header .ds1-badge fill (#a2cdf0) */
color: #163d58;
color: color-mix(in srgb, #a2cdf0 22%, #1a1a1a 78%);
line-height: 1.25;
}
/* Bordered pill like Finance / onboarding (not full round); light blue fill */
.fg-section-header .ds1-badge {
display: inline-block;
background: #a2cdf0;
color: #1a1a1a;
font-family: 'Agency', 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 6px;
border: 2px solid #1a1a1a;
margin-bottom: 8px;
box-sizing: border-box;
}
/* ─── MAIN GRID ─── */
.fg-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
max-width: 100%;
margin: 0 auto;
border: 2px solid #000;
border-bottom: none;
box-sizing: border-box;
position: relative;
}
/* Paint left/right borders above box stacking contexts */
.fg-grid::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-left: 2px solid #000;
border-right: 2px solid #000;
pointer-events: none;
z-index: 9999;
}
/* ─── BOXES ─── */
.fg-box {
min-height: 78vh;
min-width: 0;
display: flex;
flex-direction: column;
position: relative;
/* Don’t clip the text column: 3D layers in .fg-box-visual used to get clipped here */
overflow: visible;
perspective: 1000px;
border-bottom: 2px solid #000;
padding: 0;
box-sizing: border-box;
}
.fg-box:nth-child(odd) {
border-right: 2px solid #000;
}
/* ─── LAYOUT MODIFIERS ─── */
.fg-layout-horizontal {
flex-direction: row;
align-items: center;
}
.fg-layout-horizontal .fg-box-text {
flex: 1 1 0;
min-width: 0;
padding-right: 20px;
}
.fg-layout-horizontal .fg-box-visual {
flex: 0 0 clamp(320px, 36%, 420px);
min-width: clamp(320px, 36%, 420px);
padding-left: 0;
}
/* ─── BACKGROUND COLORS ─── */
.fg-bg-grey { background-color: #EFECE6; }
.fg-bg-pink { background-color: #F195EC; }
.fg-bg-green { background-color: #5FE88A; }
.fg-bg-orange { background-color: #FCAC5D; }
.fg-bg-blue { background-color: #8CDBFF; }
.fg-bg-yellow { background-color: #F8E76C; }
/* ─── TEXT COLUMN ─── */
.fg-box-text {
padding: 32px 40px 10px 40px;
position: relative;
z-index: 2;
min-width: 0;
}
.fg-box-text h2,
.fg-box-text .fg-box-title {
font-family: 'AnekBangla', 'AnekBangla', 'Inter', system-ui, sans-serif;
font-size: 36px;
font-weight: 400;
line-height: 1.1;
margin-bottom: 16px;
letter-spacing: 0;
color: #1a1a1a;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fg-box-text p {
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.65;
color: #333;
margin-bottom: 0;
max-width: 660px;
font-synthesis: none;
}
/* Subtitle / slogan */
.fg-subtitle {
font-family: 'Agency', 'Inter', sans-serif !important;
font-size: 21px !important;
font-weight: 400 !important;
color: #2d33ef !important;
line-height: 1.2 !important;
margin: 4px 0 0 0 !important;
max-width: none !important;
letter-spacing: 0.01em;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
/* Bullet list — checkbox + tick style matching Operations & Coordination */
.fg-bullet-list {
list-style: none;
margin: 18px 0 0 0;
padding: 0;
display: inline-flex;
flex-direction: column;
align-items: stretch;
flex: 0 0 auto;
max-width: 100%;
align-self: flex-start;
background-image:
radial-gradient(circle closest-side, #0a0a0a 0.85px, transparent 1px),
radial-gradient(circle closest-side, #0a0a0a 0.85px, transparent 1px);
background-size: 8px 2px, 8px 2px;
background-position: 0 0, 0 100%;
background-repeat: repeat-x, repeat-x;
}
.fg-bullet-list li {
font-family: 'Salmond', 'Inter', system-serif, sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 1.32;
color: #1a1a1a;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 10px;
padding: 0.5rem 0;
position: relative;
}
.fg-bullet-list li + li {
background-image: radial-gradient(circle closest-side, #0a0a0a 0.85px, transparent 1px);
background-size: 8px 2px;
background-repeat: repeat-x;
background-position: 0 0;
}
.fg-bullet-list li::before {
content: "";
flex: 0 0 18px;
width: 18px;
height: 18px;
box-sizing: border-box;
border-radius: 0;
border: 1.5px solid #000000;
background-color: #D1FF4B;
position: relative;
align-self: center;
flex-shrink: 0;
}
.fg-bullet-list li::after {
content: "";
position: absolute;
left: 9px;
top: 50%;
width: 10px;
height: 8px;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M2 5.5L5.5 9.2L12 1.8' stroke='%23000' stroke-width='1.35' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
.fg-text-btn-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
margin-top: 40px;
margin-bottom: 24px;
}
/* ─── BUTTON ─── */
.fg-btn {
display: inline-block;
background-color: #D1FF4B;
color: #000;
text-decoration: none;
font-weight: 600;
font-size: 14px;
padding: 12px 32px;
border: 2px solid #000;
box-shadow: 4px 4px 0px #000;
transition: transform 0.15s, box-shadow 0.15s;
white-space: nowrap;
font-family: 'AnekBangla', 'Inter', sans-serif;
}
.fg-btn:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0px #000;
}
.fg-btn:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px #000;
}
/* ─── VISUAL SCENE ─── */
.fg-box-visual {
flex: 1;
min-height: 250px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transform-style: preserve-3d;
transition: transform 0.1s ease-out;
overflow: hidden;
}
/* ─── UI LAYERS ─── */
.fg-ui-layer {
background: #fff;
border: 2px solid #000;
box-shadow: 12px 12px 0px rgba(0,0,0,0.15);
border-radius: 4px;
position: relative;
z-index: 2;
transform: translateZ(40px);
}
/* ─── FLOATING CURSOR ─── */
.fg-cursor {
position: absolute;
z-index: 10;
transform: translateZ(80px) scale(1.3);
pointer-events: none;
filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.2));
}
.fg-fc-yellow { top: 25%; left: 30%; }
.fg-fc-red { top: 40%; right: 20%; }
.fg-fc-blue { bottom: 20%; left: 20%; }
/* ─── CHART CARD ─── */
.fg-chart-card {
width: 380px;
padding: 24px;
background: #fff;
}
.fg-chart-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.fg-chart-title {
font-weight: 600;
font-size: 16px;
}
.fg-chart-body {
position: relative;
height: 100px;
}
.fg-chart-svg {
width: 100%;
height: 100%;
overflow: visible;
}
/* ─── NOTIFICATION CARDS ─── */
.fg-notif-card {
width: min(100%, 280px);
padding: 16px;
background: #fff;
position: absolute;
}
.fg-notif-top {
transform: translateZ(40px) translate(-20px, -20px);
z-index: 3;
}
.fg-notif-bottom {
transform: translateZ(20px) translate(20px, 20px);
z-index: 2;
}
.fg-nc-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 14px;
}
.fg-nc-meta {
font-size: 11px;
color: #666;
margin-bottom: 6px;
display: flex;
gap: 12px;
}
/* ─── LIST CARD ─── */
.fg-list-card {
width: min(100%, 380px);
max-width: 100%;
padding: 24px;
}
.fg-list-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.fg-list-divider {
height: 1px;
background: #eee;
margin: 10px 0 10px 34px;
}
.fg-li-icon {
width: 24px; height: 24px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.fg-li-text strong {
display: block;
font-size: 14px;
margin-bottom: 4px;
color: #111;
}
.fg-li-text p {
font-size: 11px;
line-height: 1.5;
color: #777;
margin: 0;
}
/* ─── BASE / PROGRESS CARD ─── */
.fg-base-card {
width: min(100%, 320px);
max-width: 100%;
background: #fff;
padding: 20px;
}
/* ─── WEEKLY SUMMARY BARS ─── */
.fg-bar-track {
width: 100%;
height: 8px;
background: #eee;
border-radius: 4px;
margin-bottom: 6px;
overflow: hidden;
}
.fg-bar-fill {
height: 100%;
border-radius: 4px;
}
/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
.fg-section {
padding: 0;
}
.fg-section-header {
padding: 56px clamp(18px, 4vw, 28px) 36px;
}
.fg-section-header .ds1-section-subtitle br {
display: none;
}
.fg-grid {
grid-template-columns: 1fr;
}
.fg-box:nth-child(odd) {
border-right: none;
}
.fg-layout-horizontal {
flex-direction: column;
}
.fg-layout-horizontal .fg-box-text {
flex: none;
padding-right: 0;
}
}
/* ===== Solution/css/school-ds14.css ===== */
/* ds14 embed for Solution/school.html */
/* Fully scoped under .school-ds14 to avoid affecting other sections */
.school-ds14 {
position: relative;
overflow: hidden;
background-color: #f4f4f4;
background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
background-size: 18px 18px;
padding: 24px 0 32px;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.school-ds14__grid-bg {
display: none;
}
.school-ds14__container {
position: relative;
z-index: 1;
/* Content band between the old 1460px and the tight 1120px pass */
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(28px, 4.5vw, 56px);
}
.school-ds14__header {
max-width: 980px;
margin: 0 auto;
text-align: center;
}
.school-ds14__badge {
display: inline-flex;
align-items: center;
gap: 10px;
border: 2px solid #1a1a1a;
background: #87f7c3eb;
padding: 6px 16px;
border-radius: 6px;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
.school-ds14__badge-dot {
display: none;
}
.school-ds14__badge-text {
font-family: 'Agency', 'Inter', system-ui, sans-serif !important;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 1;
color: #1a1a1a;
white-space: nowrap;
}
.school-ds14__title {
margin: 12px 0 0;
font-family: 'welfare', 'Inter', system-ui, sans-serif !important;
font-size: 3.2rem;
font-weight: 400;
line-height: 0.94;
letter-spacing: 0.03em;
color: #0f172a;
text-wrap: balance;
}
.school-ds14__title .grad-text {
line-height: 1.12 !important;
padding-bottom: 0.08em;
margin-bottom: -0.08em;
}
.school-ds14__subtitle {
max-width: 1040px;
margin: 12px auto 0;
font-family: 'Salmond', 'Inter', system-ui, sans-serif !important;
font-size: clamp(0.98rem, 1.22vw, 1.18rem);
font-weight: 700;
font-synthesis: none;
line-height: 1.36;
letter-spacing: 0.06em;
/* Darker than .school-ds14__badge fill (#87f7c3) */
color: #010f24;
text-wrap: balance;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.school-ds14__content {
position: relative;
margin-top: 20px;
overflow: hidden;
}
.school-ds14__glow {
pointer-events: none;
position: absolute;
left: 50%;
top: 54%;
width: min(70vw, 1000px);
height: 270px;
opacity: 0;
transform: translate(-50%, -50%) scale(0.9);
transition: opacity 0.75s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 0;
}
.school-ds14__glow,
.school-ds14.is-visible .school-ds14__glow {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.school-ds14__glow::before,
.school-ds14__glow::after {
content: "";
position: absolute;
inset: 0;
border-radius: 999px;
}
.school-ds14__glow::before {
background: radial-gradient(ellipse at center,
rgba(56, 240, 255, 0.92) 0%,
rgba(110, 247, 255, 0.78) 22%,
rgba(255, 232, 62, 0.82) 46%,
rgba(255, 245, 143, 0.46) 66%,
rgba(255, 255, 255, 0) 84%);
filter: blur(50px);
}
.school-ds14__glow::after {
inset: 12%;
background: radial-gradient(ellipse at center,
rgba(122, 248, 255, 0.72) 0%,
rgba(58, 227, 255, 0.58) 24%,
rgba(255, 238, 92, 0.66) 52%,
rgba(255, 250, 189, 0.34) 72%,
rgba(255, 255, 255, 0) 92%);
filter: blur(36px);
}
.school-ds14__grid {
position: relative;
z-index: 1;
display: grid;
gap: 14px;
}
.school-ds14__panel {
position: relative;
overflow: hidden;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 22px;
box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
transition: box-shadow 0.3s ease;
will-change: transform;
}
.school-ds14.is-settled .school-ds14__panel:hover {
box-shadow: 0 22px 56px rgba(17, 24, 39, 0.12);
}
.school-ds14__panel--hero {
background: linear-gradient(135deg, #eff6ff 0%, #ecfeff 58%, #ffffff 100%);
}
.school-ds14__panel--connect {
background: linear-gradient(135deg, #fdf2f8 0%, #fff1f2 50%, #ffffff 100%);
}
.school-ds14__panel--adapt {
background: linear-gradient(135deg, #fffbeb 0%, #fefce8 45%, #ffffff 100%);
}
.school-ds14__panel--confidence {
background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 48%, #ffffff 100%);
}
.school-ds14__panel--trust {
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 50%, #ffffff 100%);
}
/* Pin bottom stacks in stretched grid cells (connect, trust, adapt, operational confidence) */
.school-ds14__panel--connect,
.school-ds14__panel--trust,
.school-ds14__panel--adapt,
.school-ds14__panel--confidence {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.school-ds14__panel--connect .school-ds14__rows,
.school-ds14__panel--trust .school-ds14__status-list,
.school-ds14__panel--adapt .school-ds14__chips,
.school-ds14__panel--confidence .school-ds14__metric-grid {
margin-top: auto;
padding-top: 10px;
}
/* ── Slide-from-stacked reveal — BOTTOM ROW ONLY ──
Adapt and Trust sit perfectly stacked on top of Confidence (looking like a single middle card),
then slide outward when the bottom row scrolls into view. Top row has NO animation. */
.school-ds14__reveal {
transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.school-ds14__panel--confidence {
z-index: 1;
}
.school-ds14__panel--adapt {
z-index: 4;
transform: translate3d(calc(100% + 14px), 0, 0);
box-shadow: -22px 18px 48px rgba(17, 24, 39, 0.18);
}
.school-ds14__panel--trust {
z-index: 5;
transform: translate3d(calc(-100% - 14px), 0, 0);
box-shadow: 22px 18px 48px rgba(17, 24, 39, 0.18);
}
.school-ds14__grid.is-row2-visible .school-ds14__panel--trust {
transform: translate3d(0, 0, 0);
box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
}
.school-ds14__grid.is-row2-visible .school-ds14__panel--adapt {
transform: translate3d(0, 0, 0);
box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
transition-delay: 160ms;
}
.school-ds14.is-settled .school-ds14__reveal {
will-change: auto;
}
@media (max-width: 1023px) {
/* Stacked vertical layout — slide-from-neighbour doesn't make sense; use simple rise-in. */
.school-ds14__panel--adapt,
.school-ds14__panel--trust {
transform: translate3d(0, 24px, 0);
opacity: 0;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
}
.school-ds14__grid.is-row2-visible .school-ds14__panel--adapt,
.school-ds14__grid.is-row2-visible .school-ds14__panel--trust {
transform: none;
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.school-ds14__reveal {
transform: none !important;
transition: none !important;
opacity: 1 !important;
}
}
.school-ds14__floating-pill {
position: absolute;
top: 22px;
right: 22px;
border: 1px solid #bfdbfe;
background: rgba(255, 255, 255, 0.86);
border-radius: 999px;
padding: 6px 12px;
font-family: 'Salmond', 'Inter', system-ui, sans-serif !important;
font-size: 0.8rem;
font-weight: 400;
line-height: 1;
color: #1d4ed8;
backdrop-filter: blur(6px);
white-space: nowrap;
}
.school-ds14__hero-inner {
display: flex;
flex-direction: column;
gap: 20px;
}
.school-ds14__headline {
display: flex;
gap: 12px;
align-items: flex-start;
min-width: 0;
}
/* Reserve right space only on the hero card (floating pill). Other panels reuse .school-ds14__headline and must stay full-width. */
.school-ds14__panel--hero .school-ds14__headline {
padding-right: 250px;
}
.school-ds14__headline > div:last-of-type {
flex: 1 1 auto;
min-width: 0;
}
.school-ds14__icon-box {
width: 52px;
height: 52px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: 0 12px 30px rgba(17, 24, 39, 0.1);
}
.school-ds14__icon-box svg,
.school-ds14__mini-icon svg,
.school-ds14__connect-icon svg {
width: 24px;
height: 24px;
display: block;
}
.school-ds14__icon-box--hero {
background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
color: #86efac;
}
.school-ds14__icon-box--connect {
background: linear-gradient(135deg, #f43f5e 0%, #d946ef 100%);
color: #ffffff;
}
.school-ds14__icon-box--adapt {
background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
color: #111827;
}
.school-ds14__icon-box--confidence {
background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
color: #ffffff;
}
.school-ds14__icon-box--trust {
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
color: #ffffff;
}
.school-ds14__kicker {
margin: 0 0 6px;
font-family: 'Salmond', 'Inter', system-ui, sans-serif !important;
font-size: 0.85rem;
font-weight: 400;
line-height: 1.04;
letter-spacing: 0.26em;
text-transform: uppercase;
}
.school-ds14__kicker--blue {
color: #1d4ed8;
}
.school-ds14__kicker--rose {
color: #e11d48;
}
.school-ds14__kicker--amber {
color: #b45309;
}
.school-ds14__kicker--violet {
color: #6d28d9;
}
.school-ds14__kicker--emerald {
color: #047857;
}
.school-ds14__card-title {
margin: 0 0 0.2em;
font-family: ‘AnekBangla’, ‘AnekBangla’, ‘Inter’, system-ui, sans-serif !important;
font-size: clamp(1.15rem, 1.75vw, 1.65rem);
font-weight: 400;
line-height: 1.0;
color: #0f172a;
letter-spacing: 0;
}
.school-ds14__card-title--hero {
font-size: clamp(1.25rem, 1.9vw, 1.82rem);
line-height: 0.98;
}
.school-ds14__copy {
margin: 0.75rem 0 0;
font-family: 'Salmond', 'Inter', system-ui, sans-serif !important;
font-size: 0.95rem;
font-weight: 400;
line-height: 1.38;
color: #010f24;
}
.school-ds14__mini-grid {
display: grid;
gap: 12px;
margin-top: 18px;
}
.school-ds14__mini-card {
position: relative;
overflow: hidden;
border-radius: 10px;
border: 1px solid transparent;
padding: 14px 14px 14px 14px;
box-shadow: 0 12px 30px rgba(17, 24, 39, 0.1);
}
.school-ds14__mini-card--blue {
background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
border-color: #93c5fd;
}
.school-ds14__mini-card--pink {
background: linear-gradient(135deg, #d946ef 0%, #ec4899 100%);
border-color: #f0abfc;
}
.school-ds14__mini-card--green {
background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
border-color: #86efac;
}
.school-ds14__mini-icon {
width: 34px;
height: 34px;
position: absolute;
bottom: 10px;
right: 10px;
z-index: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
backdrop-filter: blur(6px);
}
.school-ds14__mini-title {
margin: 0 0 6px 0;
position: relative;
z-index: 1;
font-family: 'Agency', 'Inter', system-ui, sans-serif !important;
font-size: 0.96rem;
font-weight: 400;
line-height: 1.12;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.95);
}
/* Distinct title hues per mini card (font size unchanged from .mini-title) */
.school-ds14__mini-card--blue .school-ds14__mini-title {
color: #fef9c3;
}
.school-ds14__mini-card--pink .school-ds14__mini-title {
color: #cffafe;
}
.school-ds14__mini-card--green .school-ds14__mini-title {
color: #fce7f3;
}
.school-ds14__mini-copy {
margin: 4px 0 0;
position: relative;
z-index: 1;
font-family: 'Salmond', 'Inter', system-ui, sans-serif !important;
font-size: 0.78rem;
font-weight: 400;
line-height: 1.25;
color: #010f24;
}
.school-ds14__connect-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.school-ds14__connect-icon {
width: 54px;
height: 54px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: linear-gradient(135deg, #f43f5e 0%, #d946ef 100%);
color: #ffffff;
box-shadow: 0 12px 30px rgba(17, 24, 39, 0.1);
animation: school-ds14-bob 4s ease-in-out infinite;
}
.school-ds14__rows {
display: grid;
gap: 6px;
}
.school-ds14__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-radius: 8px;
border: 1px solid #f1f5f9;
background: rgba(255, 255, 255, 0.82);
padding: 6px 10px;
}
.school-ds14__row-title,
.school-ds14__row-tag,
.school-ds14__chip {
font-family: 'Salmond', 'Inter', system-ui, sans-serif !important;
font-weight: 400;
}
.school-ds14__row-title {
font-size: 0.74rem;
line-height: 1.08;
color: #010f24;
white-space: nowrap;
}
.school-ds14__row-tag {
border-radius: 999px;
padding: 4px 9px;
font-size: 0.66rem;
line-height: 1;
white-space: nowrap;
}
.school-ds14__row-tag--rose {
background: #ffe4e6;
color: #be123c;
}
.school-ds14__row-tag--fuchsia {
background: #fae8ff;
color: #a21caf;
}
.school-ds14__row-tag--pink {
background: #fce7f3;
color: #db2777;
}
.school-ds14__chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
/* Made to Adapt — four chips: 2 per row, smaller type */
.school-ds14__panel--adapt .school-ds14__chips {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 10px;
}
.school-ds14__panel--adapt .school-ds14__chip {
padding: 6px 8px;
font-size: 0.68rem;
justify-content: center;
text-align: center;
}
.school-ds14__chip {
display: inline-flex;
align-items: center;
padding: 9px 12px;
border-radius: 10px;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.9);
font-size: 0.86rem;
line-height: 1;
white-space: nowrap;
}
.school-ds14__chip--amber {
border-color: #fde68a;
color: #a16207;
}
.school-ds14__chip--yellow {
border-color: #fde68a;
color: #a16207;
}
.school-ds14__chip--orange {
border-color: #fdba74;
color: #c2410c;
}
.school-ds14__chip--lime {
border-color: #d9f99d;
color: #3f6212;
}
.school-ds14__metric-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.school-ds14__metric {
border-radius: 10px;
padding: 9px 12px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid #f1f5f9;
font-family: 'Salmond', 'Inter', system-ui, sans-serif !important;
font-size: 0.88rem;
font-weight: 400;
line-height: 1.08;
color: #010f24;
white-space: nowrap;
}
.school-ds14__metric--violet {
border-color: #ede9fe;
}
.school-ds14__metric--indigo {
border-color: #e0e7ff;
}
.school-ds14__metric--fuchsia {
border-color: #fae8ff;
}
.school-ds14__metric--purple {
border-color: #f3e8ff;
}
.school-ds14__panel--confidence .school-ds14__metric-grid {
gap: 6px;
}
.school-ds14__panel--confidence .school-ds14__metric {
font-size: 0.68rem;
padding: 6px 8px;
line-height: 1.05;
border-radius: 8px;
}
.school-ds14__status-list {
display: grid;
gap: 6px;
}
.school-ds14__status-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-radius: 8px;
border: 1px solid #dcfce7;
background: rgba(255, 255, 255, 0.82);
padding: 6px 10px;
}
.school-ds14__status-row--green {
border-color: #dcfce7;
}
.school-ds14__status-row--emerald {
border-color: #d1fae5;
}
.school-ds14__status-row--lime {
border-color: #ecfccb;
}
.school-ds14__status-title {
font-family: 'Salmond', 'Inter', system-ui, sans-serif !important;
font-size: 0.74rem;
font-weight: 400;
line-height: 1.08;
color: #010f24;
white-space: nowrap;
}
.school-ds14__status-dot {
width: 10px;
height: 10px;
border-radius: 999px;
flex: 0 0 auto;
}
.school-ds14__status-dot--emerald {
background: #10b981;
}
.school-ds14__status-dot--green {
background: #22c55e;
}
.school-ds14__status-dot--lime {
background: #84cc16;
}
@keyframes school-ds14-bob {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
@media (prefers-reduced-motion: reduce) {
.school-ds14__panel,
.school-ds14__glow {
transition: none;
}
.school-ds14__reveal {
opacity: 1;
transform: none;
}
.school-ds14__glow {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
@media (min-width: 1024px) {
.school-ds14__glow {
display: block;
}
.school-ds14__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.school-ds14__panel--hero {
grid-column: span 7;
}
.school-ds14__panel--connect {
grid-column: span 5;
}
.school-ds14__panel--adapt,
.school-ds14__panel--confidence,
.school-ds14__panel--trust {
grid-column: span 4;
}
.school-ds14__mini-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1279px) {
.school-ds14__panel--hero .school-ds14__headline {
padding-right: 0;
}
.school-ds14__floating-pill {
position: static;
display: inline-flex;
margin-bottom: 18px;
}
}
@media (max-width: 767px) {
.school-ds14 {
padding: 44px 0 56px;
}
.school-ds14__title {
font-size: clamp(1.65rem, 6.2vw, 2.35rem);
line-height: 0.94;
}
.school-ds14__panel {
padding: 22px;
}
.school-ds14__headline,
.school-ds14__connect-head {
flex-direction: column;
align-items: flex-start;
}
.school-ds14__mini-grid,
.school-ds14__metric-grid {
grid-template-columns: 1fr;
}
.school-ds14__row,
.school-ds14__status-row {
flex-wrap: wrap;
}
.school-ds14__row-title,
.school-ds14__status-title {
white-space: normal;
}
}
/* ===== style/school-hiw-timeline.css ===== */
.school-ds14__card-title,
.school-ds14__card-title--hero {
font-family: 'AnekBangla', 'AnekBangla', 'Inter', system-ui, sans-serif !important;
}
.hiw-school-embed {
--hiw-text-title: #162444;
--hiw-text-body: #6B7280;
--hiw-accent-yellow: #FBBF24;
--hiw-line-color: #C6D3EB;
--hiw-pin-dot: #162444;
--hiw-card-w: 480px;
--hiw-card-h: 182px;
--hiw-slot-h: 218px;
--hiw-gap-h: 96px;
font-family: 'Poppins', system-ui, -apple-system, sans-serif;
color: var(--hiw-text-title);
}
/* Match Schools hero / page body: #f4f4f4 + dot grid */
.hiw-school-embed .hiw-section {
padding: 120px clamp(40px, 6vw, 104px);
box-sizing: border-box;
overflow-x: hidden;
background-color: var(--ds4-bg, #f4f4f4);
background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
background-size: 18px 18px;
margin: 0;
}
/* Match Finance / hiw-header-v2 section header (badge + title) */
.hiw-school-embed .hiw-school-head {
text-align: center;
max-width: 760px;
margin: 0 auto;
padding: 0 16px;
}
.hiw-school-embed .hiw-school-badge {
display: inline-block;
background: #c8f18d;
color: #1a1a1a;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 6px;
border: 2px solid #1a1a1a;
margin-bottom: 8px;
}
.hiw-school-embed .hiw-school-heading {
font-family: 'welfare', 'Inter', system-ui, -apple-system, sans-serif;
font-size: clamp(2rem, 5vw, 3.1rem);
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.04;
color: #1a1a1a;
margin: 0 0 18px 0;
text-transform: none;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hiw-school-embed .hiw-school-heading .grad-text {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
text-transform: none;
font-synthesis: none;
vertical-align: baseline;
}
.hiw-school-embed .hiw-intro {
max-width: min(52rem, 94vw);
margin: 0 auto 32px;
padding: 0;
text-align: center;
}
.hiw-school-embed .hiw-intro-text {
margin: 0;
font-family: 'Salmond', 'Inter', system-ui, -apple-system, sans-serif;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.32;
font-synthesis: none;
/* Darker than .hiw-school-badge fill (#c8f18d) */
color: #3d4a18;
color: color-mix(in srgb, #c8f18d 24%, #1a1a1a 76%);
}
.hiw-school-embed .hiw-window {
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: visible;
scrollbar-width: none;
padding: 14px 4px;
scroll-behavior: smooth;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
.hiw-school-embed .hiw-window::-webkit-scrollbar {
display: none;
}
.hiw-school-embed .hiw-grid {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
width: 100%;
max-width: 2240px;
min-width: 0;
margin: 0 auto;
}
.hiw-school-embed .hiw-timeline-svg {
position: absolute;
top: var(--hiw-slot-h);
left: 0;
width: 100%;
height: var(--hiw-gap-h);
z-index: 0;
pointer-events: none;
}
.hiw-school-embed .hiw-timeline-path {
fill: none;
stroke: var(--hiw-line-color);
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
}
.hiw-school-embed .hiw-col {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
}
.hiw-school-embed .hiw-slot {
width: 100%;
height: var(--hiw-slot-h);
display: flex;
justify-content: center;
}
.hiw-school-embed .hiw-slot.top {
align-items: flex-end;
}
.hiw-school-embed .hiw-slot.bottom {
align-items: flex-start;
}
.hiw-school-embed .hiw-gap {
height: var(--hiw-gap-h);
width: 100%;
}
.hiw-school-embed .hiw-card {
background: #fff;
width: 100%;
max-width: var(--hiw-card-w);
min-width: 0;
height: var(--hiw-card-h);
border-radius: 16px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
padding: 16px 20px 16px 22px;
box-sizing: border-box;
text-align: left;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hiw-school-embed .hiw-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.06);
}
.hiw-school-embed .hiw-card h3 {
margin: 0 0 8px 0;
/* NibPro family has a real SemiBold (600) face; the Salmond alias
does not, so these step headers were rendering as thin regular. */
font-family: 'NibPro', 'Inter', system-ui, sans-serif;
font-size: 19px;
font-weight: 600;
color: var(--hiw-text-title);
/* Extra weight without NibPro-Bold: thicken the glyphs in their own
colour so the step headers read clearly bold. */
-webkit-text-stroke: 0.6px currentColor;
text-stroke: 0.6px currentColor;
}
/* Step titles use the same color as the numbered pin in that column (SVG is grid child 1) */
.hiw-school-embed .hiw-grid > .hiw-col:nth-child(2) .hiw-card h3 {
color: #3B82F6;
}
.hiw-school-embed .hiw-grid > .hiw-col:nth-child(3) .hiw-card h3 {
color: #10B981;
}
.hiw-school-embed .hiw-grid > .hiw-col:nth-child(4) .hiw-card h3 {
color: #F43F5E;
}
.hiw-school-embed .hiw-grid > .hiw-col:nth-child(5) .hiw-card h3 {
color: #dc0bf5;
}
.hiw-school-embed .hiw-grid > .hiw-col:nth-child(6) .hiw-card h3 {
color: #8B5CF6;
}
.hiw-school-embed .hiw-card p {
margin: 0;
padding-left: 2px;
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-size: 15px;
line-height: 1.45;
letter-spacing: 0.025em;
font-synthesis: none;
color: var(--hiw-text-body);
}
.hiw-school-embed .hiw-anchor-dot {
position: absolute;
left: 50%;
width: 12px;
height: 12px;
background-color: var(--hiw-accent-yellow);
border: 3px solid var(--hiw-text-title);
border-radius: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
z-index: 5;
}
.hiw-school-embed .hiw-card.top .hiw-anchor-dot {
bottom: -12px;
}
.hiw-school-embed .hiw-card.bottom .hiw-anchor-dot {
top: 0;
}
.hiw-school-embed .hiw-pin {
display: flex;
flex-direction: column;
align-items: center;
}
.hiw-school-embed .hiw-pin.down {
flex-direction: column;
margin-bottom: 28px;
}
.hiw-school-embed .hiw-pin.up {
flex-direction: column-reverse;
margin-top: 28px;
}
.hiw-school-embed .hiw-pin-circle {
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 50%;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 15px;
color: #ffffff;
}
.hiw-school-embed .hiw-pin-circle.c1 {
background: #3B82F6;
}
.hiw-school-embed .hiw-pin-circle.c2 {
background: #10B981;
}
.hiw-school-embed .hiw-pin-circle.c3 {
background: #F43F5E;
}
.hiw-school-embed .hiw-pin-circle.c4 {
background: #F59E0B;
}
.hiw-school-embed .hiw-pin-circle.c5 {
background: #8B5CF6;
}
.hiw-school-embed .hiw-pin-line {
width: 1px;
height: 56px;
background: var(--hiw-line-color);
}
.hiw-school-embed .hiw-pin-dot {
width: 5px;
height: 5px;
background: var(--hiw-pin-dot);
border-radius: 50%;
}
@media (max-width: 900px) {
.hiw-school-embed .hiw-card {
padding: 14px 14px 14px 16px;
}
.hiw-school-embed .hiw-card h3 {
font-size: 16px;
}
.hiw-school-embed .hiw-card p {
font-size: 15px;
}
}
@media (max-width: 520px) {
.hiw-school-embed .hiw-grid {
min-width: 720px;
}
}
/* ===== style/school-misc-1.css ===== */
#admissions-flow {
--adm-purple: #7c41ff;
--adm-pink: #ec30a1;
--adm-green: #25ae60;
--adm-gold: #ffd126;
--adm-blue: #2563eb;
--adm-orange: #f97316;
--adm-teal: #0d9488;
--adm-card-bg: #f8f8fa;
--adm-card-border: #e4e4e8;
--adm-text: #111111;
--adm-text-muted: #666666;
--adm-ease-out: cubic-bezier(.16, 1, .3, 1);
--adm-ease-inout: cubic-bezier(.4, 0, .2, 1);
--adm-ds1-border: #1a1a1a;
}
/* ===== style/school-finance-section.css ===== */
.hiw-section-wrapper {
background-color: #ffef9e;
background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
background-size: 18px 18px;
color: #1a1a1a;
padding: 80px 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
overflow: hidden;
}
.hiw-container {
max-width: 100%;
margin: 0 auto;
width: 100%;
padding: 0 40px;
}
/* ── Header ── */
.hiw-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0;
padding-bottom: 40px;
}
.hiw-title {
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.01em;
line-height: 1;
}
.hiw-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 22px;
background: #e8440a;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
border-radius: 3px;
transition: background 0.2s;
}
.hiw-cta:hover { background: #c73a08; }
/* ── Steps grid ── */
.hiw-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid #1a1a1a;
border-bottom: none;
align-items: stretch;
}
.hiw-step {
border-right: 1px solid #1a1a1a;
display: flex;
flex-direction: column;
background: #f0ede6;
}
.hiw-step:last-child { border-right: none; }
/* ── Dot spacer at top — height creates stagger ── */
.hiw-step__dots {
background-image: radial-gradient(circle, #d4d1c8 1.4px, transparent 1.4px);
background-size: 13px 13px;
background-color: #f8f6f1;
border-bottom: 1px solid #1a1a1a;
flex-shrink: 0;
}
.hiw-step:nth-child(1) .hiw-step__dots { height: 40px; }
.hiw-step:nth-child(2) .hiw-step__dots { height: 110px; }
.hiw-step:nth-child(3) .hiw-step__dots { height: 180px; }
.hiw-step:nth-child(4) .hiw-step__dots { height: 250px; }
/* Bottom dots — fixed reverse stagger (col1 ends highest, col4 ends lowest) */
.hiw-step:nth-child(1) .hiw-step__dots-bottom { height: 250px; }
.hiw-step:nth-child(2) .hiw-step__dots-bottom { height: 180px; }
.hiw-step:nth-child(3) .hiw-step__dots-bottom { height: 110px; }
.hiw-step:nth-child(4) .hiw-step__dots-bottom { height: 40px; }
/* ── Step content ── */
.hiw-step__content {
padding: 28px 28px 20px;
display: flex;
flex-direction: column;
gap: 13px;
border-bottom: 1px solid #1a1a1a;
background: #fff;
}
.hiw-step__label {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
border: 1.5px solid #1a1a1a;
padding: 3px 9px;
border-radius: 2px;
width: fit-content;
}
.hiw-step__title {
font-family: 'AnekBangla', 'AnekBangla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 30px;
font-weight: 400;
line-height: 1.08;
letter-spacing: 0;
margin-bottom: 0;
}
.hiw-step__desc {
font-size: 14px;
line-height: 1.65;
color: #555;
margin-bottom: 0;
}
.hiw-step__subline {
font-family: 'Agency', 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
color: #9d2112;
line-height: 1.18;
margin: 0;
}
.hiw-step__copy {
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #555;
margin: 14px 0 0;
font-synthesis: none;
}
.hiw-step__content .fg-bullet-list {
margin-top: 18px;
}
.hiw-step__content .fg-bullet-list li {
font-size: 16px;
}
.hiw-step__content .fg-bullet-list li::before {
background-color: #97f7d5;
}
.hiw-step__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #1a1a1a;
text-decoration: none;
}
.hiw-step__link:hover { color: #e8440a; }
/* ── Visual card ── */
.hiw-step__visual {
background: #4a7a58;
flex: 1;
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
position: relative;
overflow: hidden;
}
/* ── Dot strip at bottom — fixed heights create reverse stagger ── */
.hiw-step__dots-bottom {
background-image: radial-gradient(circle, #d4d1c8 1.4px, transparent 1.4px);
background-size: 13px 13px;
background-color: #f8f6f1;
border-top: 1px solid #1a1a1a;
flex-shrink: 0;
}
/* ── Chat UI ── */
.hiw-chat { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.hiw-chat__bubble {
background: rgba(255,255,255,0.93);
border-radius: 6px;
padding: 10px 13px;
font-size: 12px;
line-height: 1.5;
color: #222;
}
.hiw-chat__bubble--reply { background: rgba(255,255,255,0.72); }
.hiw-chat__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.hiw-chat__tag {
background: rgba(255,255,255,0.18);
color: rgba(255,255,255,0.92);
font-size: 10.5px;
font-weight: 600;
padding: 3px 9px;
border-radius: 3px;
border: 1px solid rgba(255,255,255,0.3);
}
/* ── Table UI ── */
.hiw-table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
color: #222;
background: rgba(255,255,255,0.92);
}
.hiw-step__visual--table {
padding: 0;
align-items: stretch;
}
.hiw-table th {
background: rgba(0,0,0,0.07);
padding: 7px 8px;
text-align: left;
font-weight: 600;
font-size: 10px;
color: #444;
white-space: nowrap;
}
.hiw-table td { padding: 5px 8px; border-top: 1px solid rgba(0,0,0,0.06); white-space: nowrap; }
.processing { color: #e8440a; font-weight: 600; }
/* ── Dashboard UI ── */
.hiw-dashboard {
background: rgba(255,255,255,0.92);
border-radius: 6px;
padding: 14px 16px;
width: 100%;
}
.hiw-dashboard__title { font-weight: 600; font-size: 11px; margin-bottom: 12px; color: #333; }
.hiw-dashboard__map {
width: 100%;
height: 100px;
background: linear-gradient(135deg, #d4e8da 0%, #a8cdb5 50%, #7ab090 100%);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.hiw-dashboard__map::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 28% 55%, rgba(255,255,255,0.3) 0%, transparent 50%),
radial-gradient(ellipse at 68% 28%, rgba(80,140,100,0.3) 0%, transparent 40%);
}
/* ── Per-column vibrant label tag backgrounds ── */
.hiw-step:nth-child(1) .hiw-step__label { background: #e11d48; color: #fff; border-color: #e11d48; }
.hiw-step:nth-child(2) .hiw-step__label { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.hiw-step:nth-child(3) .hiw-step__label { background: #0ea5e9; color: #fff; border-color: #0ea5e9; }
.hiw-step:nth-child(4) .hiw-step__label { background: #ea580c; color: #fff; border-color: #ea580c; }
/* Table visual */
.hiw-table { background: transparent !important; }
.hiw-table thead th { background: rgba(0,0,0,0.25) !important; color: rgba(255,255,255,0.75) !important; border-color: rgba(255,255,255,0.15) !important; }
.hiw-table tbody td { border-color: rgba(255,255,255,0.1) !important; }
.hiw-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.05) !important; }
/* ── New section header ── */
.hiw-header-v2 {
text-align: center;
padding-bottom: 52px;
max-width: min(1120px, 94vw);
margin: 0 auto;
}
.hiw-header-v2__badge {
display: inline-block;
background: #6ff1f1;
color: #1a1a1a;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 6px;
border: 2px solid #1a1a1a;
margin-bottom: 8px;
}
.hiw-header-v2__title {
font-family: 'welfare', 'Inter', system-ui, sans-serif;
font-size: clamp(2rem, 5vw, 3.1rem);
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.04;
color: #1a1a1a;
margin: 0 0 18px;
max-width: 100%;
text-wrap: balance;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hiw-header-v2__title .grad-text {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
text-transform: none;
font-synthesis: none;
vertical-align: baseline;
}
.hiw-header-v2__sub {
font-family: 'Agency', 'Inter', system-ui, sans-serif;
font-size: 1.3rem;
color: #9d2112;
line-height: 1.28;
max-width: 760px;
margin: 0 auto;
text-wrap: balance;
}
.hiw-footer {
text-align: center;
margin-top: 56px;
font-size: 13px;
letter-spacing: 0.05em;
color: #999;
}
/* ── Bar-chart visual ── */
.hiw-barchart {
display: flex;
align-items: flex-end;
gap: 8px;
width: 100%;
height: 120px;
padding: 0 4px;
}
.hiw-barchart__bar {
flex: 1;
border-radius: 3px 3px 0 0;
position: relative;
}
.hiw-barchart__bar span {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-weight: 700;
color: rgba(255,255,255,0.85);
white-space: nowrap;
}
.hiw-barchart__bar:nth-child(1) { height: 40%; background: rgba(255,255,255,0.35); }
.hiw-barchart__bar:nth-child(2) { height: 60%; background: rgba(255,255,255,0.5); }
.hiw-barchart__bar:nth-child(3) { height: 85%; background: rgba(255,255,255,0.65); }
.hiw-barchart__bar:nth-child(4) { height: 100%; background: rgba(255,255,255,0.85); }
.hiw-barchart__bar:nth-child(5) { height: 72%; background: rgba(255,255,255,0.55); }
@media (max-width: 900px) {
.hiw-section-wrapper { padding: 40px 20px; }
.hiw-steps { grid-template-columns: 1fr; }
.hiw-step:nth-child(1) .hiw-step__dots,
.hiw-step:nth-child(2) .hiw-step__dots,
.hiw-step:nth-child(3) .hiw-step__dots,
.hiw-step:nth-child(4) .hiw-step__dots { height: 50px; }
.hiw-step:nth-child(1) .hiw-step__dots-bottom,
.hiw-step:nth-child(2) .hiw-step__dots-bottom,
.hiw-step:nth-child(3) .hiw-step__dots-bottom,
.hiw-step:nth-child(4) .hiw-step__dots-bottom { height: 40px; }
}
.hiw-step__dots,
.hiw-step__dots-bottom {
position: relative;
overflow: hidden;
--mx: 50%;
--my: 50%;
}
/* Dark + bigger dot overlay that follows mouse */
.hiw-step__dots::after,
.hiw-step__dots-bottom::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, #5a5750 2.8px, transparent 2.8px);
background-size: 13px 13px;
-webkit-mask-image: radial-gradient(circle 130px at var(--mx) var(--my), black 0%, transparent 100%);
mask-image: radial-gradient(circle 130px at var(--mx) var(--my), black 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.hiw-step__dots.is-hovered::after,
.hiw-step__dots-bottom.is-hovered::after {
opacity: 1;
}
/* ===== style/school-misc-2.css ===== */
/* ─── SECTION WRAPPER ─── */
#school-benefits-bento.ds1-embed {
padding: 24px 40px 100px;
background: #F8F9FA;
}
/* ─── SECTION HEADER ─── */
.ds1-section-header {
text-align: center;
margin-bottom: 48px;
}
.ds1-badge {
display: inline-block;
background: #111;
color: #fff;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 99px;
margin-bottom: 8px;
}
.ds1-section-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: #111;
letter-spacing: -1px;
line-height: 1.15;
margin: 0 0 14px;
}
.ds1-section-subtitle {
font-size: 1rem;
color: #666;
line-height: 1.6;
max-width: 540px;
margin: 0 auto;
}
/* ─── BENTO GRID ─── */
.ds1-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"c1 c1 c2"
"c3 c4 c4"
"c5 c5 c6";
gap: 14px;
}
.ds1-card--1 { grid-area: c1; }
.ds1-card--2 { grid-area: c2; }
.ds1-card--3 { grid-area: c3; }
.ds1-card--4 { grid-area: c4; }
.ds1-card--5 { grid-area: c5; }
.ds1-card--6 { grid-area: c6; }
/* ─── CARDS ─── */
.ds1-card {
border-radius: 20px;
padding: 32px;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
position: relative;
}
.ds1-card--yellow { background: #FFFBEB; }
.ds1-card--white { background: #FFFFFF; border: 1px solid #E5E7EB; }
.ds1-card--mint { background: #F0FDF4; }
.ds1-card--peach { background: #FFF7ED; }
/* ─── CARD TEXT ─── */
.ds1-card__title {
font-size: clamp(1.1rem, 1.6vw, 1.45rem);
font-weight: 800;
color: #111;
letter-spacing: -0.4px;
line-height: 1.2;
margin: 0 0 10px;
}
.ds1-card__desc {
font-size: 0.84rem;
line-height: 1.65;
color: #555;
margin: 0;
max-width: 380px;
}
/* ─── CERTIFICATE ILLUSTRATION ─── */
.ds1-illustration-course {
margin-top: 20px;
background: #fff;
border-radius: 14px;
padding: 16px 18px;
border: 1px solid rgba(0,0,0,0.07);
max-width: 280px;
}
.ds1-illustration-course__icon {
width: 34px;
height: 34px;
background: #F59E0B;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
color: #fff;
}
.ds1-illustration-course__icon svg { width: 16px; height: 16px; }
.ds1-illustration-course__label {
font-size: 0.76rem;
font-weight: 600;
color: #111;
margin-bottom: 10px;
}
.ds1-illustration-course__stats { display: flex; gap: 12px; }
.ds1-illustration-course__stat {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.7rem;
color: #666;
}
.ds1-illustration-course__stat svg { width: 12px; height: 12px; opacity: 0.55; }
/* ─── GAUGE ILLUSTRATION ─── */
.ds1-illustration-gauge {
margin-top: 20px;
background: #fff;
border-radius: 14px;
padding: 14px 16px;
border: 1px solid rgba(0,0,0,0.07);
}
.ds1-gauge-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.ds1-gauge-header__left {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
font-weight: 600;
color: #111;
}
.ds1-gauge-header__dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #22C55E;
display: inline-block;
}
.ds1-gauge-header__right {
display: flex;
align-items: center;
gap: 3px;
font-size: 0.7rem;
color: #888;
}
.ds1-gauge-header__right svg { width: 12px; height: 12px; }
.ds1-gauge-canvas-wrap { width: 100%; overflow: hidden; max-height: 120px; }
.ds1-gauge-canvas { width: 100%; height: auto; display: block; }
.ds1-gauge-footer {
font-size: 0.7rem;
color: #666;
text-align: center;
padding-top: 4px;
}
.ds1-gauge-footer strong { color: #111; }
/* ─── LEADERBOARD ILLUSTRATION ─── */
.ds1-illustration-leaderboard {
margin-top: 20px;
background: #fff;
border-radius: 14px;
padding: 14px 16px;
border: 1px solid rgba(0,0,0,0.07);
}
.ds1-leaderboard__title {
font-size: 0.72rem;
font-weight: 700;
color: #111;
margin-bottom: 8px;
}
.ds1-leaderboard__head {
display: flex;
justify-content: space-between;
font-size: 0.63rem;
color: #999;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
padding-bottom: 5px;
border-bottom: 1px solid #F3F4F6;
margin-bottom: 4px;
}
.ds1-leaderboard__row {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 0;
font-size: 0.72rem;
color: #333;
border-bottom: 1px solid #F9FAFB;
}
.ds1-leaderboard__rank { font-size: 0.78rem; }
.ds1-leaderboard__trend { font-size: 0.58rem; }
.ds1-leaderboard__trend--up { color: #22C55E; }
.ds1-leaderboard__trend--down { color: #EF4444; }
.ds1-leaderboard__avatar {
width: 22px; height: 22px;
border-radius: 50%;
background: #6366F1;
color: #fff;
font-size: 0.63rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ds1-leaderboard__name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
#school-benefits-bento.ds1-embed { padding: 28px 20px 88px; }
.ds1-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"c1 c2"
"c3 c4"
"c5 c6";
}
}
@media (max-width: 600px) {
.ds1-grid {
grid-template-columns: 1fr;
grid-template-areas: "c1" "c2" "c3" "c4" "c5" "c6";
}
}
/* ===== style/school-comms-section.css ===== */
/* Portals bento — body copy mapped to the local Salmond font files */
/* Portals bento — card titles; only ../Fonts/Boldonse-Regular (no other Boldonse files as first hit) */
#school-benefits-bento.ds1-embed {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: #e8e4e0;
background-image: radial-gradient(circle, #d4d0cc 1px, transparent 1px);
background-size: 20px 20px;
padding: 24px 24px 100px;
}
#school-benefits-bento .ds1-section {
width: min(1480px, calc(100% - 240px)) !important;
max-width: none !important;
margin: 0 auto;
padding-top: 0;
margin-top: 0;
}
#school-benefits-bento .ds1-section-header {
text-align: center;
margin-top: 0;
padding-top: 0;
margin-bottom: 40px;
}
#school-benefits-bento .ds1-badge {
display: inline-block;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #1a1a1a;
background: #ffe066;
border: 2px solid #1a1a1a;
border-radius: 6px;
padding: 6px 16px;
margin-bottom: 8px;
}
#school-benefits-bento .ds1-section-title {
font-family: 'welfare', 'Inter', system-ui, sans-serif;
font-size: clamp(2rem, 5vw, 3.1rem);
font-weight: 400;
text-transform: none;
color: #1a1a1a;
line-height: 1.04;
letter-spacing: 0.04em;
margin: 0 0 12px;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#school-benefits-bento .ds1-section-title .grad-text {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
text-transform: none;
font-synthesis: none;
vertical-align: baseline;
}
#school-benefits-bento .ds1-section-subtitle {
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 700;
font-synthesis: none;
/* Darker than #school-benefits-bento .ds1-badge (#ffe066) */
color: #5c4800;
color: color-mix(in srgb, #ffe066 22%, #1a1a1a 78%);
max-width: 780px;
margin: 0 auto;
line-height: 1.5;
}
#school-benefits-bento .ds1-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 20px;
}
#school-benefits-bento .ds1-card {
border: 3px solid #1a1a1a;
border-radius: 2px;
box-shadow: 6px 6px 0 #1a1a1a;
padding: 20px 32px 32px;
position: relative;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
min-height: 160px;
/* Stack content from the top; base .ds1-card uses space-between which adds huge vertical gaps */
justify-content: flex-start;
}
#school-benefits-bento .ds1-card:hover {
transform: translate(-2px, -2px);
box-shadow: 8px 8px 0 #e85d75;
}
#school-benefits-bento .ds1-card--yellow { background: #f0ee6e; }
#school-benefits-bento .ds1-card--white { background: #fff; }
#school-benefits-bento .ds1-card--mint { background: #c5f0e8; }
#school-benefits-bento .ds1-card--peach { background: #f5d5b5; }
#school-benefits-bento .ds1-card--1 {
grid-area: auto;
grid-column: 1 / 3;
grid-row: 1;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 20px;
}
#school-benefits-bento .ds1-card--2 {
grid-area: auto;
grid-column: 3;
grid-row: 1;
}
#school-benefits-bento .ds1-card--3 {
grid-area: auto;
grid-column: 1;
grid-row: 2;
}
#school-benefits-bento .ds1-card--4 {
grid-area: auto;
grid-column: 2 / 4;
grid-row: 2;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 20px;
}
#school-benefits-bento .ds1-card--5 {
grid-area: auto;
grid-column: 1 / 3;
grid-row: 3;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 20px;
}
#school-benefits-bento .ds1-card--6 {
grid-area: auto;
grid-column: 3;
grid-row: 3;
}
#school-benefits-bento .ds1-card__title {
font-family: 'AnekBangla', 'AnekBangla', 'Inter', system-ui, sans-serif;
font-size: clamp(20px, 2.8vw, 32px);
font-weight: 400;
text-transform: none;
color: #1a1a1a;
line-height: 1.08;
letter-spacing: 0;
margin: 0 0 16px;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Normal paragraph copy only — must match a Salmond @font-face weight (400 or 500) */
#school-benefits-bento .ds1-card__desc {
font-family: 'Salmond', 'Inter', system-ui, sans-serif !important;
font-size: 17px;
font-weight: 500;
color: #000;
line-height: 1.22;
margin: 0;
font-synthesis: none;
}
#school-benefits-bento .ds1-illustration-course {
background: #d9d5f0;
border-radius: 10px;
padding: 20px 16px 12px;
max-width: 280px;
justify-self: center;
border: 1.5px solid #c4c0da;
}
#school-benefits-bento .ds1-illustration-course__icon {
width: 36px;
height: 36px;
background: #fff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
color: #7c6cdc;
}
#school-benefits-bento .ds1-illustration-course__icon svg {
width: 20px;
height: 20px;
}
#school-benefits-bento .ds1-illustration-course__label {
font-size: 14px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 14px;
}
#school-benefits-bento .ds1-illustration-course__stats {
display: flex;
gap: 16px;
border-top: 1px solid #c4c0da;
padding-top: 10px;
}
#school-benefits-bento .ds1-illustration-course__stat {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 500;
color: #555;
}
#school-benefits-bento .ds1-illustration-course__stat svg {
width: 14px;
height: 14px;
color: #888;
}
#school-benefits-bento .ds1-illustration-gauge {
background: #fff;
border-radius: 12px;
padding: 16px 20px 14px;
max-width: 280px;
justify-self: center;
border: 1.5px solid #e0e0e0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
#school-benefits-bento .ds1-gauge-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
#school-benefits-bento .ds1-gauge-header__left {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: #1a1a1a;
}
#school-benefits-bento .ds1-gauge-header__dot {
width: 10px;
height: 10px;
background: #4ecdc4;
border-radius: 3px;
}
#school-benefits-bento .ds1-gauge-header__right {
font-size: 11px;
font-weight: 500;
color: #888;
background: #f5f5f5;
padding: 3px 10px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 4px;
}
#school-benefits-bento .ds1-gauge-header__right svg {
width: 10px;
height: 10px;
}
#school-benefits-bento .ds1-gauge-canvas-wrap {
display: flex;
justify-content: center;
margin-bottom: 8px;
}
#school-benefits-bento .ds1-gauge-canvas-wrap canvas {
width: 160px;
height: 100px;
}
#school-benefits-bento .ds1-gauge-footer {
text-align: center;
font-size: 13px;
font-weight: 400;
color: #888;
}
#school-benefits-bento .ds1-gauge-footer strong {
font-weight: 800;
color: #1a1a1a;
}
#school-benefits-bento .ds1-illustration-leaderboard {
background: #fff;
border-radius: 12px;
padding: 20px;
max-width: 320px;
justify-self: center;
border: 1.5px solid #e0e0e0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
#school-benefits-bento .ds1-leaderboard__title {
font-size: 14px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 12px;
}
#school-benefits-bento .ds1-leaderboard__head {
display: flex;
gap: 32px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #aaa;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
}
#school-benefits-bento .ds1-leaderboard__row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
}
#school-benefits-bento .ds1-leaderboard__rank {
width: 28px;
height: 28px;
border-radius: 6px;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: #1a1a1a;
}
#school-benefits-bento .ds1-leaderboard__trend {
font-size: 12px;
line-height: 1;
}
#school-benefits-bento .ds1-leaderboard__trend--up { color: #4ecdc4; }
#school-benefits-bento .ds1-leaderboard__trend--down { color: #e85d75; }
#school-benefits-bento .ds1-leaderboard__avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: #d9d5f0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #6c5ce7;
}
#school-benefits-bento .ds1-leaderboard__name {
font-size: 14px;
font-weight: 500;
color: #1a1a1a;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 900px) {
#school-benefits-bento.ds1-embed {
padding: 28px 20px 88px;
}
#school-benefits-bento .ds1-section {
width: 100% !important;
}
#school-benefits-bento .ds1-grid {
grid-template-columns: 1fr 1fr;
}
#school-benefits-bento .ds1-card--1,
#school-benefits-bento .ds1-card--4,
#school-benefits-bento .ds1-card--5 {
grid-column: 1 / 3;
}
#school-benefits-bento .ds1-card--2 {
grid-column: 1;
grid-row: 2;
}
#school-benefits-bento .ds1-card--3 {
grid-column: 2;
grid-row: 2;
}
#school-benefits-bento .ds1-card--4 {
grid-row: 3;
}
#school-benefits-bento .ds1-card--5 {
grid-row: 4;
}
#school-benefits-bento .ds1-card--6 {
grid-column: 1 / 3;
grid-row: 5;
}
}
@media (max-width: 600px) {
#school-benefits-bento.ds1-embed {
padding: 24px 16px 80px;
}
#school-benefits-bento .ds1-section {
width: 100% !important;
}
#school-benefits-bento .ds1-grid {
grid-template-columns: 1fr;
}
#school-benefits-bento .ds1-card--1,
#school-benefits-bento .ds1-card--2,
#school-benefits-bento .ds1-card--3,
#school-benefits-bento .ds1-card--4,
#school-benefits-bento .ds1-card--5,
#school-benefits-bento .ds1-card--6 {
grid-column: 1;
grid-row: auto;
}
#school-benefits-bento .ds1-card--1,
#school-benefits-bento .ds1-card--4,
#school-benefits-bento .ds1-card--5 {
grid-template-columns: 1fr;
}
}
/* ===== style/school-ds9-docs.css ===== */
/* DS9 card faces — Boldonse-Regular is defined earlier (bento block); Agency + Salmond Regular scoped here */
/* ─── TITLE AREA ─── */
.ds9-title-area {
width: 100%;
padding: 72px 40px 28px;
text-align: center;
background: #FEF8E6;
}
.ds9-title-area .ds1-section-header {
max-width: 760px;
margin: 0 auto;
}
.ds9-title-area .ds1-badge {
display: inline-block;
background: #f29ee6;
color: #1a1a1a;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 18px;
border-radius: 6px;
border: 2px solid #1a1a1a;
margin-bottom: 8px;
}
.ds9-title-area .ds1-section-title {
font-family: 'welfare', 'Inter', system-ui, sans-serif;
font-size: clamp(2rem, 5vw, 3.1rem);
font-weight: 400;
color: #111;
text-transform: none;
letter-spacing: 0.04em;
line-height: 1.04;
margin: 0 0 14px;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ds9-title-area .ds1-section-subtitle {
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-size: 1rem;
font-weight: 700;
font-synthesis: none;
/* Darker than .ds9-title-area .ds1-badge (#f29ee6) */
color: #5a2454;
color: color-mix(in srgb, #f29ee6 22%, #1a1a1a 78%);
line-height: 1.7;
margin: 0 auto;
max-width: 600px;
text-align: center;
}
/* ─── PINNED VIEWPORT ─── */
.ds9-stats-wrapper {
position: relative;
background: #FEF8E6;
}
.ds9-stats-section {
width: 100%;
height: calc(100vh - 56px);
min-height: 620px;
overflow: hidden;
position: sticky;
top: 56px;
background: #FEF8E6;
}
/* ─── CARDS CONTAINER ─── */
/* Default: flex (older browsers). Subgrid browsers: four columns share row tracks so bullet rows line up. */
.ds9-cards-container {
display: flex;
width: 100%;
height: 100%;
min-height: 0;
}
@supports (grid-template-rows: subgrid) {
.ds9-cards-container {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: auto auto minmax(0, 1fr) auto minmax(0, 34%);
column-gap: 0;
row-gap: 0.65rem;
}
.ds9-card {
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / span 5;
}
.ds9-card:nth-child(1) { grid-column: 1; }
.ds9-card:nth-child(2) { grid-column: 2; }
.ds9-card:nth-child(3) { grid-column: 3; }
.ds9-card:nth-child(4) { grid-column: 4; }
.ds9-card-content {
display: contents;
}
.ds9-description {
display: contents;
}
}
/* ─── INDIVIDUAL CARDS ─── */
.ds9-card {
flex: 1;
height: 100%;
min-height: 0;
position: relative;
overflow: hidden;
will-change: transform;
/* Start fully off-screen below */
transform: translateY(100%);
/* Diagonal cut on top — left side is higher, right side dips down */
clip-path: polygon(0 0%, 100% 7%, 100% 100%, 0 100%);
box-sizing: border-box;
--ds9-card-pad-x: clamp(16px, 2vw, 34px);
--ds9-card-pad-t: clamp(16px, 2.2vw, 36px);
}
@supports (grid-template-rows: subgrid) {
.ds9-card {
flex: unset;
padding: var(--ds9-card-pad-t) var(--ds9-card-pad-x) 0;
}
}
/* Monochrome card surface */
.ds9-card:nth-child(1),
.ds9-card:nth-child(2),
.ds9-card:nth-child(3),
.ds9-card:nth-child(4) {
background: #000;
}
/* Thin dividers */
.ds9-card + .ds9-card {
border-left: 1px solid rgba(232, 31, 61, 0.85);
}
/* ─── CARD TEXT AREA ─── */
.ds9-card-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 34%;
padding: clamp(16px, 2.2vw, 36px) clamp(16px, 2vw, 34px) clamp(16px, 2.2vh, 24px);
color: white;
z-index: 2;
overflow: hidden;
}
@supports (grid-template-rows: subgrid) {
.ds9-card-content {
position: static;
top: auto;
left: auto;
right: auto;
bottom: auto;
padding: 0;
overflow: visible;
}
.ds9-stats-wrapper .ds9-card > .ds9-metric,
.ds9-stats-wrapper .ds9-card > .ds9-card-slogan,
.ds9-stats-wrapper .ds9-card > .ds9-desc-lead,
.ds9-stats-wrapper .ds9-card > .ds9-desc-list {
position: relative;
z-index: 2;
}
.ds9-stats-wrapper .ds9-card > .ds9-metric,
.ds9-stats-wrapper .ds9-card > .ds9-card-slogan,
.ds9-stats-wrapper .ds9-card > .ds9-desc-lead {
align-self: start;
}
.ds9-stats-wrapper .ds9-card > .ds9-desc-lead {
margin: clamp(12px, 1.35vh, 18px) 0 0 0;
max-width: min(320px, 100%);
}
.ds9-stats-wrapper .ds9-card > .ds9-desc-list {
align-self: start;
margin: 0;
}
}
.ds9-stats-wrapper .ds9-metric {
font-family: 'AnekBangla', 'AnekBangla', system-ui, -apple-system, sans-serif;
font-size: 30px;
font-weight: 400;
line-height: 1.08;
margin: 0 0 0.35rem;
letter-spacing: 0;
white-space: normal;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ds9-stats-wrapper .ds9-card:nth-child(1) .ds9-metric { color: #ffcc29; }
.ds9-stats-wrapper .ds9-card:nth-child(2) .ds9-metric { color: #41f28a; }
.ds9-stats-wrapper .ds9-card:nth-child(3) .ds9-metric { color: #a66cff; }
.ds9-stats-wrapper .ds9-card:nth-child(4) .ds9-metric { color: #30d5ff; }
.ds9-metric sup {
font-size: 0.42em;
vertical-align: super;
letter-spacing: 0;
font-weight: 400;
}
.ds9-stats-wrapper .ds9-card-slogan {
font-family: 'Agency', 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
font-style: normal;
margin: 0 0 0.25rem;
line-height: 1.2;
letter-spacing: 0.06em;
font-synthesis: none;
opacity: 0.92;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ds9-stats-wrapper .ds9-card:nth-child(1) .ds9-card-slogan { color: #ffe78a; }
.ds9-stats-wrapper .ds9-card:nth-child(2) .ds9-card-slogan { color: #a2ffc6; }
.ds9-stats-wrapper .ds9-card:nth-child(3) .ds9-card-slogan { color: #d4b2ff; }
.ds9-stats-wrapper .ds9-card:nth-child(4) .ds9-card-slogan { color: #98ebff; }
.ds9-description {
line-height: 1.08;
opacity: 0.95;
max-width: min(320px, 100%);
margin: 0;
}
/* Body copy only - Salmond Medium @font-face is defined earlier in this page (bento block) */
.ds9-stats-wrapper .ds9-desc-lead {
margin: clamp(10px, 1.1vh, 14px) 0 clamp(10px, 1.2vh, 14px);
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.45;
letter-spacing: 0;
color: rgba(226, 226, 226, 0.82);
font-synthesis: none;
}
/* List pattern aligned with Operations & Coordination (.id-card.id-vrow2 .id-card-body ul/li) — dotted rules + checkbox + tick */
.ds9-stats-wrapper .ds9-desc-list {
--ds9-rule-dot: rgba(255, 255, 255, 0.42);
display: flex;
flex-direction: column;
align-items: stretch;
flex: 0 0 auto;
max-width: 100%;
align-self: flex-start;
list-style: none;
margin: 0.85rem 0 0;
gap: 0;
padding: 0.38rem 0;
background-image:
radial-gradient(circle closest-side, var(--ds9-rule-dot) 0.85px, transparent 1px),
radial-gradient(circle closest-side, var(--ds9-rule-dot) 0.85px, transparent 1px);
background-size: 8px 2px, 8px 2px;
background-position: 0 0, 0 100%;
background-repeat: repeat-x, repeat-x;
}
.ds9-stats-wrapper .ds9-desc-list li {
font-family: 'Salmond', 'Inter', system-ui, sans-serif;
font-size: 16px;
line-height: 1.26;
font-weight: 400;
color: rgba(226, 226, 226, 0.82);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
gap: 0.42rem;
margin: 0;
padding: 0.34rem 0;
position: relative;
}
.ds9-stats-wrapper .ds9-desc-list li + li {
padding-top: 0.44rem;
margin-top: 0;
background-image: radial-gradient(circle closest-side, var(--ds9-rule-dot) 0.85px, transparent 1px);
background-size: 8px 2px;
background-repeat: repeat-x;
background-position: 0 0;
}
.ds9-stats-wrapper .ds9-desc-list li::before {
content: "";
flex: 0 0 18px;
width: 18px;
height: 18px;
box-sizing: border-box;
border-radius: 0;
border: 1.5px solid #000000;
background-color: var(--ds9-check-accent, #fde047);
box-shadow: none;
position: relative;
left: auto;
top: auto;
margin: 0;
transform: none;
align-self: center;
}
/* Checkbox fills now match the header color families */
.ds9-stats-wrapper .ds9-card:nth-child(1) .ds9-desc-list li::before { background-color: #ffcc29; }
.ds9-stats-wrapper .ds9-card:nth-child(2) .ds9-desc-list li::before { background-color: #41f28a; }
.ds9-stats-wrapper .ds9-card:nth-child(3) .ds9-desc-list li::before { background-color: #a66cff; }
.ds9-stats-wrapper .ds9-card:nth-child(4) .ds9-desc-list li::before { background-color: #30d5ff; }
.ds9-stats-wrapper .ds9-desc-list li::after {
content: "";
position: absolute;
left: 9px;
top: 50%;
width: 10px;
height: 8px;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M2 5.5L5.5 9.2L12 1.8' stroke='%23000' stroke-width='1.35' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
.ds9-description strong {
font-weight: 500;
}
/* ─── CARD PHOTO ─── */
.ds9-card-photo {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 34%;
overflow: hidden;
border-top: 0;
background: #000;
z-index: 1;
}
@supports (grid-template-rows: subgrid) {
.ds9-card-photo {
position: relative;
bottom: auto;
left: auto;
right: auto;
height: 100%;
min-height: 0;
width: calc(100% + 2 * var(--ds9-card-pad-x, 0px));
margin-left: calc(-1 * var(--ds9-card-pad-x, 0px));
margin-right: calc(-1 * var(--ds9-card-pad-x, 0px));
align-self: stretch;
}
}
.ds9-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(0.72) saturate(0.78);
mix-blend-mode: luminosity;
opacity: 0.68;
}
/* ─── OUTRO ─── */
.ds9-outro {
min-height: clamp(120px, 18vh, 200px);
padding: 40px 28px 48px;
margin-bottom: 96px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(
118deg,
#07060d 0%,
#14102e 18%,
#2a1240 38%,
#0c2744 58%,
#1a1538 78%,
#0a1f1c 100%
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ds9-outro p {
font-family: 'AnekBangla', 'AnekBangla', system-ui, sans-serif;
font-size: clamp(1.5rem, 4vw, 3rem);
color: #fafafa;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
text-align: center;
text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}
/* ===== style/school-ds2-security.css ===== */
:root {
--ds2-bg: #f4f4f4;
--ds2-card: #8bdad7;
--ds2-grid-line: transparent;
--ds2-text: #10131a;
--ds2-muted: #3f3f49;
--ds2-link: #5847f5;
--ds2-accent: #c5ef72;
--ds2-accent-soft: #d9f89a;
--ds2-accent-border: #b6dd6a;
--ds2-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
--ds2-card-height: 205px;
}
.ds2-benefits {
width: 100%;
margin: 0;
padding: 60px 46px;
box-sizing: border-box;
font-family: 'Salmond', 'Manrope', 'Segoe UI', sans-serif;
color: var(--ds2-text);
background-color: #f4f4f4;
background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
background-size: 18px 18px;
}
.ds2-header {
position: relative;
text-align: left;
grid-column: span 2;
margin-bottom: 0;
animation: ds2-rise 640ms var(--ds2-smooth) both;
}
.ds2-top {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
align-items: end;
margin-bottom: 1px;
}
.ds2-badge {
display: inline-block;
font-family: 'Agency', 'Inter', system-ui, sans-serif;
background: #fea55b;
color: #1a1a1a;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 18px;
border-radius: 6px;
border: 2px solid #1a1a1a;
margin-bottom: 10px;
}
.ds2-badge-dot {
display: none;
}
.ds2-badge-dot::before {
display: none;
}
.ds2-title {
margin: 4px 0 10px;
max-width: 680px;
font-size: clamp(26px, 3vw, 42px);
letter-spacing: -0.01em;
line-height: 1.06;
font-weight: 400;
color: #080c1a;
font-family: 'Welfare', serif;
}
.ds2-subtitle {
margin: 0;
max-width: 720px;
font-size: clamp(13px, 0.98vw, 16px);
font-weight: 700;
line-height: 1.46;
letter-spacing: 0.03em;
font-synthesis: none;
font-family: 'Salmond', 'Manrope', sans-serif;
/* Darker than .ds2-badge fill (#fea55b) */
color: #6a3a0a;
color: color-mix(in srgb, #fea55b 24%, #1a1a1a 76%);
}
.ds2-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
margin-bottom: 28px;
}
.ds2-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 20px;
border: 1px solid rgba(16, 19, 26, 0.14);
background: rgba(255, 255, 255, 0.34);
color: #243047;
text-decoration: none;
font-size: clamp(12px, 0.82vw, 14px);
line-height: 1;
font-weight: 800;
letter-spacing: 0.06em;
font-family: 'Salmond', 'Manrope', sans-serif;
}
.ds2-btn--primary {
background: #0b1220;
color: #ffffff;
border-color: #0b1220;
}
.ac-home-hero__button3d {
display: inline-block;
min-width: 188px;
padding: 12px 32px;
border: 2px solid #000;
background-color: #d1ff4b;
box-shadow: 4px 4px 0 #000;
color: #000;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
text-align: center;
white-space: nowrap;
transition: transform 0.15s, box-shadow 0.15s;
}
.ac-home-hero__button3d--alt {
background-color: #7fe7ff;
}
.ac-home-hero__button3d:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 #000;
}
.ac-home-hero__button3d:active {
transform: translate(4px, 4px);
box-shadow: 0 0 0 #000;
}
.ds2-layout {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
align-items: start;
background: var(--ds2-grid-line);
border-radius: 26px;
overflow: visible;
}
.ds2-column {
display: grid;
grid-template-rows: repeat(3, var(--ds2-card-height));
gap: 1px;
background: var(--ds2-grid-line);
border-radius: 26px;
}
.ds2-card {
position: relative;
overflow: hidden;
background: var(--ds2-card);
border: 0;
border-radius: 26px;
padding: 24px 68px 12px 34px;
height: var(--ds2-card-height);
display: flex;
flex-direction: column;
justify-content: flex-start;
box-shadow: none;
cursor: default;
outline: none;
animation: ds2-rise 640ms var(--ds2-smooth) both;
z-index: 1;
}
.ds2-card--color1,
.ds2-card--color2,
.ds2-card--color3,
.ds2-card--color4,
.ds2-card--color5,
.ds2-card--color6,
.ds2-card--color7,
.ds2-card--color8,
.ds2-card--color9 {
background: var(--ds2-card);
}
.ds2-top-card {
height: var(--ds2-card-height);
align-self: end;
}
.ds2-image-card {
padding: 0;
height: var(--ds2-card-height);
min-height: 0;
}
.ds2-image-card img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: block;
object-fit: cover;
object-position: center;
border-radius: inherit;
}
.ds2-column .ds2-card:nth-child(1) {
animation-delay: 120ms;
}
.ds2-column .ds2-card:nth-child(2) {
animation-delay: 190ms;
}
.ds2-column .ds2-card:nth-child(3) {
animation-delay: 260ms;
}
.ds2-card-head {
display: block;
margin-bottom: 18px;
}
.ds2-card-icon {
position: absolute;
top: 26px;
right: 28px;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #f8f3e8;
color: #0b1220;
border: 1px solid rgba(11, 18, 32, 0.08);
}
.ds2-card-icon svg {
width: 17px;
height: 17px;
stroke-width: 2;
}
.ds2-card-title {
margin: 0;
font-size: clamp(18px, 1.1vw, 24px);
line-height: 1.12;
letter-spacing: 0.02em;
font-weight: 800;
color: #050505;
font-family: 'Salmond', 'Manrope', sans-serif;
}
.ds2-card-desc {
margin: 0;
padding-bottom: 4px;
max-width: 42ch;
color: var(--ds2-muted);
font-size: clamp(14px, 0.88vw, 18px);
line-height: 1.38;
letter-spacing: 0.04em;
font-weight: 500;
font-family: 'Salmond', 'Manrope', sans-serif;
}
.ds2-card:focus-visible {
outline: 2px solid var(--ds2-link);
outline-offset: -6px;
}
.ds2-info-card {
height: var(--ds2-card-height);
}
.ds2-info-card .ds2-card-desc {
max-width: 48ch;
}
@keyframes ds2-rise {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1260px) {
:root {
--ds2-card-height: 205px;
}
.ds2-layout {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ds2-card {
padding: 26px 58px 24px 30px;
}
}
@media (max-width: 1040px) {
.ds2-layout {
grid-template-columns: 1fr;
gap: 1px;
}
.ds2-top {
grid-template-columns: 1fr;
}
.ds2-header {
grid-column: auto;
margin-bottom: 24px;
}
.ds2-column {
grid-template-columns: 1fr;
grid-template-rows: repeat(3, var(--ds2-card-height));
gap: 1px;
}
}
@media (max-width: 760px) {
.ds2-benefits {
padding: 22px 14px 28px;
}
.ds2-header {
margin-bottom: 24px;
}
.ds2-badge {
gap: 8px;
padding: 6px 12px 6px 8px;
font-size: 9px;
letter-spacing: 0.16em;
}
.ds2-badge-dot {
width: 20px;
height: 20px;
}
.ds2-badge-dot::before {
width: 8px;
height: 8px;
}
.ds2-title {
margin: 16px 0 10px;
font-size: clamp(25px, 6.7vw, 34px);
letter-spacing: -0.035em;
line-height: 1.08;
}
.ds2-subtitle {
font-size: 13px;
line-height: 1.45;
letter-spacing: 0.01em;
}
.ds2-actions {
gap: 12px;
margin-top: 16px;
margin-bottom: 22px;
}
.ds2-btn {
min-height: 40px;
padding: 0 16px;
font-size: 12px;
}
.ds2-column {
grid-template-columns: 1fr;
}
.ds2-card {
padding: 24px 54px 24px 24px;
}
.ds2-card-icon {
top: 22px;
right: 22px;
width: 30px;
height: 30px;
}
.ds2-card-head {
margin-bottom: 16px;
}
}
@media (max-width: 680px) {
.ac-home-hero__button3d {
width: 100%;
min-width: 0;
}
}
/* ===== style/school-faq-extra.css ===== */
/* Section header pill normalization: keep each section's existing colors */
.ds4-badge,
.pp-problem-badge,
.school-ds14__badge,
.hiw-school-embed .hiw-school-badge,
#admissions-flow .adm-badge,
.school-id-gov-embed .id-gov-kicker,
.hiw-header-v2__badge,
.ds1-section-header .ds1-badge,
#school-numbers .numbers-pill,
.ds2-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
box-sizing: border-box !important;
padding: 6px 16px !important;
border-width: 2px !important;
border-style: solid !important;
border-radius: 6px !important;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
font-family: 'Agency', 'Inter', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
line-height: 1 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.pp-problem-badge-text,
.school-ds14__badge-text {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
line-height: inherit !important;
text-transform: inherit !important;
}
/* Page-wide body copy normalization: paragraphs + bullet text only */
.pp-intro-para,
.pp-card-para,
.school-id-gov-embed .id-card-body p:not(.id-card-slogan),
.fg-box-text .fg-text-btn-row > p,
.fg-li-text p,
.hiw-step__desc,
.hiw-step__copy,
.ds1-card__desc,
#school-arrow2 .stat-card__body > p:not(.stat-card__slogan),
#school-numbers .numbers-desc,
#school-numbers .stat-card__body--ops > p:not(.stat-card__slogan),
.ds5-intro__desc,
.ds5-card__desc,
.tree-preview-panel .simple-preview-footer,
.hierarchy-shell p[class~="mt-1"][class~="text-sm"][class~="text-slate-700"],
.hierarchy-shell p[class~="mt-1"][class~="text-sm"][class~="text-slate-600"],
.hierarchy-shell p[class~="mt-2"][class~="text-sm"][class~="text-slate-600"][class~="leading-relaxed"] {
font-family: 'Salmond', 'Inter', system-ui, sans-serif !important;
font-size: 17px !important;
font-synthesis: none !important;
}
.ssc-stat-desc,
.ssc-cta-sub {
display: block !important;
margin: 0 !important;
font-family: 'Salmond', 'Inter', system-ui, sans-serif !important;
font-size: 16px !important;
line-height: 1.28 !important;
letter-spacing: 0 !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
text-wrap: wrap !important;
overflow-wrap: break-word !important;
font-synthesis: none !important;
}
.school-id-gov-embed .id-card-body li,
.fg-bullet-list li,
.hiw-step__content .fg-bullet-list li,
#school-numbers .stat-card__body--ops li,
.hierarchy-shell ul[class~="text-slate-600"] > li {
font-family: 'Salmond', 'Inter', system-ui, sans-serif !important;
font-size: 17px !important;
font-synthesis: none !important;
}
#school-arrow2 .stat-card__body > p:not(.stat-card__slogan) {
font-size: 15px !important;
line-height: 1.48 !important;
margin-bottom: 8px !important;
}
/* ===== style/school-responsive.css ===== */
html,
body {
max-width: 100vw !important;
overflow-x: clip !important;
}
/* ===================================================================
SCHOOL RESPONSIVE — page-wide responsive safety net
Loaded LAST in school.html so it overrides component CSS.
Only catches the gaps that individual section CSS files missed.
=================================================================== */
/* ─────────── Tablet / small laptop (≤1100px) ─────────── */
@media (max-width: 1100px) {
/* Universal section padding cap — anything trying to use 95px+ on sides on a tablet */
.ds5-care-shell,
.school-ds14__container,
.hiw-school-embed .hiw-section,
.hiw-section-wrapper,
.fg-section-header,
.ds2-benefits,
.school-faq-section__title,
.ds9-title-area,
.school-stats-section-intro {
padding-left: clamp(20px, 4vw, 56px) !important;
padding-right: clamp(20px, 4vw, 56px) !important;
}
/* DS9 Docs (Documents, Compliance & Automation) — no native MQ */
.ds9-shell,
.ds9-grid,
.ds9-stack,
.ds9-column {
max-width: 100% !important;
}
.ds9-grid {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.ds9-card {
max-width: 100% !important;
}
/* Finance section grid */
.hiw-grid,
.hiw-cards-grid,
.hiw-step-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Marquee bands — text scaling */
.tsb-slide-text {
font-size: clamp(1rem, 2.4vw, 1.6rem) !important;
word-spacing: 0.25em !important;
}
.tsb-marquee-track { padding: 18px 0 !important; }
}
/* ─────────── Mobile portrait (≤768px) ─────────── */
@media (max-width: 768px) {
/* Page-wide horizontal padding cap */
.ds5-care-shell,
.school-ds14__container,
.hiw-school-embed .hiw-section,
.hiw-section-wrapper,
.fg-section-header,
.ds2-benefits,
.ds9-title-area,
.school-stats-section-intro,
.school-faq-section,
.ds2-top,
.ds2-layout {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* All grids → 1 column on mobile */
.school-ds14__grid,
.school-ds14__mini-grid,
.school-ds14__rows,
.school-ds14__metric-grid,
.school-ds14__chips,
.school-ds14__status-list,
.ds5-care-grid,
.ds9-grid,
.hiw-grid,
.hiw-cards-grid,
.hiw-step-grid,
.ds2-layout {
grid-template-columns: 1fr !important;
grid-template-areas: none !important;
gap: 14px !important;
}
/* DS5 cards — let them flow in their own area when grid breaks */
.ds5-card,
.ds5-cta-card,
.ds5-intro {
grid-area: auto !important;
max-width: 100% !important;
}
/* DS5 grid auto-rows shouldn't constrain mobile */
.ds5-care-grid {
grid-auto-rows: auto !important;
}
/* DS2 Security — column stack */
.ds2-column,
.ds2-column--left,
.ds2-column--middle,
.ds2-column--right {
width: 100% !important;
max-width: 100% !important;
}
.ds2-card {
min-height: auto !important;
}
/* Hero / page titles fluid scaling — only if a section didn't already use clamp() */
.ds4-title { font-size: clamp(2rem, 8vw, 3rem) !important; line-height: 1.05 !important; }
.ds4-subtitle { font-size: clamp(0.95rem, 3.6vw, 1.15rem) !important; }
.school-ds14__title { font-size: clamp(1.7rem, 6.8vw, 2.4rem) !important; }
.hiw-header-v2__title { font-size: clamp(1.5rem, 6vw, 2.1rem) !important; }
.ds2-title { font-size: clamp(1.5rem, 6vw, 2.1rem) !important; }
.hiw-school-heading { font-size: clamp(1.6rem, 6.4vw, 2.2rem) !important; }
/* Section pillars/badges row — wrap on mobile */
.ds4-btn-group {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.ds4-btn {
text-align: center !important;
}
/* Stats horizontal scroll — let cards remain scrollable */
[data-stats-card] {
flex: 0 0 min(82vw, 320px) !important;
min-height: min(680px, calc(100svh - 116px)) !important;
}
[data-stats-scroll-track] {
padding: 0 16px 32px !important;
gap: 14px !important;
}
/* Marquee bands — smaller on mobile */
.tsb-slide-text {
font-size: clamp(0.85rem, 3.6vw, 1.2rem) !important;
padding: 0 18px !important;
word-spacing: 0.2em !important;
}
.tsb-marquee-track { padding: 12px 0 !important; }
.tsb-flower-icon { margin: 0 8px !important; }
.tsb-flower-icon svg { width: 22px !important; }
.tsb-wrap { margin: 18px 0 !important; padding: 14px 0 !important; }
/* FAQ wrap */
.faq-wrap .px-12 { padding-left: 16px !important; padding-right: 16px !important; }
.school-faq-section__title { font-size: clamp(1.4rem, 5.6vw, 2rem) !important; }
/* Pain Points cards stack */
.pp-section { grid-template-columns: 1fr !important; padding: 36px 18px !important; }
.pp-cards-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
.pp-intro-title { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
/* Teaching/DS8 grid */
.fg-grid { grid-template-columns: 1fr !important; }
.fg-box { min-height: auto !important; }
.fg-layout-horizontal { flex-direction: column !important; }
.fg-box-text { padding: 24px 22px !important; }
.fg-box-text h2,
.fg-box-text .fg-box-title { font-size: clamp(1.4rem, 6vw, 1.9rem) !important; }
.fg-box-text p { font-size: 15px !important; }
.fg-section-header { padding: 48px 20px 8px !important; }
}
/* ─────────── Small phone (≤480px) ─────────── */
@media (max-width: 480px) {
.ds5-care-shell,
.school-ds14__container,
.hiw-school-embed .hiw-section,
.hiw-section-wrapper,
.ds2-top,
.ds2-layout,
.ds9-title-area {
padding-left: 12px !important;
padding-right: 12px !important;
}
.ds4-title { font-size: clamp(1.7rem, 9vw, 2.3rem) !important; }
.ds4-subtitle { font-size: 0.95rem !important; }
/* Card padding tighter on tiny screens */
.school-ds14__panel,
.ds2-card {
padding: 16px !important;
}
}
/* ===================================================================
ROOT-CAUSE MOBILE FIXES (added) — these target the REAL component
class names and disable scroll-pinned / horizontally-scrolled layouts
that only work on desktop. Ordered after the legacy rules above so
they win. Breakpoints: 900px (matches the DS9/DS7 JS guard), 768px,
480px.
=================================================================== */
/* ---- Global horizontal-overflow guard (all widths) ----
Keep this off : Chrome treats html overflow clipping as a sticky
boundary, which breaks the DS9 scroll panel. Guard the body instead. */
body { overflow-x: hidden; }
@media (max-width: 1100px) {
html, body {
max-width: 100% !important;
}
body { overflow-x: hidden !important; }
img { max-width: 100%; height: auto; }
}
/* ─────────── Tablet & phone (≤900px) — unpin scroll-driven sections ─────────── */
@media (max-width: 900px) {
/* ===== HERO ===== keep the playful floating tags + shapes, but shrink them
hard and tuck them into the corners/edges so they frame the hero instead
of overlapping the centered title. */
.ds4-hero { padding-top: 46px !important; }
.ds4-hero .ds4-floating-elements { display: block !important; }
.ds4-hero .ds4-tag {
font-size: 0.56rem !important;
padding: 3px 7px !important;
gap: 4px !important;
border-width: 2px !important;
border-radius: 6px !important;
box-shadow: 2px 2px 0 #000 !important;
white-space: nowrap !important;
}
.ds4-hero .ds4-tag-icon { font-size: 0.68rem !important; }
.ds4-hero .brutal-square {
width: 20px !important;
height: 20px !important;
border-width: 2px !important;
box-shadow: 2px 2px 0 #000 !important;
}
.ds4-hero .brutal-svg-wrap { filter: drop-shadow(2px 2px 0 #000) !important; }
.ds4-hero .brutal-svg-wrap svg { width: 24px !important; height: 24px !important; }
/* Override the desktop vw coordinates → pin to corners/edges. Top tags sit
in the padding band above the badge; mid shapes hug the side gutters;
bottom tags sit low. */
.ds4-hero .ds4-shape.t3 { top: 4px !important; left: 4px !important; right: auto !important; bottom: auto !important; } /* Secure Data — top-left */
.ds4-hero .ds4-shape.t1 { top: 4px !important; right: 4px !important; left: auto !important; bottom: auto !important; } /* Easy Setup — top-right */
.ds4-hero .ds4-shape.s1 { top: 30% !important; left: 0 !important; right: auto !important; bottom: auto !important; } /* star — mid-left */
.ds4-hero .ds4-shape.s2 { top: 27% !important; right: 2px !important; left: auto !important; bottom: auto !important; } /* square — mid-right */
.ds4-hero .ds4-shape.t2 { bottom: 9% !important; left: 4px !important; top: auto !important; right: auto !important; } /* School Ready — bottom-left */
.ds4-hero .ds4-shape.t4 { bottom: 6% !important; right: 4px !important; top: auto !important; left: auto !important; } /* Scales With You — bottom-right */
/* ===== DS7 "Academic Structure" works cards =====
Cards are position:sticky and stack/overlap as you scroll. On mobile
that produces the overlapping-text mess — let them flow normally. */
/* ===== DS9 "Documents, Compliance & Automation" =====
Pinned (sticky) viewport with 4 cards that slide up via GSAP. The JS is
now guarded ≥901px; here we hand it a plain vertical stack. */
.ds9-stats-wrapper { height: auto !important; }
.ds9-stats-section {
position: static !important;
top: auto !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
.ds9-cards-container {
display: flex !important;
flex-direction: column !important;
height: auto !important;
gap: 16px !important;
padding: 8px 16px 40px !important;
}
.ds9-card {
display: block !important;
flex: 1 1 auto !important;
height: auto !important;
min-height: 0 !important;
transform: none !important;
-webkit-clip-path: none !important;
clip-path: none !important;
border-left: 0 !important;
border-radius: 14px !important;
overflow: hidden !important;
padding: 0 !important;
}
.ds9-card + .ds9-card { border-left: 0 !important; }
.ds9-card-content {
display: block !important;
position: static !important;
top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
padding: 20px 20px 4px !important;
overflow: visible !important;
}
.ds9-description { display: block !important; }
.ds9-stats-wrapper .ds9-desc-lead,
.ds9-stats-wrapper .ds9-card > .ds9-desc-lead { max-width: 100% !important; }
.ds9-card-photo {
position: relative !important;
top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
width: 100% !important;
height: 170px !important;
margin: 16px 0 0 !important;
}
.ds9-title-area { padding: 48px 16px 22px !important; }
/* ===== HIW "Simple School Onboarding Flow" timeline =====
5-column grid forced to min-width:720px → horizontal scroll. Convert to
a clean vertical timeline (number badge above each card). */
.hiw-school-embed .hiw-section { padding-top: 64px !important; padding-bottom: 64px !important; }
.hiw-school-embed .hiw-window {
overflow-x: visible !important;
padding: 6px 16px !important;
}
.hiw-school-embed .hiw-grid {
display: flex !important;
grid-template-columns: none !important;
flex-direction: column !important;
min-width: 0 !important;
max-width: 520px !important;
margin: 0 auto !important;
gap: 16px !important;
}
.hiw-school-embed .hiw-timeline-svg { display: none !important; }
.hiw-school-embed .hiw-col {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.hiw-school-embed .hiw-slot,
.hiw-school-embed .hiw-slot.top,
.hiw-school-embed .hiw-slot.bottom {
height: auto !important;
min-height: 0 !important;
display: block !important;
}
/* number badge first, card second — regardless of the top/bottom alternation */
.hiw-school-embed .hiw-slot:has(.hiw-pin) { order: 0 !important; }
.hiw-school-embed .hiw-slot:has(.hiw-card) { order: 1 !important; }
.hiw-school-embed .hiw-gap { display: none !important; }
.hiw-school-embed .hiw-card {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
.hiw-school-embed .hiw-pin,
.hiw-school-embed .hiw-pin.up,
.hiw-school-embed .hiw-pin.down {
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
}
.hiw-school-embed .hiw-pin-line,
.hiw-school-embed .hiw-pin-dot,
.hiw-school-embed .hiw-anchor-dot { display: none !important; }
/* ===== Identity & Governance "Controls That Keep Your School Running" =====
Auto-sliding marquee whose cards are clamp(440px…) wide → far wider than
a phone. Shrink the card + connector so the marquee reads cleanly. */
.school-id-gov-embed {
--card-size-w: clamp(220px, 76vw, 300px) !important;
--id-join-w: 22px !important;
}
.school-id-gov-embed .id-gov-section-head { padding: 0 16px !important; }
.school-id-gov-embed .identity-white,
.school-id-gov-embed #identity-governance { padding: 48px 0 44px !important; }
}
/* ─────────── Phone (≤480px) extra tightening ─────────── */
@media (max-width: 480px) {
.ds9-card-content { padding: 16px 16px 4px !important; }
.ds9-card-photo { height: 140px !important; }
.hiw-school-embed .hiw-grid { gap: 14px !important; }
.school-id-gov-embed { --card-size-w: clamp(200px, 80vw, 270px) !important; }
/* Hero tags/shapes even smaller on tiny phones */
.ds4-hero .ds4-tag { font-size: 0.5rem !important; padding: 2px 6px !important; box-shadow: 1.5px 1.5px 0 #000 !important; }
.ds4-hero .ds4-tag-icon { font-size: 0.6rem !important; }
.ds4-hero .brutal-square { width: 16px !important; height: 16px !important; }
.ds4-hero .brutal-svg-wrap svg { width: 20px !important; height: 20px !important; }
}
/* ─────────── Administration & Governance (arrow2 numbered cards) ───────────
Desktop shows 6 numbered cards; on phones show only the first 4 and hide the
last two — step 5 "Custom Fields" (navy) and step 6 "Safety & Assurance
Centre" (wine). Their desktop entrance animation runs only ≥1025px, so
hiding them here has no side effects. */
@media (max-width: 768px) {
#school-arrow2 .stat-card.stat-card--navy,
#school-arrow2 .stat-card.stat-card--wine {
display: none !important;
}
}
/* DS5 platform promise: final mobile layout override.
This sits after the page-wide grid reset, so DS5 keeps its own order,
spacing, and readable paragraph wrapping on tablet and phone widths. */
@media (max-width: 900px) {
.ds5-care-shell {
width: min(calc(100% - 36px), 680px) !important;
padding: 72px 0 78px !important;
}
.ds5-care-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-areas:
"intro intro"
"personal nutrition"
"social medical"
"cta cta" !important;
grid-auto-rows: auto !important;
gap: 16px !important;
justify-content: center !important;
}
.ds5-intro { grid-area: intro !important; max-width: 100% !important; padding: 0 0 10px !important; }
.ds5-card--personal { grid-area: personal !important; }
.ds5-card--nutrition { grid-area: nutrition !important; }
.ds5-card--social { grid-area: social !important; }
.ds5-card--medical { grid-area: medical !important; }
.ds5-cta-card { grid-area: cta !important; }
.ds5-intro__title {
font-size: 42px !important;
line-height: 1.07 !important;
letter-spacing: 0.035em !important;
}
.ds5-intro__desc {
max-width: 560px !important;
font-size: 15.5px !important;
line-height: 1.42 !important;
}
.ds5-card,
.ds5-cta-card {
min-height: 236px !important;
padding: 24px !important;
}
.ds5-card__icon {
top: 20px !important;
right: 20px !important;
width: 32px !important;
height: 32px !important;
}
.ds5-card__title {
max-width: 14ch !important;
padding-right: 44px !important;
font-size: 22px !important;
line-height: 1.08 !important;
}
.ds5-card--medical .ds5-card__title {
max-width: 18ch !important;
}
.ds5-card__desc {
max-width: none !important;
margin-top: 24px !important;
font-size: 15.5px !important;
line-height: 1.36 !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.ds5-cta-card__content { min-height: 188px !important; }
.ds5-cta-card__title { font-size: 24px !important; line-height: 1.04 !important; }
.ds5-cta-card__button {
width: 100% !important;
min-width: 0 !important;
min-height: 52px !important;
padding: 0 18px !important;
font-size: 14.5px !important;
}
}
@media (max-width: 640px) {
.ds5-care-shell {
width: min(calc(100% - 28px), 420px) !important;
padding: 56px 0 64px !important;
}
.ds5-care-grid {
grid-template-columns: 1fr !important;
grid-template-areas:
"intro"
"personal"
"nutrition"
"social"
"medical"
"cta" !important;
gap: 14px !important;
}
.ds5-intro__title {
font-size: 36px !important;
line-height: 1.06 !important;
}
.ds5-card,
.ds5-cta-card {
min-height: 220px !important;
padding: 24px 24px 26px !important;
}
.ds5-card__title {
max-width: 15ch !important;
padding-right: 44px !important;
font-size: 23px !important;
}
.ds5-card--medical .ds5-card__title {
max-width: 18ch !important;
}
.ds5-card__desc {
margin-top: 24px !important;
font-size: 15.5px !important;
line-height: 1.38 !important;
}
.ds5-cta-card__content { min-height: 180px !important; }
}
@media (max-width: 380px) {
.ds5-care-shell {
width: calc(100% - 20px) !important;
}
.ds5-intro__title {
font-size: 32px !important;
}
.ds5-card,
.ds5-cta-card {
padding: 22px 20px 24px !important;
}
.ds5-card__icon {
top: 18px !important;
right: 18px !important;
width: 30px !important;
height: 30px !important;
}
.ds5-card__title {
padding-right: 40px !important;
font-size: 22px !important;
}
}
/* ===================================================================
UNIFIED BOX-HEADER STYLE (applied page-wide per request)
NibPro + 1.7rem + weight 900 + a 1.05px stroke for the bold look.
Colours are intentionally NOT set here — the stroke uses currentColor,
so each header keeps its own colour. NibPro has no bold face anymore,
so the weight is moot and the thickness comes entirely from the stroke.
=================================================================== */
#school-arrow2 .stat-card__title,
.pp-ds13-card .pp-ds13-card-title,
.ds9-stats-wrapper .ds9-metric,
.hiw-school-embed .hiw-card h3,
.school-id-gov-embed .id-card-cap h3 {
font-family: 'NibPro', 'Inter', system-ui, sans-serif !important;
font-size: 1.7rem !important;
font-weight: 900 !important;
-webkit-text-stroke: 1.05px currentColor !important;
}
/* ===== style/school-reduced-motion.css ===== */
/* school-reduced-motion.css
Global accessibility baseline — bundled LAST so it overrides every
component rule. Companion to Solution/js/school-motion-guard.js
(which neutralises the GSAP side).
Standard W3C-recommended pattern: near-instant durations (not 0,
so transitionend/animationend handlers still fire) and no smooth
scroll. Decorative CSS keyframe loops are fully stopped. Layout is
untouched — only motion is removed. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* Belt-and-braces: anything the motion-guard flags on . */
.school-reduced-motion *,
.school-reduced-motion *::before,
.school-reduced-motion *::after {
animation-play-state: paused !important;
}
}
/* ===== School Feature Coverage Triad - section 10 ===== */
.asf-school-ops {
--asf-ink: #131b33;
--asf-muted: #5a637d;
--asf-line: #e8ebf3;
--asf-card: #ffffff;
--asf-cyan-1: #22d3ee;
--asf-cyan-2: #3b82f6;
--asf-rose-1: #fb7185;
--asf-rose-2: #a855f7;
--asf-lime-1: #34d399;
--asf-lime-2: #f59e0b;
--asf-grad-cta: linear-gradient(120deg, #6366f1, #ec4899 55%, #f97316);
--asf-radius-lg: 0px;
--asf-radius-md: 0px;
--asf-font-display: "Sora", Inter, ui-sans-serif, system-ui, sans-serif;
--asf-font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.asf-school-ops,
.asf-school-ops *,
.asf-school-ops *::before,
.asf-school-ops *::after { box-sizing: border-box; }
.asf-school-ops {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(64px, 7vw, 110px) clamp(16px, 4vw, 56px);
background: #ffffff;
}
/* soft colour ambience, kept airy so the page still reads white */
.asf-school-ops::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(560px 380px at 12% 4%, rgba(34, 211, 238, .13), transparent 70%),
radial-gradient(620px 420px at 88% 10%, rgba(251, 113, 133, .11), transparent 70%),
radial-gradient(700px 460px at 50% 104%, rgba(52, 211, 153, .10), transparent 72%);
pointer-events: none;
}
.asf-school-ops::after {
content: "";
position: absolute;
inset: 0;
z-index: -3;
background-image:
linear-gradient(rgba(19, 27, 51, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(19, 27, 51, .035) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(circle at 50% 30%, #000 0 52%, transparent 80%);
pointer-events: none;
}
.asf-shell {
width: min(100%, 1480px);
margin: 0 auto;
position: relative;
}
/* ---------- header ---------- */
.asf-header {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
gap: clamp(24px, 2vw, 32px);
align-items: end;
margin-bottom: clamp(30px, 4.5vw, 58px);
}
.asf-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
width: max-content;
max-width: 100%;
margin-bottom: 18px;
padding: 9px 16px;
border-radius: 999px;
border: 1px solid var(--asf-line);
background: #ffffff;
box-shadow:
0 1px 2px rgba(19, 27, 51, .05),
0 10px 24px -12px rgba(19, 27, 51, .18);
color: var(--asf-ink);
font-size: 12px;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.asf-eyebrow-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: linear-gradient(135deg, var(--asf-lime-1), var(--asf-cyan-2));
box-shadow: 0 0 0 5px rgba(52, 211, 153, .16);
animation: asfPulse 2.2s ease-in-out infinite;
}
@keyframes asfPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(.72); opacity: .65; }
}
.asf-title {
margin: 0;
max-width: none;
font-family: var(--asf-font-display);
font-size: clamp(1.9rem, 3vw, 3.1rem);
line-height: 1.06;
letter-spacing: -.03em;
font-weight: 800;
text-wrap: balance;
color: var(--asf-ink);
}
.asf-title-line {
display: block;
white-space: nowrap;
}
.asf-title-accent {
background: linear-gradient(100deg, #2563eb, #06b6d4 34%, #ec4899 68%, #f59e0b);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.asf-intro-card {
position: relative;
overflow: hidden;
padding: 14px 24px 14px 30px;
border: 2px solid #111322;
border-radius: 0;
background: #171822;
box-shadow: 10px 10px 0 rgba(17, 19, 34, .12);
}
.asf-intro-card::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 8px;
background: var(--asf-grad-cta);
}
.asf-intro-card::after {
content: "";
position: absolute;
top: 18px;
right: 18px;
width: 11px;
height: 11px;
background: #8dff00;
}
.asf-intro-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin: 0 24px 8px 0;
color: #8dff00;
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.asf-intro-label span:last-child {
color: rgba(249, 250, 251, .5);
font-variant-numeric: tabular-nums;
}
.asf-intro-card p {
margin: 0;
max-width: none;
color: #f9fafb;
font-size: 1rem;
line-height: 1.42;
font-weight: 600;
}
.asf-mini-strip {
display: flex;
margin-top: 10px;
border-top: 1px solid rgba(249, 250, 251, .18);
border-bottom: 1px solid rgba(249, 250, 251, .18);
}
.asf-mini-strip span {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
padding: 7px 9px;
border-right: 1px solid rgba(249, 250, 251, .18);
border-radius: 0;
background: transparent;
color: #f9fafb;
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.asf-mini-strip span:last-child { border-right: 0; }
/* ---------- columns ---------- */
.asf-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(18px, 2.4vw, 30px);
}
.asf-column {
position: relative;
border-radius: var(--asf-radius-lg);
transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
}
/* soft coloured "depth slab" under each card — the 3D read */
.asf-column::after {
content: "";
position: absolute;
inset: 24px 18px -14px;
z-index: -1;
border-radius: var(--asf-radius-lg);
background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
opacity: .28;
filter: blur(28px);
transition: opacity .35s ease, transform .35s ease;
}
.asf-column:hover {
transform: translateY(-8px);
}
.asf-column:hover::after {
opacity: .42;
transform: translateY(8px);
}
.asf-column-inner {
position: relative;
height: 100%;
overflow: hidden;
border-radius: var(--asf-radius-lg);
border: 1px solid #000000;
background: var(--asf-card);
box-shadow:
0 1px 2px rgba(19, 27, 51, .05),
0 20px 44px -22px rgba(19, 27, 51, .25);
}
/* gradient cap running along the top edge */
.asf-column-inner::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}
.asf-column-head {
position: relative;
padding: 30px 26px 20px;
background:
linear-gradient(170deg,
color-mix(in srgb, var(--accent-1) 10%, #ffffff),
#ffffff 72%);
}
.asf-icon-orb {
display: grid;
place-items: center;
width: 62px;
height: 62px;
margin-bottom: 18px;
border-radius: 20px;
background: linear-gradient(145deg, var(--accent-1), var(--accent-2));
font-size: 30px;
box-shadow:
inset 0 2px 3px rgba(255, 255, 255, .6),
inset 0 -4px 8px rgba(0, 0, 0, .18),
0 14px 28px -8px color-mix(in srgb, var(--accent-2) 55%, transparent);
transform: rotate(-5deg);
animation: asfOrbFloat 5s ease-in-out infinite;
}
.asf-column:nth-child(2) .asf-icon-orb { animation-delay: .35s; }
.asf-column:nth-child(3) .asf-icon-orb { animation-delay: .7s; }
@keyframes asfOrbFloat {
0%, 100% { transform: rotate(-5deg) translateY(0); }
50% { transform: rotate(3deg) translateY(-7px); }
}
.asf-column-kicker {
display: inline-flex;
margin: 0 0 10px;
padding: 5px 11px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent-1) 14%, #ffffff);
border: 1px solid color-mix(in srgb, var(--accent-1) 30%, #ffffff);
color: color-mix(in srgb, var(--accent-2) 78%, #131b33);
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.asf-column-title {
margin: 0;
max-width: 14ch;
font-family: var(--asf-font-display);
font-size: clamp(1.4rem, 1.8vw, 1.8rem);
line-height: 1.1;
letter-spacing: -.025em;
font-weight: 800;
text-wrap: balance;
color: var(--asf-ink);
}
.asf-column-copy {
margin: 12px 0 0;
max-width: 40ch;
color: var(--asf-muted);
font-size: .93rem;
line-height: 1.5;
font-weight: 500;
}
/* ---------- feature rows ---------- */
.asf-feature-list {
display: grid;
gap: 9px;
padding: 8px 18px 24px;
}
.asf-feature {
position: relative;
overflow: hidden;
border-radius: var(--asf-radius-md);
padding: 12px 13px 12px 15px;
border: 1px solid #000000;
background:
linear-gradient(90deg, color-mix(in srgb, var(--accent-1) 10%, #ffffff), #ffffff 34%),
#ffffff;
box-shadow: 4px 4px 0 rgba(0, 0, 0, .06);
cursor: pointer;
transform: translate3d(0, 18px, 0);
opacity: 0;
transition:
transform .6s cubic-bezier(.16, 1, .3, 1),
opacity .6s cubic-bezier(.16, 1, .3, 1),
background .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}
.asf-school-ops.is-visible .asf-feature {
transform: translate3d(0, 0, 0);
opacity: 1;
transition-delay: calc(var(--i) * 55ms);
}
.asf-feature:hover {
background:
linear-gradient(90deg, color-mix(in srgb, var(--accent-1) 16%, #ffffff), #ffffff 38%),
#ffffff;
border-color: #000000;
box-shadow:
5px 5px 0 rgba(0, 0, 0, .10),
0 12px 24px -18px color-mix(in srgb, var(--accent-2) 45%, transparent);
transform: translate(-2px, -2px);
}
.asf-feature::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 5px;
background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
}
.asf-feature-top {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 30px;
align-items: center;
gap: 11px;
position: relative;
z-index: 2;
}
.asf-feature-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 0;
background: color-mix(in srgb, var(--accent-1) 16%, #ffffff);
border: 1px solid #000000;
box-shadow: 2px 2px 0 color-mix(in srgb, var(--accent-2) 24%, transparent);
font-size: 18px;
}
.asf-feature h4 {
margin: 0;
font-size: .95rem;
line-height: 1.18;
letter-spacing: -.01em;
font-weight: 800;
color: var(--asf-ink);
}
.asf-feature-toggle {
position: relative;
z-index: 3;
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
border: 1px solid #000000;
border-radius: 0;
background: #ffffff;
color: var(--asf-ink);
cursor: pointer;
font-size: 17px;
font-weight: 800;
line-height: 1;
box-shadow: 2px 2px 0 rgba(0, 0, 0, .08);
transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.asf-feature-toggle:hover {
transform: translate(-1px, -1px);
background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
border-color: #000000;
color: #ffffff;
box-shadow: 3px 3px 0 rgba(0, 0, 0, .12);
}
.asf-feature-toggle:active {
transform: translateY(1px);
box-shadow: 0 1px 2px rgba(19, 27, 51, .1);
}
.asf-feature-toggle:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
}
.asf-feature-toggle .asf-minus { display: none; }
.asf-feature.is-open .asf-feature-toggle {
background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
border-color: #000000;
color: #ffffff;
}
.asf-feature.is-open .asf-feature-toggle .asf-plus { display: none; }
.asf-feature.is-open .asf-feature-toggle .asf-minus { display: inline; }
.asf-feature.is-open {
background:
linear-gradient(115deg,
color-mix(in srgb, var(--accent-1) 24%, #ffffff),
#ffffff 52%,
color-mix(in srgb, var(--accent-2) 22%, #ffffff));
box-shadow:
5px 5px 0 color-mix(in srgb, var(--accent-2) 16%, rgba(0, 0, 0, .10)),
0 16px 30px -22px color-mix(in srgb, var(--accent-2) 55%, transparent);
}
.asf-feature-more {
position: relative;
z-index: 2;
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-10px) scale(.985);
transform-origin: top left;
transition:
max-height .68s cubic-bezier(.22, 1, .36, 1),
opacity .38s ease,
transform .56s cubic-bezier(.22, 1, .36, 1),
margin-top .56s cubic-bezier(.22, 1, .36, 1);
margin-top: 0;
will-change: max-height, opacity, transform;
}
.asf-feature.is-open .asf-feature-more {
max-height: 280px;
opacity: 1;
transform: translateY(0);
margin-top: 4px;
}
.asf-feature p {
width: min(100%, 31ch);
margin: 16px 2px 18px 3px;
color: color-mix(in srgb, var(--asf-ink) 82%, var(--asf-muted));
font-size: .98rem;
line-height: 1.28;
font-weight: 550;
}
.asf-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 2px 7px 3px;
}
.asf-tags span {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 28px;
padding: 5px 11px 4px;
border-radius: 0;
background: #111322;
border: 1px solid color-mix(in srgb, var(--accent-2) 50%, #111322);
color: #ffffff;
font-size: 11px;
font-weight: 800;
letter-spacing: .035em;
text-transform: uppercase;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .12),
3px 3px 0 color-mix(in srgb, var(--accent-2) 18%, rgba(0, 0, 0, .12));
}
.asf-tags span::before {
content: "";
width: 6px;
height: 6px;
flex: 0 0 6px;
border-radius: 0;
background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
box-shadow: none;
}
/* ---------- bottom bar ---------- */
.asf-bottom-bar {
display: grid;
grid-template-columns: 108px minmax(0, 1fr) auto;
align-items: stretch;
gap: 0;
margin-top: 12px;
padding: 0;
overflow: hidden;
border: 2px solid #111322;
border-radius: 0;
background: #ffffff;
box-shadow: none;
}
.asf-bottom-stat {
display: grid;
place-content: center;
padding: 14px;
background: #111322;
color: #ffffff;
text-align: center;
}
.asf-bottom-stat strong {
display: block;
font-family: "AnekBangla", var(--asf-font-display);
font-size: 2.25rem;
font-weight: 800;
line-height: .8;
}
.asf-bottom-stat span {
display: block;
margin-top: 8px;
color: #8dff00;
font-size: 9px;
font-weight: 800;
line-height: 1;
letter-spacing: .13em;
text-transform: uppercase;
}
.asf-bottom-copy {
display: grid;
align-content: center;
padding: 16px 22px;
}
.asf-bottom-copy strong {
display: block;
font-family: "AnekBangla", var(--asf-font-display);
font-size: 1.18rem;
line-height: 1.25;
letter-spacing: -.015em;
}
.asf-bottom-copy span {
display: block;
margin-top: 4px;
color: var(--asf-muted);
font-size: .9rem;
font-weight: 500;
}
.asf-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-left: 2px solid #111322;
background: #f4f6fb;
}
.asf-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 22px;
border-radius: 0;
border: 2px solid #111322;
text-decoration: none;
color: #ffffff;
background: var(--asf-grad-cta);
background-size: 150% 100%;
background-position: 0% 50%;
font-family: var(--asf-font-body);
font-weight: 800;
font-size: .92rem;
letter-spacing: -.01em;
box-shadow: 3px 3px 0 #111322;
transition: transform .25s ease, box-shadow .25s ease, background-position .4s ease;
overflow: hidden;
}
.asf-btn:hover {
transform: translateY(-3px);
background-position: 100% 50%;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .35),
0 18px 34px -10px rgba(236, 72, 153, .6);
}
.asf-btn:active {
transform: translateY(0);
box-shadow: 0 6px 14px -6px rgba(236, 72, 153, .5);
}
.asf-btn-secondary {
color: var(--asf-ink);
background: #ffffff;
border: 2px solid #111322;
box-shadow: 3px 3px 0 #111322;
}
.asf-btn-secondary:hover {
box-shadow: 0 12px 24px -12px rgba(19, 27, 51, .3);
}
/* ---------- responsive ---------- */
@media (max-width: 1180px) {
.asf-header {
grid-template-columns: 1fr;
align-items: start;
}
.asf-intro-card { max-width: 760px; }
.asf-grid { grid-template-columns: 1fr; }
.asf-column-title { max-width: 100%; }
.asf-feature-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Compact About-style labels above every main School page title. */
.ds4-badge,
.pp-problem-badge,
.school-ds14__badge,
.cdl-badge,
.hiw-school-embed .hiw-school-badge,
#admissions-flow .adm-badge,
.school-id-gov-embed .id-gov-kicker,
.asf-school-ops .asf-eyebrow,
.hiw-header-v2__badge,
.ds1-section-header .ds1-badge,
#school-numbers .numbers-pill,
.ds2-badge,
.school-access-mini__badge,
as-cta .cta-eyebrow-badge,
as-cta .as-cta-fallback__eyebrow {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0 !important;
box-sizing: border-box !important;
min-height: 26px !important;
padding: 5px 12px 5px 32px !important;
position: relative !important;
border: 0 !important;
border-radius: 0 !important;
background: #090909 !important;
box-shadow: none !important;
color: #f1f0e9 !important;
-webkit-text-fill-color: #f1f0e9 !important;
font-family: 'Agency', 'Inter', system-ui, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 1.6px !important;
line-height: 1 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.ds4-badge::before,
.pp-problem-badge::before,
.school-ds14__badge::before,
.cdl-badge::before,
.hiw-school-embed .hiw-school-badge::before,
#admissions-flow .adm-badge::before,
.school-id-gov-embed .id-gov-kicker::before,
.asf-school-ops .asf-eyebrow::before,
.hiw-header-v2__badge::before,
.ds1-section-header .ds1-badge::before,
#school-numbers .numbers-pill::before,
.ds2-badge::before,
.school-access-mini__badge::before,
as-cta .cta-eyebrow-badge::before,
as-cta .as-cta-fallback__eyebrow::before {
content: '' !important;
position: absolute !important;
left: 10px !important;
top: 50% !important;
width: 12px !important;
height: 12px !important;
transform: translateY(-50%) !important;
background: #b7ff00 !important;
}
.school-ds14__badge-dot,
.asf-school-ops .asf-eyebrow-dot,
.ds2-badge-dot {
display: none !important;
}
.pp-problem-badge-text,
.school-ds14__badge-text,
.cdl-badge > span,
.school-access-mini__badge > span,
as-cta .cta-kicker-label {
color: inherit !important;
-webkit-text-fill-color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
line-height: inherit !important;
text-transform: inherit !important;
}
@media (max-width: 680px) {
.asf-school-ops { padding-inline: 14px; }
.asf-title { font-size: clamp(1.35rem, 4.5vw, 2.5rem); }
.asf-intro-card { padding: 24px 22px 22px 28px; }
.asf-mini-strip {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
border: 0;
}
.asf-mini-strip span,
.asf-mini-strip span:last-child {
border: 1px solid rgba(249, 250, 251, .18);
}
.asf-column-head { padding: 24px 20px 16px; }
.asf-feature-list {
grid-template-columns: 1fr;
padding-inline: 12px;
}
.asf-bottom-bar { grid-template-columns: 88px minmax(0, 1fr); }
.asf-actions {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 2px solid #111322;
border-left: 0;
}
.asf-actions,
.asf-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.asf-school-ops *,
.asf-school-ops *::before,
.asf-school-ops *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
/* =========================================================
CONTRACTING COVER SERVICE PANELS (brought from the base file)
Joined boxes + scale-away hover reveal + 01/02/03 numbers.
========================================================= */
.asf-grid {
position: relative;
gap: 0;
border: 2px solid #d9dce3;
background: #ffffff;
}
.asf-column {
min-width: 0;
border-right: 2px solid #d9dce3;
border-radius: 0;
box-shadow: none;
transform: none;
}
.asf-column:last-child { border-right: 0; }
.asf-column::after { content: none; }
.asf-column:hover { transform: none; }
.asf-column-inner {
position: relative;
display: flex;
min-height: 0;
height: 100%;
flex-direction: column;
overflow: hidden;
border: 0;
border-radius: 0;
background: #1b1c2e;
box-shadow: none;
isolation: isolate;
}
/* Dark patterned image layer from the reference card. */
.asf-column-inner::before {
content: "";
position: absolute;
inset: -5%;
z-index: 0;
height: auto;
pointer-events: none;
background:
radial-gradient(circle at 50% 54%, rgba(255,255,255,.08) 0 1px, transparent 2px 72px, rgba(255,255,255,.06) 73px 74px, transparent 75px),
linear-gradient(118deg, transparent 0 28%, rgba(255,255,255,.045) 28.15% 28.35%, transparent 28.5% 70%, rgba(255,255,255,.035) 70.15% 70.35%, transparent 70.5%),
repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 31px),
linear-gradient(145deg, #222337, #171827 68%, #11121e);
transform: scale(1);
transition: transform .8s ease;
}
/* White cover contracts away to reveal the service panel beneath. */
.asf-column-inner::after {
content: "";
position: absolute;
z-index: 1;
width: 101%;
height: 101%;
top: 49%;
left: 51%;
pointer-events: none;
background: #ffffff;
opacity: 1;
transform: translate(-51%, -49%) scale(1);
transition: transform .8s ease, opacity .8s ease;
}
.asf-column:hover .asf-column-inner::after,
.asf-column:focus-within .asf-column-inner::after {
opacity: 0;
transform: translate(-51%, -49%) scale(0);
}
.asf-column:hover .asf-column-inner::before,
.asf-column:focus-within .asf-column-inner::before {
transform: scale(1.15);
}
.asf-column-head,
.asf-school-ops .asf-feature-list {
position: relative;
z-index: 2;
}
.asf-column-head {
display: flex;
min-height: 0;
flex-direction: column;
padding: 32px 32px 18px;
background: transparent;
}
.asf-column-kicker {
position: relative;
display: inline-flex;
align-items: center;
align-self: flex-start;
min-height: 28px;
margin: 0 0 24px;
padding: 5px 9px 4px 34px;
border: 0;
border-radius: 0;
background: #171822;
color: #f9fafb;
font-family: var(--asf-font-body);
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
text-transform: none;
transition: background-color .3s ease, color .3s ease;
}
.asf-column-kicker::before {
content: "";
position: absolute;
left: 7px;
top: 50%;
width: 14px;
height: 14px;
background: #8dff00;
transform: translateY(-50%);
}
.asf-column-title {
max-width: 17ch;
margin: 0;
color: #111322;
font-size: clamp(1.35rem, 1.55vw, 1.72rem);
line-height: 1.12;
letter-spacing: -.035em;
transition: color .3s ease;
}
.asf-column-copy {
margin: 16px 0 0;
color: #d1d5db;
font-size: .92rem;
line-height: 1.55;
opacity: 0;
transition: opacity .3s ease, color .3s ease;
}
.asf-column-head::after {
display: block;
margin: auto 0 0;
color: rgba(3, 7, 18, .1);
font-family: var(--asf-font-display);
font-size: clamp(8.5rem, 12vw, 12.5rem);
font-weight: 600;
line-height: .78;
letter-spacing: -.1em;
text-align: center;
transition: color .3s ease;
}
.asf-column:nth-child(1) .asf-column-head::after { content: "01"; }
.asf-column:nth-child(2) .asf-column-head::after { content: "02"; }
.asf-column:nth-child(3) .asf-column-head::after { content: "03"; }
/* Match the order of the three source sections in school.html. */
.asf-column--administration { order: 1; }
.asf-column--teaching { order: 2; }
.asf-column--communication { order: 3; }
.asf-column--administration .asf-column-head::after { content: "01"; }
.asf-column--teaching .asf-column-head::after { content: "02"; }
.asf-column--communication .asf-column-head::after { content: "03"; }
.asf-column:hover .asf-column-kicker,
.asf-column:focus-within .asf-column-kicker {
background: #f3f4f6;
color: #111322;
}
.asf-column:hover .asf-column-title,
.asf-column:focus-within .asf-column-title {
color: #f9fafb;
}
.asf-column:hover .asf-column-copy,
.asf-column:focus-within .asf-column-copy {
color: #d1d5db;
opacity: 1;
}
.asf-column:hover .asf-column-head::after,
.asf-column:focus-within .asf-column-head::after {
color: rgba(249, 250, 251, .8);
}
/* NOTE: the feature items (tiles, icons, toggles, tags, borders) intentionally
keep their ORIGINAL design — no overrides applied here. */
@media (max-width: 1180px) {
.asf-grid { border-bottom: 0; }
.asf-column {
border-right: 0;
border-bottom: 2px solid #d9dce3;
}
}
@media (max-width: 680px) {
.asf-column-head {
padding: 28px 22px 16px;
}
}
@media (hover: none), (pointer: coarse) {
.asf-feature-toggle { opacity: 1; }
}
/* =========================================================
REQUESTED DELTAS ON TOP OF THE SERVICE PANEL DESIGN
- keep the (shrunk) icon orb next to the tag, animation intact
- move the 01/02/03 number into the top-right corner
- small black square markers at every joiner
- box title smaller so it fits two lines
- much smaller feature-tile titles
========================================================= */
/* keep the icon orb (base hides it) — shrunk, float animation kept */
.asf-icon-orb {
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin: 0;
border-radius: 12px;
font-size: 20px;
}
/* orb + tag on the same row */
.asf-head-row {
display: flex;
align-items: center;
gap: 12px;
align-self: flex-start;
margin-bottom: 22px;
}
.asf-head-row .asf-column-kicker { margin: 0; }
/* 01 / 02 / 03 in the top-right corner (faint, brightens on hover) */
.asf-column-head::after {
position: absolute;
top: 20px;
right: 12px;
margin: 0;
font-size: clamp(1.5rem, 2.8vw, 2.4rem);
line-height: 1;
text-align: right;
}
/* Black squares centred on each divider/border intersection. */
.asf-column:not(:last-child)::before,
.asf-column:not(:last-child)::after,
.asf-corner-marker {
content: "";
position: absolute;
z-index: 6;
width: 7px;
height: 7px;
background: #030712;
filter: none;
opacity: 1;
border-radius: 0;
transition: none;
pointer-events: none;
}
.asf-column:not(:last-child)::before,
.asf-column:not(:last-child)::after {
left: auto;
right: -1px;
}
.asf-column:not(:last-child)::before {
top: -1px;
bottom: auto;
transform: translate(50%, -50%);
}
.asf-column:not(:last-child)::after {
top: auto;
bottom: -1px;
transform: translate(50%, 50%);
}
.asf-corner-marker--top-left {
top: -1px;
left: -1px;
transform: translate(-50%, -50%);
}
.asf-corner-marker--top-right {
top: -1px;
right: -1px;
transform: translate(50%, -50%);
}
.asf-corner-marker--bottom-left {
bottom: -1px;
left: -1px;
transform: translate(-50%, 50%);
}
.asf-corner-marker--bottom-right {
right: -1px;
bottom: -1px;
transform: translate(50%, 50%);
}
/* When the columns stack, the joins become horizontal. Keep a marker at
both ends of every join while retaining the four outer corner markers. */
@media (max-width: 1180px) {
.asf-column:not(:last-child)::before,
.asf-column:not(:last-child)::after {
top: auto;
bottom: -1px;
}
.asf-column:not(:last-child)::before {
right: auto;
left: -1px;
transform: translate(-50%, 50%);
}
.asf-column:not(:last-child)::after {
right: -1px;
left: auto;
transform: translate(50%, 50%);
}
}
/* Larger AnekBangla panel headings, balanced to two lines. */
.asf-column-title {
max-width: 18ch;
font-family: "AnekBangla", var(--asf-font-body);
font-size: clamp(1.75rem, 2.05vw, 2.15rem);
line-height: 1.06;
font-weight: 700;
text-wrap: balance;
}
@media (min-width: 1181px) {
.asf-column-title { min-height: 2.12em; }
}
/* larger tile titles in AnekBangla — box height stays the same because
the row height is set by the 38px feature icon, not the text */
.asf-feature h4 {
font-family: "AnekBangla", var(--asf-font-body);
font-size: 1.25rem;
line-height: 1.1;
}
.asf-feature p {
font-family: "NibPro", var(--asf-font-body);
}
.asf-tags span {
font-family: "AnekBangla", var(--asf-font-body);
}
/* tighten the header so there is no big void before the feature list */
.asf-column-head { padding-bottom: 12px; }
.asf-head-row { margin-bottom: 16px; }
/* reserve a consistent paragraph height so all 3 feature lists line up,
even when one column's copy wraps to more lines at wide widths */
.asf-column-copy {
margin-top: 10px;
min-height: 4.7em;
font-family: "NibPro", var(--asf-font-body);
}
/* compact feature rows so the three-column feature section sits lower */
.asf-school-ops .asf-feature-list {
gap: 7px;
margin-top: 18px;
padding: 6px 16px 20px;
}
/* -------------------------------------------------------------
Feature boxes keep their own background (no hover colour change).
A soft gradient sits at the trailing (right) end of each box,
tinted to that column's accent colour.
------------------------------------------------------------- */
.asf-feature::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 46%;
z-index: 0;
pointer-events: none;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
color-mix(in srgb, var(--accent-1) 16%, transparent) 52%,
color-mix(in srgb, var(--accent-2) 36%, transparent) 100%);
}
/* slightly rounded feature boxes */
.asf-school-ops .asf-feature {
border-radius: 5px;
padding: 8px 11px 8px 13px;
}
.asf-school-ops .asf-feature-top {
grid-template-columns: 34px minmax(0, 1fr) 28px;
gap: 9px;
}
.asf-school-ops .asf-feature-icon {
width: 34px;
height: 34px;
font-size: 16px;
}
.asf-school-ops .asf-feature h4 {
font-size: 1.14rem;
line-height: 1.05;
}
.asf-school-ops .asf-feature-toggle {
width: 28px;
height: 28px;
font-size: 16px;
}
@media (max-width: 680px) {
.asf-school-ops .asf-column-copy {
display: none;
min-height: 0;
margin: 0;
}
.asf-school-ops .asf-column-head {
padding-bottom: 8px;
}
.asf-school-ops .asf-feature-list {
margin-top: 0;
padding-top: 4px;
}
}