/* ===================================================================== Himaayah Schools: one stylesheet for every page --------------------------------------------------------------------- Each page names itself on its tag, for example public pages staff portals student dashboards A rule written as :where(.site) .hero { ... } only reaches pages whose has that class. :where() adds no extra weight, so every rule wins or loses exactly as it did when it sat inside the page. Layout of this file 1. Base rules: shared, public site, portals, then one block per page 2. Screen sizes, widest first (each block has the same sections) 3. Reduced motion 4. Animations (@keyframes) Edit a shared rule once and every page that uses it updates. ===================================================================== */ /* ===================================================================== Base rules ===================================================================== */ /* ---------------------------------------------------------------- Shared ---------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } :where(.site) a { color: inherit; text-decoration: none; } :where(.app) a { color: inherit; text-decoration: none; } :where(.page-404) a { color: inherit; text-decoration: none; } :where(.page-faq, .page-library, .page-quiz) button, :where(.page-faq, .page-library, .page-quiz) input { font: inherit; color: inherit; } :where(.app) button { cursor: pointer; border: 0; background: none; } :where(.staff) button, :where(.staff) input, :where(.staff) textarea, :where(.staff) select { font: inherit; color: inherit; } :where(.page-faq, .page-library, .page-quiz, .page-tracker) a:focus-visible, :where(.page-faq, .page-library, .page-quiz, .page-tracker) button:focus-visible, :where(.page-faq, .page-library, .page-quiz, .page-tracker) input:focus-visible { outline: 2px solid var(--sky-d); outline-offset: 3px; } .btn-ink { background: var(--ink); color: #fff; } .btn-sky { background: var(--sky); color: var(--deep); } .btn-sky:hover { background: #fff; } /* ---------------------------------------------------------------- Public site ---------------------------------------------------------------- */ :root:where(.page-about, .page-admissions, .page-exam-calendars, .page-faq, .page-mission, .page-programmes, .page-success-stories, .page-teenagers-building-circle) { --deep: #062F4D; --ink: #094570; --sky: #85CCFF; --sky-d: #3E97D9; --sky-l: #E3F2FD; --wash: #F4F8FB; --text: #0E2A3D; --muted: #5B6E7F; --line: #E3EAF0; --r: 20px; --ease: cubic-bezier(.2,.7,.2,1); --display: 'Bricolage Grotesque', 'Inter', sans-serif; --shadow: 0 1px 2px rgba(6,47,77,.04), 0 12px 32px -18px rgba(6,47,77,.18); } :root:where(.page-academy, .page-administrators, .page-index) { --deep: #062F4D; --ink: #094570; --sky: #85CCFF; --sky-d: #3E97D9; --sky-l: #E3F2FD; --wash: #F4F8FB; --white: #fff; --text: #0E2A3D; --muted: #5B6E7F; --line: #E3EAF0; --r: 20px; --ease: cubic-bezier(.2,.7,.2,1); --display: 'Bricolage Grotesque', 'Inter', sans-serif; --shadow: 0 1px 2px rgba(6,47,77,.04), 0 12px 32px -18px rgba(6,47,77,.18); } :root:where(.page-contact, .page-policies, .page-skills-school) { --deep: #062F4D; --ink: #094570; --sky: #85CCFF; --sky-d: #3E97D9; --sky-l: #E3F2FD; --wash: #F4F8FB; --text: #0E2A3D; --muted: #5B6E7F; --line: #E3EAF0; --r: 20px; --ease: cubic-bezier(.2,.7,.2,1); --display: 'Bricolage Grotesque', 'Inter', sans-serif; --shadow: 0 1px 2px rgba(6,47,77,.04), 0 12px 32px -18px rgba(6,47,77,.18); --wa: #128C4B; } :where(.page-about, .page-academy, .page-administrators, .page-admissions, .page-exam-calendars, .page-faq, .page-index, .page-madrasah, .page-programmes, .page-teenagers-building-circle) body { font-family: 'Inter', -apple-system, sans-serif; color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; line-height: 1.65; } :where(.page-contact, .page-mission, .page-policies, .page-skills-school, .page-success-stories) body { font-family: 'Inter', -apple-system, sans-serif; color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; line-height: 1.65; overflow-x: hidden; } html:where(.page-about, .page-academy, .page-administrators, .page-index, .page-madrasah, .page-success-stories, .page-teenagers-building-circle) { scroll-behavior: smooth; scroll-padding-top: 90px; } html:where(.page-admissions, .page-contact, .page-exam-calendars, .page-mission, .page-policies, .page-programmes, .page-skills-school) { scroll-behavior: smooth; scroll-padding-top: 96px; } :where(.page-enroll, .page-faq) [hidden] { display: none !important; } :where(.site:not(.page-faq, .page-madrasah)) button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } :where(.page-faq) button { cursor: pointer; border: none; background: none; } :where(.page-madrasah) button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } :where(.site:not(.page-enroll)) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; font-size: 15px; font-weight: 600; border-radius: 12px; transition: background .2s, color .2s, border-color .2s, transform .2s; } :where(.page-about, .page-mission) .hero { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 112px) 0 clamp(56px, 7vw, 88px); background: linear-gradient(180deg, var(--wash) 0%, #fff 100%); text-align: center; } :where(.page-academy, .page-index, .page-madrasah, .page-teenagers-building-circle) .hero { padding: clamp(56px, 8vw, 104px) 0 0; background: linear-gradient(180deg, var(--wash) 0%, #fff 100%); } :where(.page-admissions, .page-exam-calendars, .page-programmes) .hero { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 112px) 0 clamp(48px, 6vw, 72px); background: linear-gradient(180deg, var(--wash) 0%, #fff 100%); text-align: center; } :where(.page-contact, .page-policies, .page-skills-school) .hero { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 108px) 0 clamp(52px, 7vw, 80px); background: linear-gradient(180deg, var(--wash) 0%, #fff 100%); text-align: center; } :where(.page-about, .page-admissions, .page-contact, .page-exam-calendars, .page-policies, .page-skills-school, .page-success-stories) .hero::before, :where(.page-about, .page-admissions, .page-contact, .page-exam-calendars, .page-policies, .page-skills-school, .page-success-stories) .hero::after { content: ''; position: absolute; border-radius: 50%; border: 1.5px dashed rgba(9,69,112,.12); pointer-events: none; } :where(.page-about, .page-contact, .page-policies, .page-skills-school) .hero::before { width: 520px; height: 520px; inset-inline-start: -220px; top: -200px; } :where(.page-contact, .page-policies, .page-skills-school) .hero::after { width: 300px; height: 300px; inset-inline-end: -110px; bottom: -150px; } :where(.site:not(.page-enroll)) .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } :where(.site:not(.page-enroll, .page-faq)) a:focus-visible, :where(.site:not(.page-enroll, .page-faq)) button:focus-visible { outline: 2px solid var(--sky-d); outline-offset: 3px; } :where(.page-contact, .page-policies, .page-skills-school) .btn svg { flex: none; } :where(.site) .btn-ink:hover { background: var(--deep); } :where(.site) .btn-line { border: 1.5px solid var(--line); color: var(--ink); background: #fff; } :where(.site) .btn-line:hover { border-color: var(--ink); } :where(.site:not(.page-enroll)) .btn-wa { background: var(--wa); color: #fff; } :where(.site:not(.page-enroll)) .btn-wa:hover { background: #0E6F3B; } .lift:hover { transform: translateY(-2px); } :where(.site:not(.page-contact, .page-policies, .page-skills-school)) .sec { padding: clamp(80px, 10vw, 128px) 0 0; } :where(.page-contact, .page-policies, .page-skills-school) .sec { padding: clamp(80px, 10vw, 120px) 0 0; } :where(.page-about, .page-mission, .page-programmes) .head { text-align: center; max-width: 640px; margin: 0 auto clamp(40px, 5vw, 56px); } :where(.page-academy, .page-administrators, .page-index, .page-success-stories, .page-teenagers-building-circle) .head { text-align: center; max-width: 640px; margin: 0 auto clamp(40px, 5vw, 60px); } :where(.page-admissions, .page-madrasah) .head { text-align: center; max-width: 660px; margin: 0 auto clamp(40px, 5vw, 56px); } :where(.page-contact, .page-policies, .page-skills-school) .head { text-align: center; max-width: 640px; margin: 0 auto clamp(36px, 5vw, 52px); } :where(.site:not(.page-enroll)) .kicker { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-d); margin-bottom: 12px; } :where(.page-academy, .page-administrators, .page-admissions, .page-index, .page-madrasah, .page-mission, .page-programmes, .page-success-stories, .page-teenagers-building-circle) .head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.12; letter-spacing: -.02em; color: var(--deep); } :where(.page-contact, .page-policies, .page-skills-school) .head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.8vw, 44px); line-height: 1.12; letter-spacing: -.02em; color: var(--deep); } :where(.site:not(.page-enroll, .page-exam-calendars, .page-faq)) .head p { margin-top: 14px; font-size: 17px; color: var(--muted); } :where(.site) .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-pill { max-width: 1180px; margin: 0 auto; height: 76px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; position: relative; } :where(.site) .brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--deep); } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a:not(.btn) { font-size: 14.5px; font-weight: 500; color: var(--muted); transition: color .2s; } :where(.page-about, .page-administrators, .page-admissions, .page-contact, .page-faq, .page-mission, .page-policies, .page-skills-school) .nav-links a:not(.btn):hover, :where(.page-about, .page-administrators, .page-admissions, .page-contact, .page-faq, .page-mission, .page-policies, .page-skills-school) .nav-links > a[aria-current="page"] { color: var(--ink); } :where(.page-about, .page-administrators, .page-admissions, .page-contact, .page-faq, .page-mission, .page-policies, .page-skills-school) .nav-links > a[aria-current="page"] { font-weight: 600; } .nav-links .btn { padding: 11px 20px; font-size: 14px; } .nav-toggle { display: none; width: 44px; height: 44px; border-radius: 10px; position: relative; border: 1px solid var(--line); } .nav-toggle span { position: absolute; inset-inline-start: 12px; inset-inline-end: 12px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s, opacity .2s; } .nav-toggle span:nth-child(1) { top: 15px; } .nav-toggle span:nth-child(2) { top: 20px; } .nav-toggle span:nth-child(3) { top: 25px; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } :where(.site) .dd { position: relative; } :where(.site:not(.page-madrasah)) .dd-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--muted); transition: color .2s; } .dd-btn svg { transition: transform .25s; } :where(.page-about, .page-administrators, .page-admissions, .page-contact, .page-faq, .page-index, .page-mission, .page-policies, .page-success-stories) .dd:hover .dd-btn, :where(.page-about, .page-administrators, .page-admissions, .page-contact, .page-faq, .page-index, .page-mission, .page-policies, .page-success-stories) .dd:focus-within .dd-btn { color: var(--ink); } .dd:hover .dd-btn svg, .dd.open .dd-btn svg { transform: rotate(180deg); } .dd-menu { position: absolute; top: 100%; inset-inline-start: -16px; min-width: 260px; padding: 20px 8px 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; } .dd-menu::before { content: ''; position: absolute; inset: 12px 0 0 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); z-index: -1; } .dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.open .dd-menu { opacity: 1; visibility: visible; transform: none; } :where(.page-success-stories) .dd-menu a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 14.5px !important; color: var(--text) !important; font-weight: 500 !important; } :where(.page-about, .page-admissions) .hero-copy { position: relative; max-width: 760px; margin: 0 auto; } :where(.page-contact, .page-mission, .page-policies, .page-skills-school) .hero-copy { position: relative; max-width: 800px; margin: 0 auto; } :where(.page-exam-calendars, .page-programmes) .hero-copy { position: relative; max-width: 780px; margin: 0 auto; } .hero-copy > * { animation: rise .8s var(--ease) both; } :where(.page-about, .page-academy, .page-admissions, .page-exam-calendars, .page-faq, .page-index, .page-mission, .page-success-stories, .page-teenagers-building-circle) .hero-copy > *:nth-child(3) { animation-delay: .16s; } :where(.page-contact, .page-policies, .page-skills-school) .hero-copy > *:nth-child(3) { animation-delay: .1s; } :where(.page-about, .page-academy, .page-admissions, .page-exam-calendars, .page-faq, .page-index, .page-mission, .page-teenagers-building-circle) .hero-copy > *:nth-child(4) { animation-delay: .24s; } :where(.page-contact, .page-policies, .page-skills-school) .hero-copy > *:nth-child(4) { animation-delay: .2s; } :where(.page-about, .page-admissions, .page-exam-calendars, .page-mission, .page-success-stories) .hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 5.4vw, 64px); line-height: 1.06; letter-spacing: -.03em; color: var(--deep); margin-bottom: 18px; } :where(.page-academy, .page-teenagers-building-circle) .hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 5vw, 62px); line-height: 1.06; letter-spacing: -.03em; color: var(--deep); margin: 4px 0 20px; } :where(.page-contact, .page-policies, .page-skills-school) .hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 5.4vw, 64px); line-height: 1.06; letter-spacing: -.03em; color: var(--deep); margin-bottom: 18px; position: relative; } :where(.page-administrators, .page-faq, .page-success-stories) .hero p { font-size: 18px; color: var(--muted); max-width: 52ch; margin: 0 auto; } :where(.page-admissions, .page-exam-calendars, .page-programmes) .hero p { font-size: 18px; color: var(--muted); max-width: 56ch; margin: 0 auto; } :where(.page-contact, .page-policies, .page-skills-school) .hero p { font-size: 18px; color: var(--muted); max-width: 50ch; margin: 0 auto; } :where(.page-administrators, .page-admissions, .page-faq) .hero-copy > h1 { animation: none; position: relative; } :where(.page-contact, .page-exam-calendars, .page-mission, .page-policies, .page-skills-school) .hero-copy > h1 { animation: none; } :where(.page-about, .page-academy, .page-admissions, .page-exam-calendars, .page-faq, .page-index, .page-mission, .page-success-stories, .page-teenagers-building-circle) .hero-copy > *:nth-child(2) { animation-delay: .08s; } :where(.site:not(.page-academy, .page-index, .page-teenagers-building-circle)) .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 32px; } :where(.page-academy, .page-index, .page-teenagers-building-circle) .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } :where(.site:not(.page-madrasah)) .band { margin-top: clamp(80px, 10vw, 128px); background: var(--wash); padding: clamp(64px, 8vw, 104px) 0; text-align: center; } :where(.site:not(.page-madrasah)) .band + .sec { padding-top: clamp(80px, 10vw, 128px); } :where(.page-about, .page-admissions) .steps::before { content: ''; position: absolute; inset-inline-start: 25px; top: 26px; bottom: 26px; width: 2px; background: repeating-linear-gradient(to bottom, #C9D8E4 0 6px, transparent 6px 12px); } .step-i { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; } .step-i::before { counter-increment: s; content: counter(s); width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 19px; display: grid; place-items: center; position: relative; z-index: 1; transition: background .3s, color .3s, border-color .3s; } .step-i.in::before { background: var(--ink); color: #fff; border-color: var(--ink); transition-delay: .3s; } .step-i div { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; } .step-i h3 { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--deep); margin-bottom: 4px; } .step-i p { color: var(--muted); font-size: 15.5px; } :where(.site:not(.page-skills-school)) .cta-box { text-align: center; padding: clamp(48px, 7vw, 88px) 24px; border-radius: var(--r); background: linear-gradient(180deg, var(--sky-l), #fff); border: 1px solid var(--line); } :where(.page-about, .page-admissions, .page-mission, .page-programmes, .page-success-stories) .cta-box h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -.02em; color: var(--deep); max-width: 14em; margin: 0 auto 14px; } :where(.page-academy, .page-exam-calendars) .cta-box h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -.02em; color: var(--deep); max-width: 15em; margin: 0 auto 14px; } :where(.page-about, .page-admissions, .page-exam-calendars, .page-programmes) .cta-box p { font-size: 17px; color: var(--muted); max-width: 48ch; margin: 0 auto 30px; } :where(.page-academy, .page-administrators, .page-index, .page-mission, .page-success-stories) .cta-box p { font-size: 17px; color: var(--muted); max-width: 46ch; margin: 0 auto 30px; } .cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } :where(.site:not(.page-contact, .page-policies, .page-skills-school)) footer.site { background: var(--deep); color: rgba(255,255,255,.62); margin-top: clamp(80px, 10vw, 128px); padding: 72px 0 28px; font-size: 14px; } :where(.page-contact, .page-policies, .page-skills-school) footer.site { background: var(--deep); color: rgba(255,255,255,.62); margin-top: clamp(80px, 10vw, 120px); padding: 72px 0 28px; font-size: 14px; } .f-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 44px; margin-bottom: 48px; } .f-brand { max-width: 320px; } .f-brand .brand { color: #fff; margin-bottom: 14px; } .f-brand p { margin-bottom: 20px; } :where(.site:not(.page-enroll)) .social { display: flex; gap: 10px; } :where(.site:not(.page-enroll)) .social a { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; transition: background .2s, color .2s; } :where(.site:not(.page-enroll)) .social a:hover { background: var(--sky); color: var(--deep); } .f-cols { display: flex; gap: 64px; flex-wrap: wrap; } .f-col h4 { font-family: var(--display); font-size: 16px; color: #fff; margin-bottom: 14px; } .f-col a, .f-col span { display: block; margin-bottom: 9px; transition: color .2s; } .f-col a:hover { color: var(--sky); } .f-bottom { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); } :where(.site:not(.page-enroll)) .home-fab { position: fixed; inset-inline-start: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 8px; padding-block: 12px 12px; padding-inline: 14px 18px; border-radius: 12px; background: #062F4D; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(6,47,77,.6); transition: background .2s, transform .2s; } :where(.site:not(.page-enroll)) .home-fab:hover { background: #094570; transform: translateY(-2px); } .wa-widget { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .wa-fab { display: inline-flex; align-items: center; gap: 10px; padding-block: 13px 13px; padding-inline: 14px 18px; border-radius: 12px; background: #128C4B; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(18,140,75,.7); transition: background .2s, transform .2s; } .wa-fab:hover { background: #0E6F3B; transform: translateY(-2px); } .wa-menu { display: none; flex-direction: column; gap: 4px; background: #fff; border-radius: 16px; padding: 8px; box-shadow: 0 24px 50px -16px rgba(6,47,77,.5); min-width: 240px; animation: waIn .25s ease both; } .wa-widget.open .wa-menu { display: flex; } .wa-menu a { display: flex; flex-direction: column; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #062F4D; } .wa-menu a small { font-weight: 500; color: #5B6E7F; font-size: 13px; } .wa-menu a:hover { background: #F4F8FB; } :where(.page-programmes).js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); } :where(.page-contact, .page-mission) .fx { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; transition: border-color .35s, box-shadow .35s, opacity .8s var(--ease), transform .8s var(--ease); } :where(.site:not(.page-index, .page-madrasah, .page-teenagers-building-circle)) .fx::after { content: ''; position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 24px; height: 24px; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(circle, #0B5A8F 0%, #062F4D 70%); transform: translate(-50%, -50%) scale(0); transition: transform .6s var(--ease); } :where(.page-index, .page-madrasah, .page-teenagers-building-circle) .fx::after { content: ''; position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 24px; height: 24px; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(circle, #0B5A8F 0%, #062F4D 70%); transform: translate(-50%, -50%) scale(0); transition: transform .6s cubic-bezier(.2,.7,.2,1); } :where(.site:not(.page-index, .page-madrasah, .page-teenagers-building-circle)) .fx.fx-on { border-color: transparent; box-shadow: 0 24px 48px -24px rgba(6,47,77,.55); } :where(.page-index, .page-madrasah, .page-teenagers-building-circle) .fx.fx-on { border-color: transparent !important; box-shadow: 0 24px 48px -24px rgba(6,47,77,.55); } .fx.fx-on::after { transform: translate(-50%, -50%) scale(90); } :where(.site:not(.page-contact, .page-index, .page-madrasah, .page-teenagers-building-circle)) .fx.fx-on h3 { color: #fff; } :where(.site:not(.page-index, .page-madrasah, .page-success-stories, .page-teenagers-building-circle)) .fx.fx-on p { color: rgba(255,255,255,.8); } :where(.site:not(.page-about)) .fx.fx-on .ic { background: rgba(133,204,255,.16); color: var(--sky, #85CCFF); } .delay-1 { --i: 1; } .delay-2 { --i: 2; } :where(.site) table { width: 100%; border-collapse: collapse; min-width: 680px; } :where(.site) th { text-align: start; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 16px 22px; background: var(--wash); } :where(.page-academy, .page-exam-calendars, .page-index, .page-programmes, .page-teenagers-building-circle) .nav-links a:not(.btn):hover { color: var(--ink); } :where(.page-academy, .page-exam-calendars, .page-programmes, .page-skills-school, .page-teenagers-building-circle) .dd:hover .dd-btn, :where(.page-academy, .page-exam-calendars, .page-programmes, .page-skills-school, .page-teenagers-building-circle) .dd:focus-within .dd-btn, :where(.page-academy, .page-exam-calendars, .page-programmes, .page-skills-school, .page-teenagers-building-circle) .dd.cur .dd-btn { color: var(--ink); } :where(.site:not(.page-madrasah)) .dd.cur .dd-btn { font-weight: 600; } :where(.page-academy, .page-exam-calendars, .page-programmes, .page-teenagers-building-circle) .dd-menu a[aria-current="page"] { font-weight: 600; } :where(.page-skills-school) .dd-menu a[aria-current="page"] { background: var(--wash); color: var(--ink) !important; font-weight: 600; } :where(.site:not(.page-success-stories)) .dd-menu a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 14.5px !important; color: var(--text) !important; } :where(.page-about, .page-administrators, .page-admissions, .page-contact, .page-faq, .page-index, .page-mission, .page-policies, .page-skills-school, .page-success-stories) .dd-menu a:hover { background: var(--wash); color: var(--ink) !important; } .dd-r .dd-menu { inset-inline-start: auto; inset-inline-end: -16px; min-width: 200px; } :where(.page-academy, .page-exam-calendars, .page-programmes, .page-teenagers-building-circle) .dd-menu a:hover, :where(.page-academy, .page-exam-calendars, .page-programmes, .page-teenagers-building-circle) .dd-menu a[aria-current="page"] { background: var(--wash); color: var(--ink) !important; } :where(.site:not(.page-academy)) .hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; } :where(.site:not(.page-about, .page-administrators)) .hero p.lead { font-size: 18px; color: var(--muted); max-width: 50ch; margin-bottom: 32px; } :where(.page-administrators, .page-admissions, .page-contact, .page-enroll, .page-exam-calendars, .page-faq, .page-mission, .page-policies, .page-skills-school) .hero h1 .w { display: inline-block; white-space: nowrap; } .hero h1 .ch { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(8deg); filter: blur(8px); animation: chIn .7s var(--ease) var(--d, 0ms) forwards; } :where(.site:not(.page-enroll)) .hero h1 .ball { position: absolute; inset-inline-start: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--sky-d); opacity: 0; pointer-events: none; will-change: transform; box-shadow: 0 0 0 0 rgba(62,151,217,.45); } :where(.site:not(.page-enroll)) .hero h1 .ball.landed { animation: ping 1.4s ease-out .1s 2; } :where(.site:not(.page-about, .page-contact, .page-mission, .page-success-stories)) .fx.fx-on .btn-line { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; } :where(.site:not(.page-about, .page-contact, .page-mission, .page-success-stories)) .fx.fx-on .btn-ink { background: var(--sky, #85CCFF); color: var(--deep, #062F4D); } :where(.site) .field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--deep); margin-bottom: 7px; } .mini { display: flex; flex-direction: column; gap: 10px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); } .mini:hover { border-color: #C9D6E1; box-shadow: var(--shadow); transform: translateY(-3px); } :where(.page-contact, .page-policies, .page-skills-school).js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .35s, box-shadow .35s; transition-delay: calc(var(--i, 0) * 100ms); } :where(.page-academy, .page-index, .page-madrasah) .faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .group-label + .field, .group-label + .field-row { margin-top: 0; } :where(.site) .field { margin-bottom: 16px; } :where(.page-administrators) .person { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 24px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); text-align: start; width: 100%; transition: box-shadow .3s, border-color .3s, transform .3s var(--ease); } :where(.page-administrators) .person:hover { box-shadow: var(--shadow); border-color: transparent; transform: translateY(-4px); } :where(.page-admissions) .req { display: flex; flex-direction: column; padding: 30px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); transition: box-shadow .3s, border-color .3s, transform .3s var(--ease); } :where(.page-admissions) .req:hover { box-shadow: var(--shadow); border-color: transparent; transform: translateY(-3px); } :where(.page-admissions).js .req.reveal.in:hover { transform: translateY(-3px); transition-delay: 0s; } :where(.page-about, .page-admissions, .page-mission, .page-success-stories).js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 100ms); } .table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; box-shadow: var(--shadow); } :where(.site) tr:hover td { background: #F8FBFE; } :where(.site:not(.page-admissions, .page-madrasah, .page-mission, .page-skills-school)) .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } :where(.page-admissions, .page-madrasah) .acts { display: flex; gap: 12px; flex-wrap: wrap; } :where(.page-mission, .page-skills-school) .acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .facts-wrap { padding-top: clamp(48px, 6vw, 72px); } :where(.site:not(.page-skills-school)) .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); } :where(.site:not(.page-skills-school)) .fact { display: flex; align-items: center; gap: 14px; padding: 24px 22px; min-width: 0; } .fact + .fact { border-inline-start: 1px solid var(--line); } .fact .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; flex: none; } :where(.site:not(.page-madrasah, .page-skills-school, .page-teenagers-building-circle)) .fact b { display: block; font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--deep); } :where(.page-madrasah, .page-teenagers-building-circle) .fact b { display: block; font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.15; color: var(--deep); } :where(.site:not(.page-index, .page-skills-school)) .fact div > span { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; } :where(.site:not(.page-skills-school)) .facts .btn { margin: 0 22px; white-space: nowrap; } :where(.page-madrasah) .plan { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 16px; } :where(.page-madrasah) .plan.f::before { content: 'Most complete'; position: absolute; top: -13px; inset-inline-start: 28px; padding: 3px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; } :where(.page-academy) .track { display: flex; flex-direction: column; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); transition: box-shadow .3s, border-color .3s, transform .3s var(--ease); } :where(.page-academy) .track:hover { box-shadow: var(--shadow); border-color: transparent; transform: translateY(-3px); } :where(.site:not(.page-policies, .page-programmes, .page-skills-school, .page-teenagers-building-circle)) .price { font-size: 14px; color: var(--muted); } :where(.page-academy, .page-index) .price b { font-family: var(--display); font-size: 24px; color: var(--deep); margin-inline-end: 4px; } :where(.page-madrasah) .sc2 { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 28px; transition: box-shadow .3s, border-color .3s, transform .3s var(--ease); } :where(.page-madrasah) .sc2:hover { box-shadow: var(--shadow); border-color: transparent; transform: translateY(-3px); } :where(.page-academy).js .track.reveal.in:hover { transform: translateY(-3px); transition-delay: 0s; } .faq details { border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: box-shadow .25s; } .faq details[open] { box-shadow: var(--shadow); border-color: transparent; } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-weight: 600; font-size: 16.5px; color: var(--deep); } .faq summary::-webkit-details-marker { display: none; } :where(.site:not(.page-admissions, .page-enroll)) .faq .plus { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--wash); color: var(--ink); display: grid; place-items: center; transition: transform .3s var(--ease); } .faq details[open] .plus { transform: rotate(45deg); } .faq details p { padding: 0 24px 22px; font-size: 15.5px; color: var(--muted); } .faq summary:focus-visible { outline: 2px solid var(--sky-d); outline-offset: -2px; border-radius: 16px; } :where(.page-teenagers-building-circle) .pillar { display: flex; flex-direction: column; padding: 30px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); transition: box-shadow .3s, border-color .3s, transform .3s var(--ease); } :where(.page-teenagers-building-circle) .pillar:hover { box-shadow: var(--shadow); border-color: transparent; transform: translateY(-3px); } :where(.page-teenagers-building-circle).js .pillar.reveal.in:hover { transform: translateY(-3px); transition-delay: 0s; } :where(.page-academy, .page-administrators, .page-index, .page-madrasah, .page-teenagers-building-circle).js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } :where(.site:not(.page-enroll)).js .reveal.in { opacity: 1; transform: none; } :where(.page-madrasah).js .sc2.reveal.in:hover { transform: translateY(-3px); transition-delay: 0s; } :where(.site:not(.page-about, .page-contact, .page-mission, .page-success-stories)) .fx { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; transition: color .35s, border-color .35s, box-shadow .35s, transform .35s var(--ease, ease); } :where(.page-policies, .page-skills-school) .wa-fab:focus-visible, :where(.page-policies, .page-skills-school) .wa-menu a:focus-visible { outline: 2px solid #85CCFF; outline-offset: 3px; } :where(.site:not(.page-about, .page-contact, .page-mission, .page-success-stories)) .fx.fx-on :is(h3, h4, b, strong, blockquote, .p-name) { color: #fff; } :where(.site:not(.page-about, .page-contact, .page-mission, .page-success-stories)) .fx.fx-on :is(p, span, li, .goal) { color: rgba(255,255,255,.8); } :where(.site:not(.page-about, .page-contact, .page-mission, .page-success-stories)) .fx.fx-on :is(small, .k, .p-role, em) { color: var(--sky, #85CCFF); } .fx.fx-on .tag { background: rgba(255,255,255,.12); color: #fff; } .fx.fx-on .tag.on { background: var(--sky, #85CCFF); color: var(--deep, #062F4D); } :where(.site:not(.page-about, .page-contact, .page-mission, .page-success-stories)) .fx.fx-on :is(.tag span, .p-toggle span, .btn span) { color: inherit; } .fx.fx-on .price b { color: var(--sky, #85CCFF); } :where(.site:not(.page-about, .page-contact, .page-mission, .page-success-stories)) .fx.fx-on :is(.more, .p-toggle) { color: var(--sky, #85CCFF); } :where(.site:not(.page-about, .page-contact, .page-mission, .page-success-stories)) .fx.fx-on > svg, :where(.site:not(.page-about, .page-contact, .page-mission, .page-success-stories)) .fx.fx-on .qm { color: var(--sky, #85CCFF); } :where(.site:not(.page-about, .page-contact, .page-mission, .page-success-stories)) .fx.fx-on :is(.avatar, .p-mono) { background: var(--sky, #85CCFF); color: var(--deep, #062F4D); } :where(.site:not(.page-about, .page-contact, .page-mission, .page-success-stories)) .fx.fx-on :is(li, .foot, figcaption) { border-color: rgba(255,255,255,.15); } :where(.site:not(.page-about)) .fx.fx-on .note { background: rgba(133,204,255,.14); color: #fff; } .fx.fx-on .yr i { background: rgba(255,255,255,.12); color: #fff; } .fx.fx-on .yr i + i { background: var(--sky, #85CCFF); color: var(--deep, #062F4D); } :where(.site:not(.page-contact)) .plan.f.fx::before { top: 16px; inset-inline-start: auto; inset-inline-end: 18px; z-index: 1; } svg.sprite { position: absolute; } .delay-3 { --i: 3; } /* ---------------------------------------------------------------- Portals (dashboards, staff tools, library, quizzes) ---------------------------------------------------------------- */ :where(.app) body { font-family: 'Inter',sans-serif; color: var(--text); background: var(--wash); line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; } html:where(.app:not(.page-library, .page-quiz, .page-tracker)) { scroll-behavior: smooth; scroll-padding-top: 80px; } :where(.app) [hidden] { display: none !important; } :where(.page-tracker) button, :where(.page-tracker) input { font: inherit; } :where(.student) button, :where(.student) input, :where(.student) textarea { font: inherit; } :where(.student) a:focus-visible, :where(.student) button:focus-visible, :where(.student) input:focus-visible, :where(.student) textarea:focus-visible, :where(.student) summary:focus-visible { outline: 2px solid var(--sky-d); outline-offset: 3px; } :where(.staff) a:focus-visible, :where(.staff) button:focus-visible, :where(.staff) input:focus-visible, :where(.staff) textarea:focus-visible, :where(.staff) select:focus-visible, :where(.staff) summary:focus-visible { outline: 2px solid var(--sky-d); outline-offset: 3px; } :where(.page-library) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 600; border-radius: 12px; white-space: nowrap; transition: background .2s,color .2s,border-color .2s,transform .2s; } :where(.page-quiz) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; font-size: 14.5px; font-weight: 600; border-radius: 12px; white-space: nowrap; transition: background .2s,color .2s,border-color .2s,transform .2s,opacity .2s; } :where(.page-tracker) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; font-size: 14.5px; font-weight: 600; border-radius: 999px; transition: background .2s,color .2s; } :where(.app:not(.page-quiz, .page-tracker)) .btn:disabled { opacity: .6; cursor: default; } :where(.page-library, .page-quiz) .btn-ink:hover:not(:disabled) { background: var(--deep); } :where(.page-library, .page-quiz) .btn-line { border: 1.5px solid var(--line); background: #fff; color: var(--ink); } :where(.app) .chips { display: flex; gap: 8px; flex-wrap: wrap; } :where(.page-library, .page-quiz) .top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } :where(.page-library, .page-quiz) .top nav { display: flex; gap: 8px; align-items: center; } :where(.page-library, .page-quiz) .login { min-height: calc(100vh - 69px); display: grid; place-items: center; padding: 32px 24px; background: linear-gradient(180deg,#fff 0%,var(--wash) 60%); } :where(.page-library, .page-quiz) .lbox { width: 100%; max-width: 440px; background: #fff; border-radius: 20px; padding: 40px; box-shadow: var(--shadow); animation: up .5s var(--ease) both; } :where(.page-library, .page-quiz) .lbox h1 { font-family: var(--d); font-size: 32px; line-height: 1.1; letter-spacing: -.02em; color: var(--deep); margin-bottom: 8px; } :where(.page-library, .page-quiz) .f { margin-bottom: 16px; } :where(.page-library, .page-quiz) .f label { display: block; font-size: 13px; font-weight: 600; color: var(--deep); margin-bottom: 6px; } :where(.app:not(.page-academy-dashboard, .page-dashboard)) .brand em { font-style: normal; font-family: 'Inter',sans-serif; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--sky-l); color: var(--ink); } .lbox .crest { width: 56px; height: 56px; border-radius: 16px; background: var(--sky-l); display: grid; place-items: center; margin-bottom: 20px; } .lbox .kick { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-d); margin-bottom: 6px; } :where(.page-library, .page-quiz) .lbox > p { color: var(--muted); margin-bottom: 26px; font-size: 15px; } :where(.page-quiz, .page-tracker) .lbox .btn { width: 100%; padding: 14px; } :where(.page-library) input { width: 100%; min-height: 48px; padding: 0 15px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-size: 15px; color: var(--text); transition: border-color .2s,box-shadow .2s; } :where(.page-quiz) input { width: 100%; padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-size: 15px; color: var(--text); transition: border-color .2s,box-shadow .2s; } :where(.page-library, .page-quiz) input:hover { border-color: #C9D6E1; } :where(.page-library, .page-quiz) input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(62,151,217,.15); } :where(.app:not(.page-quiz)) .err { color: #B42318; font-size: 13.5px; min-height: 20px; margin: 4px 0 10px; } :where(.page-library, .page-quiz) .demo { background: var(--sky-l); border-radius: 12px; padding: 11px 14px; font-size: 13px; color: var(--ink); margin-bottom: 18px; } .lnote { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--muted); } :where(.page-quiz, .page-tracker) .msg:empty { display: none; } :where(.staff) .c { background: #fff; border-radius: 20px; padding: 28px; grid-column: span 6; box-shadow: var(--shadow); animation: up .4s var(--ease) backwards; } :where(.student) .c { background: #fff; border-radius: 28px; padding: 28px; grid-column: span 4; animation: up-dash .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i,0)*60ms); } .c.w12 { grid-column: span 12; } .c.w8 { grid-column: span 8; } .lnk { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--sky-d); } :where(.app) table { width: 100%; border-collapse: collapse; font-size: 14px; } :where(.app) th { text-align: start; color: var(--muted); font-size: 12.5px; padding: 8px 6px; } :where(.app) td { padding: 11px 6px; border-top: 1px solid var(--line); } .pw { position: relative; display: block; } .pw > input { padding-inline-end: 70px !important; } .pw > button { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #094570; font: 600 13px/1 Inter,system-ui,sans-serif; padding: 8px 10px; border-radius: 8px; cursor: pointer; } .pw > button:hover { background: #F1F7FC; } .pw > button:focus-visible { outline: 2px solid #3E97D9; } /* ---------------------------------------------------------------- Staff portals ---------------------------------------------------------------- */ :root:where(.staff) { --deep: #062F4D; --ink: #094570; --sky: #85CCFF; --sky-d: #3E97D9; --sky-l: #E3F2FD; --wash: #F4F8FB; --text: #0E2A3D; --muted: #5B6E7F; --line: #E3EAF0; --d: 'Bricolage Grotesque','Inter',sans-serif; --ease: cubic-bezier(.2,.7,.2,1); --ring: 0 0 0 1px var(--line); --shadow: 0 0 0 1px var(--line),0 12px 32px -22px rgba(6,47,77,.25); } :where(.staff) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; font-size: 14.5px; font-weight: 600; border-radius: 12px; transition: background .2s,color .2s,border-color .2s,transform .2s; } :where(.staff) .wrap { max-width: 1200px; margin: 0 auto; padding: 28px 24px; } :where(.staff) .btn-ink:hover:not(:disabled) { background: var(--deep); } :where(.staff) .btn-line { border: 1.5px solid var(--line); background: #fff; color: var(--ink); } :where(.staff) .btn-line:hover { border-color: var(--ink); } :where(.staff) .brand { display: flex; align-items: center; gap: 10px; font-family: var(--d); font-weight: 700; font-size: 18px; color: var(--deep); } :where(.staff) .body { padding: 4px 18px 20px; display: grid; gap: 20px; border-top: 1px solid var(--line); padding-top: 18px; } :where(.app:not(.page-quiz, .page-tracker)) .btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; } :where(.staff) .top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } :where(.staff) .top > div { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } :where(.staff) .top nav { display: flex; gap: 8px; align-items: center; } :where(.staff) .top .btn { padding: 9px 16px; font-size: 13.5px; } :where(.staff) .login { min-height: calc(100vh - 69px); display: grid; place-items: center; padding: 32px 24px; background: linear-gradient(180deg,#fff 0%,var(--wash) 60%); } :where(.staff) .lbox { width: 100%; max-width: 440px; background: #fff; border-radius: 20px; padding: 40px; box-shadow: var(--shadow); animation: up .5s var(--ease) both; } :where(.staff) .lbox h1 { font-family: var(--d); font-size: 32px; line-height: 1.1; letter-spacing: -.02em; color: var(--deep); margin-bottom: 8px; } :where(.staff) .f { margin-bottom: 16px; } :where(.staff) .lbox > p { color: var(--muted); margin-bottom: 26px; font-size: 15px; } :where(.staff) .lbox .btn { width: 100%; padding: 14px; } :where(.staff) .f label, :where(.staff) .fl { display: block; font-size: 13px; font-weight: 600; color: var(--deep); margin-bottom: 6px; } :where(.staff) .in, :where(.staff) .f input { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-size: 14.5px; transition: border-color .2s,box-shadow .2s; } :where(.staff) .f input { padding: 13px 15px; font-size: 15px; } :where(.staff) .in:focus, :where(.staff) .f input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(62,151,217,.15); } :where(.app:not(.page-dashboard, .page-tbc-dashboard)) textarea.in { resize: vertical; } :where(.app) select.in { appearance: none; -webkit-appearance: none; padding-inline-end: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23094570' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 11px center/14px no-repeat; } :where(.staff) .demo { background: var(--sky-l); border-radius: 12px; padding: 11px 14px; font-size: 13px; color: var(--ink); margin-bottom: 18px; } :where(.staff) .greet { position: relative; overflow: hidden; background: linear-gradient(120deg,var(--sky-l) 0%,#fff 70%); border-radius: 20px; padding: 30px 34px; box-shadow: var(--shadow); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; } :where(.staff) .greet small { display: block; color: var(--sky-d); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; } :where(.staff) .greet h1 { font-family: var(--d); font-size: clamp(26px,3.4vw,38px); line-height: 1.1; letter-spacing: -.02em; color: var(--deep); margin: 6px 0 14px; } :where(.staff) .grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 18px; } :where(.staff) .pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; } :where(.staff) .empty { color: var(--muted); font-size: 14px; padding: 14px 16px; background: var(--wash); border-radius: 12px; } :where(.app:not(.page-library)) .tile { background: var(--wash); border-radius: 14px; padding: 12px 14px; } :where(.staff) .list { list-style: none; display: grid; gap: 8px; } :where(.staff) .greet::after { content: ''; position: absolute; inset-inline-end: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 1.5px dashed rgba(9,69,112,.14); pointer-events: none; } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) .chips span { font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: var(--ring); } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) .chips span:last-child { background: var(--ink); color: #fff; box-shadow: none; } .tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 18px 0; padding: 5px; background: #fff; border-radius: 14px; box-shadow: var(--ring); width: fit-content; max-width: 100%; } .tabs button { padding: 10px 18px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 14px; transition: background .2s,color .2s; } .tabs button:hover { color: var(--ink); background: var(--wash); } .tabs button[aria-selected=true] { background: var(--ink); color: #fff; } :where(.staff) .c h2 { font-family: var(--d); font-size: 20px; color: var(--deep); margin-bottom: 6px; } :where(.staff) .k { font-size: 12.5px; font-weight: 700; color: var(--sky-d); margin-bottom: 4px; } :where(.staff) .sub { color: var(--muted); font-size: 14px; } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) .list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 14px; background: var(--wash); border-radius: 12px; font-size: 14px; } .c.w4 { grid-column: span 4; } :where(.staff) .c > .sub { margin-bottom: 16px; } .p-ink { background: var(--ink); color: #fff; } .p-sky { background: var(--sky-l); color: var(--ink); } .p-red { background: #FEE4E2; color: #B42318; } .p-wash { background: var(--wash); color: var(--muted); } .p-dash { background: #fff; color: var(--ink); border: 1.5px dashed var(--ink); } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .row3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .frm { display: grid; gap: 14px; margin-top: 6px; } .frm .btn { justify-self: start; } :where(.app) .inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } :where(.app) .inline .in { flex: 1; min-width: 120px; } .alist { display: grid; gap: 8px; margin: 14px 0 18px; max-height: 520px; overflow: auto; } .arow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 10px 10px; padding-inline: 16px 12px; background: var(--wash); border-radius: 12px; flex-wrap: wrap; } .arow b { display: block; color: var(--deep); font-size: 14.5px; } .arow small { color: var(--muted); font-size: 12.5px; } .segb { display: flex; gap: 2px; flex-wrap: wrap; background: #fff; padding: 3px; border-radius: 10px; box-shadow: var(--ring); } .segb button { padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); transition: background .15s,color .15s; } .segb button:hover { color: var(--ink); } .segb button.on { background: var(--ink); color: #fff; } .segb button.on[data-v=Absent] { background: #B42318; } .segb button.on[data-v=Late] { background: #B7791F; } .segb button.on[data-v=Excused] { background: var(--sky-d); } .bar2 { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 12px; } .bar2 > div { min-width: 170px; } :where(.app:not(.page-teacher)) .pick { display: grid; gap: 6px; margin: 10px 0 14px; max-height: 240px; overflow: auto; max-height: 420px; } .pick label { display: flex; gap: 10px; align-items: center; font-size: 14px; padding: 9px 12px; background: var(--wash); border-radius: 10px; cursor: pointer; transition: background .15s; } .pick label:hover { background: var(--sky-l); } .pick input { width: 17px; height: 17px; accent-color: var(--ink); } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) .list li button { color: var(--ink); font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 8px; background: #fff; box-shadow: var(--ring); } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) .list li button:hover { box-shadow: 0 0 0 1.5px var(--ink); } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) details.box { background: #fff; border-radius: 14px; margin-top: 10px; box-shadow: var(--ring); transition: box-shadow .2s; } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) details.box:hover { box-shadow: 0 0 0 1px #C9D8E4; } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) details.box[open] { box-shadow: 0 0 0 1.5px var(--ink),0 16px 36px -24px rgba(6,47,77,.35); } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) details.box > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 18px; cursor: pointer; } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) details.box > summary::-webkit-details-marker { display: none; } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) details.box > summary::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 2.2px solid var(--ink); border-bottom: 2.2px solid var(--ink); transform: rotate(45deg) translateY(-3px); transition: transform .25s; margin-inline-start: 4px; } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) details.box[open] > summary::after { transform: rotate(225deg) translateY(-3px); } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) details.box > summary b { display: block; color: var(--deep); font-size: 15px; } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) details.box > summary small { color: var(--muted); font-size: 12.5px; } .sum-r { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-inline-start: auto; } :where(.app) .sec h3 { font-family: var(--d); font-size: 16px; color: var(--deep); margin-bottom: 10px; } .surs { display: grid; gap: 6px; margin-bottom: 10px; } .sr { display: flex; gap: 8px; align-items: center; padding-block: 6px 6px; padding-inline: 14px 6px; background: var(--wash); border-radius: 10px; font-size: 14px; } .sr span { flex: 1; font-weight: 600; color: var(--deep); } .sr select { width: auto; padding-block: 7px 7px; padding-inline: 10px 32px; } :where(.staff) .x { width: 30px; height: 30px; border-radius: 8px; background: #fff; color: #B42318; font-weight: 700; box-shadow: var(--ring); } :where(.staff) .x:hover { background: #FEE4E2; } .mj { display: grid; grid-template-columns: 140px 1fr; gap: 8px; margin-bottom: 6px; } .chipl { display: flex; gap: 6px; flex-wrap: wrap; } .chipl span { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--wash); color: var(--muted); } .mrow { padding: 14px 16px; background: var(--wash); border-radius: 12px; display: grid; gap: 10px; } .mh { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .mh b { color: var(--deep); font-size: 14.5px; } :where(.staff) .mine { background: #fff; border-radius: 10px; padding: 11px 13px; font-size: 14px; box-shadow: var(--ring); } :where(.staff) .mine p { margin-top: 4px; } :where(.staff) .foot { text-align: center; color: var(--muted); font-size: 12.5px; padding: 32px 0 44px; } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) .tool { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 6px 0 12px; } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) tr:first-child td { border-top: 0; } :where(.app:not(.page-academy-dashboard)) .scores { display: grid; gap: 8px; margin: 8px 0; } :where(.app:not(.page-academy-dashboard)) .scores div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 7px 7px; padding-inline: 14px 7px; background: var(--wash); border-radius: 12px; font-size: 14px; } :where(.app:not(.page-academy-dashboard)) .scores input { width: 100px; } .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--deep); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; z-index: 100; box-shadow: 0 14px 30px -10px rgba(6,47,77,.6); max-width: 90vw; text-align: center; animation: up .3s var(--ease) both; } .toast.bad { background: #B42318; } .tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 0 0 16px; } :where(.app:not(.page-library)) .tile b { display: block; font-family: var(--d); font-size: 24px; line-height: 1.1; color: var(--ink); } :where(.app:not(.page-library)) .tile span { font-size: 12.5px; color: var(--muted); } .tile.warn b { color: #B42318; } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) .tool > div { min-width: 150px; flex: 1 1 150px; } :where(.app:not(.page-teacher)) .pick label small { margin-inline-start: auto; color: var(--muted); font-size: 12.5px; text-align: end; } .pcheck { background: var(--wash); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; } .ptop { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; } .ptop b { color: var(--deep); font-size: 14.5px; } .ptop small { color: var(--muted); font-size: 12.5px; } /* ---------------------------------------------------------------- Student dashboards ---------------------------------------------------------------- */ :root:where(.student) { --deep: #062F4D; --ink: #094570; --sky: #85CCFF; --sky-d: #3E97D9; --wash: #F1F7FC; --text: #0E2A3D; --muted: #55697B; --line: rgba(9,69,112,.12); --d: 'Bricolage Grotesque','Inter',sans-serif; } :where(.student) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; font-size: 14.5px; font-weight: 600; border-radius: 999px; transition: background .2s,color .2s; } :where(.student) .wrap { max-width: 1200px; margin: 0 auto; padding: 24px; } :where(.student) .btn-ink:hover { background: var(--deep); } :where(.student) .btn-line { border: 1px solid var(--ink); color: var(--ink); } :where(.student) .btn-line:hover { background: var(--ink); color: #fff; } :where(.student) .brand { display: flex; align-items: center; gap: 10px; font-family: var(--d); font-weight: 700; font-size: 18px; color: var(--ink); } :where(.student) .top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } :where(.student) .top div { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } :where(.student) .top nav { display: flex; gap: 10px; align-items: center; } :where(.student) .top .btn { padding: 10px 18px; font-size: 13.5px; } :where(.student) .login { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 24px; } :where(.student) .lbox { width: 100%; max-width: 440px; background: #fff; border-radius: 32px; padding: 40px; box-shadow: 0 30px 60px -40px rgba(6,47,77,.5); } :where(.student) .lbox h1 { font-family: var(--d); font-size: 34px; line-height: 1.08; letter-spacing: -.02em; color: var(--deep); margin-bottom: 8px; } :where(.student) .lbox p { color: var(--muted); margin-bottom: 24px; font-size: 15px; } :where(.student) .f { margin-bottom: 14px; } :where(.student) .f label { display: block; font-size: 13.5px; font-weight: 600; color: var(--deep); margin-bottom: 6px; } :where(.student) .f input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1.5px solid transparent; background: var(--wash); font-size: 15px; } :where(.student) .f input:focus { outline: none; border-color: var(--ink); background: #fff; } :where(.app) .btn-ghost { background: rgba(255,255,255,.14); color: #fff; } :where(.app) .btn-ghost:hover { background: rgba(255,255,255,.26); } :where(.student) .lbox .btn { width: 100%; } .hint { margin-top: 16px; font-size: 13px; color: var(--muted); } .hint a { color: var(--ink); font-weight: 600; } :where(.student) .demo { background: var(--wash); border-radius: 14px; padding: 10px 14px; font-size: 13px; color: var(--deep); margin-bottom: 16px; } :where(.student) .greet { background: var(--ink); color: #fff; border-radius: 32px; padding: 36px 40px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; } :where(.student) .greet small { color: var(--sky); font-weight: 600; font-size: 14px; } :where(.student) .greet h1 { font-family: var(--d); font-size: clamp(28px,4vw,44px); line-height: 1.08; letter-spacing: -.02em; margin: 4px 0 12px; } :where(.student) .msg { font-size: 13.5px; min-height: 18px; } :where(.student) .grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; margin-top: 16px; } :where(.student) .pill { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px; } :where(.student) .empty { color: var(--muted); font-size: 14px; } :where(.student) .list { list-style: none; display: grid; gap: 10px; } :where(.student) .chips span { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.14); } .remind { display: grid; gap: 8px; margin-top: 16px; } .remind a { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: #fff; border-radius: 20px; padding: 14px 20px; font-size: 14.5px; font-weight: 600; color: var(--deep); transition: box-shadow .2s; } .remind a:hover { box-shadow: 0 0 0 1.5px var(--ink); } .remind a span { flex-shrink: 0; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--sky); color: var(--deep); } .remind a.urgent span { background: #FEE4E2; color: #B42318; } :where(.app:not(.page-academy-tutor, .page-tbc-facilitator)) .c.w6 { grid-column: span 6; } :where(.student) .c h2 { font-family: var(--d); font-size: 20px; color: var(--deep); margin-bottom: 14px; } :where(.student) .k { font-size: 12.5px; font-weight: 700; color: var(--sky-d); margin-bottom: 6px; } :where(.app) .big { font-family: var(--d); font-size: 30px; line-height: 1.1; color: var(--ink); letter-spacing: -.01em; } :where(.student) .sub { color: var(--muted); font-size: 14px; margin-top: 4px; } .p-paid { background: var(--ink); color: #fff; } .p-due { background: var(--sky); color: var(--deep); } :where(.app:not(.page-academy-tutor)) .p-over { background: #FEE4E2; color: #B42318; } :where(.student) .bar { height: 12px; background: var(--wash); border-radius: 99px; overflow: hidden; margin: 10px 0 6px; } :where(.app:not(.page-quiz)) .bar i { display: block; height: 100%; background: var(--ink); border-radius: 99px; width: 0; transition: width 1.1s cubic-bezier(.2,.7,.2,1); } :where(.student) .row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--muted); } .sur { display: flex; flex-wrap: wrap; gap: 8px; } .sur span { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; } .s-Memorised { background: var(--ink); color: #fff; } .s-Revising { background: var(--sky); color: var(--deep); } .s-In-progress { background: #fff; color: var(--ink); border: 1.5px dashed var(--ink); } .s-Not-started { background: var(--wash); color: var(--muted); } .leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 14px 0 8px; } :where(.student) .list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--wash); border-radius: 16px; font-size: 14.5px; } :where(.student) .list li b { color: var(--deep); } :where(.student) .list li span { color: var(--muted); text-align: end; } :where(.student) .list a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--sky-d); } :where(.student) .mine { background: var(--wash); border-radius: 16px; padding: 14px 16px; } :where(.student) td:last-child, :where(.student) th:last-child { text-align: end; } .chart { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin: 6px 0 14px; } .chart div { flex: 1; background: var(--sky); border-radius: 8px 8px 0 0; position: relative; min-height: 6px; transition: height .9s; } .chart div:last-child { background: var(--ink); } .chart div em { position: absolute; top: -18px; inset-inline-start: 0; inset-inline-end: 0; text-align: center; font-style: normal; font-size: 11px; color: var(--muted); font-weight: 600; } :where(.student) .path { display: flex; flex-wrap: wrap; gap: 8px; } :where(.student) .path span { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: var(--wash); color: var(--muted); } :where(.student) .path span.done { background: var(--sky); color: var(--deep); } :where(.app:not(.page-library, .page-tbc-facilitator, .page-tracker)) .path span.now { background: var(--ink); color: #fff; } :where(.student) .foot { text-align: center; color: var(--muted); font-size: 12.5px; padding: 28px 0 40px; } .asgs { display: grid; gap: 10px; } :where(.student) .asg { background: var(--wash); border-radius: 20px; } :where(.student) .asg[open] { box-shadow: 0 0 0 1.5px var(--ink); background: #fff; } :where(.student) .asg summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; } :where(.student) .asg summary::-webkit-details-marker { display: none; } :where(.student) .asg summary b { display: block; color: var(--deep); font-size: 15.5px; } :where(.student) .asg summary small { color: var(--muted); font-size: 13px; } .st-todo { background: var(--sky); color: var(--deep); } .st-over { background: #FEE4E2; color: #B42318; } .st-sub { background: #fff; color: var(--ink); border: 1.5px dashed var(--ink); } .st-mark { background: var(--ink); color: #fff; } .abody { padding: 0 20px 20px; display: grid; gap: 12px; } .abody p { font-size: 14.5px; color: var(--text); } :where(.app:not(.page-quiz, .page-tbc-facilitator, .page-teacher)) .mark { background: var(--wash); border-radius: 16px; padding: 14px 16px; } :where(.app:not(.page-quiz, .page-tbc-facilitator, .page-teacher)) .mark b { font-family: var(--d); font-size: 24px; color: var(--ink); } .subm { display: grid; gap: 8px; } .subm label { font-size: 13px; font-weight: 600; color: var(--deep); } .subm textarea, .subm input { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid transparent; background: var(--wash); font-size: 14.5px; resize: vertical; } .subm textarea:focus, .subm input:focus { outline: none; border-color: var(--ink); background: #fff; } :where(.student) .msg.bad { color: #B42318; } :where(.app:not(.page-quiz)) .msg.good { color: var(--ink); font-weight: 600; } .subm .btn { justify-self: start; } :where(.app) .tools { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } :where(.student) .tool { display: block; background: var(--wash); border-radius: 20px; padding: 18px 20px; border: 1.5px solid transparent; transition: border-color .2s,background .2s,transform .2s; } :where(.student) .tool:hover { border-color: var(--ink); background: #fff; transform: translateY(-2px); } :where(.student) .tool b { display: block; font-family: var(--d); font-size: 17px; color: var(--deep); margin-bottom: 2px; } :where(.student) .tool span { display: block; font-size: 13.5px; color: var(--muted); } .gbtn { display: flex; gap: 10px; flex-wrap: wrap; } /* ---------------------------------------------------------------- About ---------------------------------------------------------------- */ :where(.page-about) .hero::after { width: 360px; height: 360px; inset-inline-end: -130px; bottom: -150px; } :where(.page-about) .head h2, :where(.page-about) .h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.12; letter-spacing: -.02em; color: var(--deep); } :where(.page-about) .hero p { font-size: 18px; color: var(--muted); max-width: 54ch; margin: 0 auto; } .statement p { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.25; letter-spacing: -.02em; color: var(--deep); max-width: 26em; margin: 0 auto; text-align: center; } .statement p span { color: #8FA6B8; } .story-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start; } :where(.page-about) .story .kicker { margin-bottom: 10px; } :where(.page-about) .story p { color: var(--muted); font-size: 17px; max-width: 56ch; } :where(.page-about) .story p + p { margin-top: 16px; } :where(.page-about) .story p b { color: var(--deep); font-weight: 600; } :where(.page-about) .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } :where(.page-about) .chips a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 14.5px; font-weight: 600; transition: border-color .2s, transform .2s var(--ease); } :where(.page-about) .chips a::after { content: '→'; transition: transform .2s; } :where(.page-about) .chips a:hover { border-color: var(--ink); transform: translateY(-2px); } :where(.page-about) .chips a:hover::after { transform: translateX(3px); } .belief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .belief { padding: 32px 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); } .belief .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; margin-bottom: 22px; } .belief .ic svg { width: 26px; height: 26px; } .belief h3 { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--deep); margin-bottom: 10px; } .belief p { color: var(--muted); font-size: 15.5px; } :where(.page-about) .band .qm { width: 40px; height: 40px; color: var(--sky-d); margin: 0 auto 18px; display: block; } :where(.page-about) .quote { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.3; letter-spacing: -.01em; color: var(--deep); max-width: 26em; margin: 0 auto 14px; } .quote-by { color: var(--muted); font-size: 14px; } .nums { margin-top: clamp(40px, 5vw, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); text-align: start; } :where(.page-about) .num { display: flex; align-items: center; gap: 14px; padding: 24px 22px; } :where(.page-about) .num + .num { border-inline-start: 1px solid var(--line); } .num .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; flex: none; } :where(.page-about) .num b { display: block; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--deep); } :where(.page-about) .num span { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; } :where(.page-about) .note { margin-top: 16px; font-size: 13px; color: var(--muted); } :where(.page-about) .steps { position: relative; display: grid; gap: 14px; max-width: 820px; margin: 0 auto; counter-reset: s; } .name-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: center; padding: clamp(28px, 4.5vw, 52px); border: 1px solid var(--line); border-radius: var(--r); background: #fff; } :where(.page-about) .seal { position: relative; width: 180px; height: 180px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--sky-l) 60%, #CFE8FA 100%); } :where(.page-about) .seal::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 1.5px dashed rgba(9,69,112,.18); } .seal .crest { width: 64px; height: auto; } .seal b { position: absolute; bottom: 22px; font-family: 'Amiri', serif; font-size: 22px; color: var(--ink); direction: rtl; } .name-box h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -.02em; color: var(--deep); margin: 4px 0 12px; } .name-box p { color: var(--muted); font-size: 17px; max-width: 58ch; } .name-box em { font-style: normal; color: var(--ink); font-weight: 600; } :where(.page-about) .fx { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; transition: color .35s, border-color .35s, box-shadow .35s, opacity .8s var(--ease), transform .8s var(--ease); } :where(.page-about) .fx.fx-on .ic { background: rgba(133,204,255,.16); color: var(--sky); } /* ---------------------------------------------------------------- Academy ---------------------------------------------------------------- */ :where(.page-academy) .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; } :where(.page-academy) .hero-art { border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 60px -36px rgba(6,47,77,.45); border: 1px solid var(--line); animation: rise .9s .2s var(--ease) both; } :where(.page-academy) .hero-art svg { display: block; width: 100%; height: auto; } :where(.page-academy) .tag { padding: 5px 12px; border-radius: 999px; background: var(--wash); font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; } :where(.page-academy) .tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .track-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 22px; } :where(.page-academy) .track .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; flex: none; } :where(.page-academy) .track .ic svg { width: 26px; height: 26px; } :where(.page-academy) .tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } :where(.page-academy) .track h3 { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--deep); margin-bottom: 8px; } :where(.page-academy) .track p { font-size: 15.5px; color: var(--muted); } .track-foot { margin-top: auto; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .track-foot .btn { padding: 11px 18px; font-size: 14px; } .perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } :where(.page-academy) .perk { padding: 28px 24px; border-radius: var(--r); background: var(--wash); } :where(.page-academy) .perk .ic { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; margin-bottom: 20px; } :where(.page-academy) .perk h3 { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--deep); margin-bottom: 8px; } :where(.page-academy) .perk p { font-size: 15px; color: var(--muted); } .calbar-box { display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; background: var(--deep); color: #fff; border-radius: var(--r); padding: clamp(32px, 4.5vw, 52px); } .calbar-box .ic { width: 56px; height: 56px; border-radius: 16px; background: rgba(133,204,255,.14); color: var(--sky); display: grid; place-items: center; flex: none; } .calbar-l { display: flex; gap: 22px; align-items: flex-start; flex: 1 1 420px; min-width: 0; } .calbar-box h2 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 8px; } .calbar-box p { color: rgba(255,255,255,.75); max-width: 54ch; } /* ---------------------------------------------------------------- Administrators ---------------------------------------------------------------- */ :where(.page-administrators) .hero { padding: clamp(64px, 9vw, 112px) 0 clamp(56px, 7vw, 88px); background: linear-gradient(180deg, var(--wash) 0%, #fff 100%); text-align: center; } :where(.page-administrators) .hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(36px, 5vw, 60px); line-height: 1.08; letter-spacing: -.03em; color: var(--deep); max-width: 15em; margin: 0 auto 18px; } :where(.page-administrators) .quote { max-width: 760px; margin: clamp(48px, 6vw, 72px) auto 0; padding-top: clamp(32px, 4vw, 44px); border-top: 1px solid var(--line); text-align: center; } :where(.page-administrators) .cta-box h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -.02em; color: var(--deep); margin-bottom: 14px; } :where(.page-administrators) .hero-copy > :nth-child(2) { animation-delay: .08s; } :where(.page-administrators) .hero-copy > :nth-child(3) { animation-delay: .16s; } :where(.page-administrators) .founder { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; max-width: 920px; margin: 0 auto; } .avatar-lg { width: 112px; height: 112px; border-radius: 50%; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 38px; box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--line); } :where(.page-administrators) .tag { display: inline-flex; padding: 4px 11px; border-radius: 999px; background: var(--sky-l); font-size: 12.5px; font-weight: 600; color: var(--ink); } .f-name { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; } .f-name h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -.02em; color: var(--deep); } .f-role { font-size: 15.5px; color: var(--muted); margin-bottom: 18px; } .f-lead { font-size: 18px; line-height: 1.6; color: var(--deep); max-width: 60ch; } .f-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .f-stats span { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--wash); border: 1px solid var(--line); font-size: 13.5px; color: var(--muted); } .f-stats b { font-family: var(--display); font-size: 15px; color: var(--ink); } .open-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 14.5px; font-weight: 600; color: var(--ink); border-bottom: 1.5px solid var(--sky); padding-bottom: 1px; transition: border-color .2s; } .open-btn:hover { border-color: var(--ink); } .open-btn::after { content: '\2192'; transition: transform .2s; } .open-btn:hover::after { transform: translateX(3px); } :where(.page-administrators) .quote blockquote { font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.35; letter-spacing: -.01em; color: var(--deep); } :where(.page-administrators) .quote blockquote::before { content: '\201C'; display: block; font-size: 56px; line-height: .6; color: var(--sky-d); margin-bottom: 14px; } :where(.page-administrators) .quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; color: var(--muted); } :where(.page-administrators) .team[hidden] { display: none; } :where(.page-administrators) .team { background: var(--wash); margin-top: clamp(80px, 10vw, 120px); padding: clamp(72px, 9vw, 112px) 0; } .roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } :where(.page-administrators) .p-mono, :where(.page-administrators) .p-photo { width: 56px; height: 56px; border-radius: 50%; flex: none; margin-bottom: 6px; } :where(.page-administrators) .p-mono { background: var(--sky-l); color: var(--ink); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 19px; } .p-photo { object-fit: cover; } :where(.page-administrators) .p-role { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-d); } :where(.page-administrators) .p-name { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--deep); } .p-sum { font-size: 14.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .p-open { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--ink); display: inline-flex; gap: 6px; } .p-open::after { content: '\2192'; transition: transform .2s; } .person:hover .p-open::after { transform: translateX(3px); } dialog.pd { border: 0; padding: 0; border-radius: 20px; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); margin: auto; box-shadow: 0 40px 80px -30px rgba(6,47,77,.55); color: var(--text); } dialog.pd::backdrop { background: rgba(6,47,77,.45); backdrop-filter: blur(3px); } dialog.pd[open] { animation: pdIn .3s var(--ease) both; } .pd-head { position: sticky; top: 0; display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: #fff; border-bottom: 1px solid var(--line); } .pd-head .p-mono, .pd-head .p-photo { margin: 0; width: 52px; height: 52px; } .pd-head div { flex: 1; min-width: 0; } .pd-x { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); flex: none; } .pd-x:hover { border-color: var(--ink); } .pd-body { padding: 22px 24px 28px; } .pd-body p { color: var(--muted); font-size: 15.5px; margin-bottom: 14px; } .pd-body p:first-child { color: var(--deep); font-size: 16.5px; } .pd-facts { list-style: none; margin: 4px 0 18px; } .pd-facts li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px dashed var(--line); font-size: 14.5px; } .pd-facts li:last-child { border-bottom: 1px dashed var(--line); } .pd-facts small { color: var(--muted); font-size: 14px; } .pd-facts span { font-weight: 600; color: var(--deep); text-align: end; } /* ---------------------------------------------------------------- Admissions ---------------------------------------------------------------- */ :where(.page-admissions) .hero::before { width: 500px; height: 500px; inset-inline-end: -200px; top: -200px; } :where(.page-admissions) .hero::after { width: 340px; height: 340px; inset-inline-start: -140px; bottom: -160px; } :where(.page-admissions) .steps { position: relative; display: grid; gap: 14px; max-width: 840px; margin: 0 auto; counter-reset: s; } :where(.page-admissions) td { padding: 16px 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); vertical-align: top; transition: background .2s; } :where(.page-admissions) .step-i a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--sky-d); } .req-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .req-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .req .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; flex: none; } .req h3 { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--deep); display: flex; align-items: center; gap: 8px; } :where(.page-admissions) .req > p { color: var(--muted); font-size: 15.5px; margin-bottom: 16px; } :where(.page-admissions) .req ul { list-style: none; display: grid; gap: 10px; margin-bottom: 20px; } :where(.page-admissions) .req li { display: flex; gap: 12px; font-size: 15px; color: var(--text); } :where(.page-admissions) .req li::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--sky-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23094570' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; } .req a.more { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14.5px; color: var(--ink); } .req a.more::after { content: '→'; transition: transform .2s; } .req a.more:hover::after { transform: translateX(3px); } .tagc { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #FFF1D6; color: #8A5A0B; } .lock { display: inline-block; width: .8em; height: .8em; flex: none; } .closed-note { display: flex; gap: 10px; align-items: flex-start; background: #FFF8EB; border-inline-start: 3px solid #E0A23B; border-start-start-radius: 0; border-start-end-radius: 12px; border-end-end-radius: 12px; border-end-start-radius: 0; padding: 12px 16px; font-size: 14.5px; color: #6B4A12; margin-bottom: 16px; } .closed-note svg { flex: none; margin-top: 3px; color: #B7791F; } .levels-head { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; letter-spacing: -.02em; color: var(--deep); margin: clamp(56px, 7vw, 80px) 0 16px; } .levels-head .lock { width: .75em; height: .75em; color: #B7791F; } :where(.page-admissions) td:first-child { font-weight: 600; color: var(--deep); white-space: nowrap; } :where(.page-admissions) td .score { display: inline-block; padding: 3px 10px; border-radius: 8px; background: var(--sky-l); font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); } td .open-tag { display: inline-block; padding: 3px 10px; border-radius: 8px; background: #DDF5E6; font-size: 13px; font-weight: 600; color: #157A42; white-space: nowrap; } .fee-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; } .fee-col { display: grid; gap: 24px; } .fee-group { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 8px; } .fee-group h3 { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--deep); padding: 14px 14px 10px; } .fee-group h3 .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; } .fee-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border-radius: 12px; transition: background .2s; } .fee-row + .fee-row { border-top: 1px solid var(--line); } .fee-row:hover { background: var(--wash); } .fee-row b { display: flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 600; color: var(--deep); } .fee-row small { display: block; font-size: 13px; color: var(--muted); } .fee-right { display: flex; align-items: center; gap: 14px; flex: none; } .fee-row .amt { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--deep); white-space: nowrap; text-align: end; } .fee-row .amt small { display: block; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted); font-weight: 500; } .fee-row .go { padding: 9px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; transition: background .2s; } .fee-row .go:hover { background: var(--deep); } .fee-row.is-closed { opacity: .72; } .fee-row.is-closed:hover { background: transparent; } .fee-row.is-closed .lock { color: #B7791F; } .fee-row .shut { padding: 8px 14px; border-radius: 10px; border: 1.5px dashed #C9D8E4; color: var(--muted); font-size: 13.5px; font-weight: 600; } :where(.page-admissions) .two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .card-dark { position: relative; overflow: hidden; background: var(--deep); color: #fff; border-radius: var(--r); padding: clamp(28px, 4vw, 40px); } .card-dark::after { content: ''; position: absolute; inset-inline-end: -70px; top: -70px; width: 200px; height: 200px; border-radius: 50%; border: 1.5px dashed rgba(133,204,255,.25); } .card-dark h3, .card-light h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; margin-bottom: 12px; } .card-dark h3 { color: #fff; } .card-dark p { color: rgba(255,255,255,.78); margin-bottom: 22px; max-width: 46ch; } .card-light { background: var(--wash); border-radius: var(--r); padding: clamp(28px, 4vw, 40px); } .card-light h3 { color: var(--deep); } .card-light p { color: var(--muted); margin-bottom: 22px; max-width: 46ch; } .card-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; } .card-dark .card-ic { background: rgba(133,204,255,.16); color: var(--sky); } .card-light .card-ic { background: #fff; color: var(--ink); } :where(.page-admissions) .cta-box .acts { justify-content: center; } .sec.sec-first { padding-top: clamp(40px,5vw,64px); } /* ---------------------------------------------------------------- Contact ---------------------------------------------------------------- */ .hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; } .hero-meta a, .hero-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); transition: border-color .2s; } .hero-meta a:hover { border-color: var(--ink); } .hero-meta svg { color: var(--sky-d); } :where(.page-contact) .chips { display: flex; flex-wrap: wrap; gap: 6px; } :where(.page-contact) .num { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--wash); font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.005em; color: var(--ink); margin-top: auto; transition: background .35s, color .35s; } :where(.page-contact) .chips span { font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--wash); color: var(--ink); border: 1px solid var(--line); transition: background .35s, color .35s, border-color .35s; } :where(.page-contact) .lines { margin-top: -8px; } .line-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } :where(.page-contact) .line { display: flex; flex-direction: column; gap: 14px; padding: 30px 28px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); } .line-top { display: flex; align-items: center; justify-content: space-between; } .l-ico { width: 52px; height: 52px; border-radius: 15px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; transition: background .35s, color .35s; } .l-ico svg { width: 26px; height: 26px; } :where(.page-contact) .who { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9FB3C4; transition: color .35s; } :where(.page-contact) .line h2 { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; color: var(--deep); transition: color .35s; } :where(.page-contact) .line p { font-size: 15px; color: var(--muted); transition: color .35s; } :where(.page-contact) .num::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #1F9D55; box-shadow: 0 0 0 4px rgba(31,157,85,.15); } .lacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lacts .btn { padding: 12px 14px; font-size: 14px; } :where(.page-contact) .fx.fx-on h2 { color: #fff; } :where(.page-contact) .fx.fx-on .who { color: rgba(133,204,255,.7); } .fx.fx-on .l-ico { background: rgba(133,204,255,.16); color: var(--sky); } :where(.page-contact) .fx.fx-on .chips span { background: rgba(255,255,255,.1); color: #fff; border-color: transparent; } :where(.page-contact) .fx.fx-on .num { background: rgba(255,255,255,.1); color: var(--sky); } :where(.page-contact) .fx.fx-on .btn-line { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; } :where(.page-contact) .fx.fx-on .btn-ink { background: var(--sky); color: var(--deep); } .route-box { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: var(--r); background: var(--wash); position: relative; overflow: hidden; } .route-box::before { content: ''; position: absolute; width: 380px; height: 380px; inset-inline-start: -160px; bottom: -200px; border-radius: 50%; border: 1.5px dashed rgba(9,69,112,.1); pointer-events: none; } .route-copy { position: relative; } .route-copy h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -.02em; color: var(--deep); margin-bottom: 14px; } .route-copy > p { color: var(--muted); font-size: 17px; max-width: 40ch; } .rsteps { list-style: none; counter-reset: s; display: grid; gap: 0; margin-top: 28px; } .rsteps li { counter-increment: s; position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; font-size: 15px; color: var(--muted); } .rsteps li::before { content: counter(s); flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); color: var(--ink); font-weight: 700; font-size: 13px; display: grid; place-items: center; } .rsteps li:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 14.5px; top: 40px; bottom: -6px; border-inline-start: 1.5px dashed #BFD3E3; } .rsteps li span { padding-top: 4px; } .rsteps b { color: var(--deep); font-weight: 600; } .form-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow); } :where(.page-contact) .field input, :where(.page-contact) .field select, :where(.page-contact) .field textarea { width: 100%; font-family: inherit; font-size: 15px; color: var(--text); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px; transition: border-color .2s, box-shadow .2s; } :where(.page-contact) .field input:hover, :where(.page-contact) .field select:hover, :where(.page-contact) .field textarea:hover { border-color: #C9D6E1; } :where(.page-contact) .field select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23094570' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; } .field textarea { min-height: 112px; resize: vertical; } :where(.page-contact) .field input::placeholder, :where(.page-contact) .field textarea::placeholder { color: #93A4B3; } :where(.page-contact) .field input:focus, :where(.page-contact) .field select:focus, :where(.page-contact) .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(133,204,255,.35); } .dest { display: flex; align-items: center; gap: 12px; background: var(--deep); color: rgba(255,255,255,.85); border-radius: 12px; padding: 13px 16px; margin: 4px 0 14px; font-size: 14px; } .dest i { width: 10px; height: 10px; border-radius: 50%; background: var(--sky); flex-shrink: 0; animation: beat 1.8s ease-in-out infinite; } .dest b { color: var(--sky); } .dest.swap { animation: swap .4s ease; } .form-card .btn { width: 100%; } .more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } :where(.page-contact) .m-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; margin-bottom: 6px; } :where(.page-contact) .m-ico svg { width: 22px; height: 22px; } .mini h3 { font-family: var(--display); font-size: 21px; color: var(--deep); line-height: 1.2; } .mini p { color: var(--muted); font-size: 15px; flex: 1; } .mini a.l { color: var(--ink); font-weight: 600; word-break: break-all; border-bottom: 1.5px solid var(--sky); align-self: flex-start; transition: border-color .2s; } .mini a.l:hover { border-color: var(--ink); } .mini .row { display: flex; gap: 8px; flex-wrap: wrap; } .mini .btn { padding: 10px 16px; font-size: 14px; } /* ---------------------------------------------------------------- Enroll ---------------------------------------------------------------- */ :root:where(.page-enroll) { --deep: #062F4D; --ink: #094570; --sky: #85CCFF; --sky-d: #3E97D9; --sky-l: #E3F2FD; --wash: #F4F8FB; --white: #fff; --text: #0E2A3D; --muted: #5B6E7F; --line: #E3EAF0; --error: #D64545; --r: 20px; --ease: cubic-bezier(.2,.7,.2,1); --shadow: 0 1px 2px rgba(6,47,77,.04), 0 12px 32px -18px rgba(6,47,77,.18); --display: 'Bricolage Grotesque', 'Inter', sans-serif; } :where(.page-enroll) body { font-family: 'Inter', -apple-system, sans-serif; color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; line-height: 1.55; } :where(.page-enroll) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px 22px; font-size: 15.5px; font-weight: 600; border-radius: 12px; transition: background .2s, border-color .2s, opacity .2s, transform .15s, box-shadow .2s; } :where(.page-enroll) input, :where(.page-enroll) select { font-family: inherit; } :where(.page-enroll) a:focus-visible, :where(.page-enroll) button:focus-visible, :where(.page-enroll) input:focus-visible, :where(.page-enroll) select:focus-visible { outline: 2px solid var(--sky-d); outline-offset: 2px; } :where(.page-enroll) .split { display: flex; min-height: 100vh; padding: 16px; gap: 16px; } :where(.page-enroll) .hero { flex: 0 0 42%; position: sticky; top: 16px; height: calc(100vh - 32px); border-radius: 28px; color: #fff; padding: 40px 44px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate; background: radial-gradient(120% 80% at 100% 0%, rgba(133,204,255,.22), transparent 60%), linear-gradient(160deg, var(--ink), var(--deep) 70%); } :where(.page-enroll) .hero::before, :where(.page-enroll) .hero::after { content: ''; position: absolute; border-radius: 50%; border: 1.5px dashed rgba(133,204,255,.22); z-index: -1; pointer-events: none; } :where(.page-enroll) .hero::before { width: 520px; height: 520px; inset-inline-end: -220px; top: -180px; } :where(.page-enroll) .hero::after { width: 300px; height: 300px; inset-inline-start: -120px; bottom: -110px; } .hero-mark { position: absolute; inset-inline-end: -40px; bottom: 60px; width: 260px; opacity: .045; z-index: -1; pointer-events: none; } .hero-top a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 18px; } .hero-top .crest { width: 24px; height: 30px; } .hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin-bottom: 16px; } .hero-kicker::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--sky); } .hero-mid h1 { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -.025em; margin-bottom: 16px; max-width: 12ch; position: relative; } .hero-mid h1 span.acc .ch, .hero-mid h1 > span:not(.w):not(.ball) { color: var(--sky); } .hero-mid p { font-size: 16px; color: rgba(255,255,255,.75); max-width: 38ch; } :where(.page-enroll) .btn-wa { background: #128C4B; color: #fff; box-shadow: 0 10px 22px -14px rgba(18,140,75,.8); } :where(.page-enroll) .btn-wa:hover { background: #0E6F3B; transform: translateY(-1px); } :where(.page-enroll) .kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-d); margin-bottom: 10px; } :where(.page-enroll) .home-fab { position: fixed; inset-inline-start: auto; inset-inline-end: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 8px; padding-block: 12px 12px; padding-inline: 14px 18px; border-radius: 12px; background: var(--deep); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(6,47,77,.6); transition: background .2s, transform .2s; } :where(.page-enroll) .home-fab:hover { background: var(--ink); transform: translateY(-2px); } :where(.page-enroll) .hero h1 .ball { position: absolute; inset-inline-start: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--sky); opacity: 0; pointer-events: none; will-change: transform; box-shadow: 0 0 0 0 rgba(133,204,255,.5); } :where(.page-enroll) .hero h1 .ball.landed { animation: ping-sky 1.4s ease-out .1s 2; } .hero-roadmap { display: flex; flex-direction: column; gap: 0; position: relative; } .r-item { display: flex; align-items: center; gap: 14px; font-size: 15px; color: rgba(255,255,255,.6); transition: color .25s; position: relative; padding: 9px 0; } .r-item:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 16px; top: calc(50% + 18px); height: calc(100% - 36px); border-inline-start: 1.5px dashed rgba(255,255,255,.25); } .r-num { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex-shrink: 0; transition: background .25s, color .25s, border-color .25s, box-shadow .25s; } .r-item.done { color: rgba(255,255,255,.85); } .r-item.done .r-num { background: var(--sky); color: var(--deep); border-color: var(--sky); } .r-item.done:not(:last-child)::after { border-inline-start-style: solid; border-color: var(--sky); } .r-item.active { color: #fff; font-weight: 600; } .r-item.active .r-num { background: #fff; color: var(--deep); border-color: #fff; box-shadow: 0 0 0 6px rgba(133,204,255,.22); } .hero-help { display: block; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13.5px; color: rgba(255,255,255,.65); } .hero-help a { color: var(--sky); font-weight: 600; } .hero-help a:hover { text-decoration: underline; } .form-panel { flex: 1; display: flex; flex-direction: column; min-height: calc(100vh - 32px); } .form-panel-inner { max-width: 520px; width: 100%; margin: 0 auto; padding: 44px 12px 40px; flex: 1; } .wizard-footer { max-width: 520px; width: 100%; margin: 0 auto; padding: 20px 12px 8px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .wizard-footer a:hover { color: var(--ink); } .wizard-footer-social { display: flex; gap: 8px; } .wizard-footer-social a { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s; } .wizard-footer-social a:hover { background: var(--ink); border-color: var(--ink); color: #fff; } .stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; } .stepper .dash { flex: 1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; } .stepper .dash i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ink), var(--sky-d)); border-radius: 3px; transition: width .5s var(--ease); } .stepper .dash.done i { width: 100%; } .stepper .dash.active i { width: 50%; } .stepper .s-label { font-size: 13px; font-weight: 700; color: var(--ink); background: var(--sky-l); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; } .stepper .s-label:first-child { background: var(--ink); color: #fff; } :where(.page-enroll) .step { display: none; } :where(.page-enroll) .step.active { display: block; animation: fadeIn .45s var(--ease); } :where(.page-enroll) .step h2 { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -.02em; color: var(--deep); margin-bottom: 8px; } .step > p.step-sub { font-size: 15px; color: var(--muted); margin-bottom: 28px; } .group-label { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 8px 0 14px; } .group-label::after { content: ''; flex: 1; height: 1px; background: var(--line); } .group-gap { margin-top: 26px; } .field .req { color: var(--sky-d); } .field .opt { font-weight: 400; color: var(--muted); } :where(.page-enroll) .field input, :where(.page-enroll) .field select { width: 100%; padding: 14px 16px; font-size: 15px; color: var(--text); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; transition: border-color .2s, background .2s, box-shadow .2s; } :where(.page-enroll) .field select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23094570' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } :where(.page-enroll) .field input:hover, :where(.page-enroll) .field select:hover { border-color: #C9D6E1; } :where(.page-enroll) .field input::placeholder { color: #93A4B3; } :where(.page-enroll) .field input:focus, :where(.page-enroll) .field select:focus { background-color: #fff; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(133,204,255,.35); outline: none; } :where(.page-enroll) .field.error input, :where(.page-enroll) .field.error select { border-color: var(--error); background-color: #FFF6F6; } .field .err-msg { font-size: 12.5px; color: var(--error); margin-top: 6px; display: none; } .field.error .err-msg { display: block; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .prog-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 20px; padding: 5px; background: var(--wash); border: 1px solid var(--line); border-radius: 14px; } .prog-pill { padding: 10px 12px; font-size: 13.5px; font-weight: 600; border-radius: 10px; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; } .prog-pill:hover { color: var(--ink); } .prog-pill[aria-pressed="true"] { background: #fff; color: var(--deep); box-shadow: 0 1px 2px rgba(6,47,77,.08), 0 4px 12px -6px rgba(6,47,77,.25); } .plan-options { display: flex; flex-direction: column; gap: 10px; } .plan-opt { border: 1.5px solid var(--line); border-radius: 16px; background: #fff; transition: border-color .2s, background .2s, box-shadow .2s, transform .2s; } .plan-opt:hover { border-color: #BFD3E3; box-shadow: var(--shadow); } .plan-opt.selected { border-color: var(--ink); background: linear-gradient(var(--sky-l), #fff); box-shadow: 0 0 0 3px rgba(133,204,255,.3); } .plan-opt-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px 10px; cursor: pointer; } .plan-opt-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #A9BBCA; flex-shrink: 0; position: relative; transition: border-color .2s, background .2s; } .plan-opt.selected .plan-opt-radio { border-color: var(--ink); background: var(--ink); } .plan-opt.selected .plan-opt-radio::after { content: ''; position: absolute; inset-inline-start: 6px; top: 2.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); } .plan-opt-name { flex: 1; font-size: 15.5px; font-weight: 600; color: var(--deep); } .plan-opt-name small { display: table; font-weight: 600; color: var(--ink); background: var(--sky-l); font-size: 11.5px; padding: 2px 9px; border-radius: 999px; margin-top: 5px; } .plan-opt.selected .plan-opt-name small { background: #fff; } .plan-opt-price { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; } .plan-opt-toggle { font-size: 12.5px; font-weight: 600; color: var(--sky-d); padding-block: 0 14px; padding-inline: 56px 20px; cursor: pointer; display: inline-block; } .plan-opt-toggle:hover { color: var(--ink); text-decoration: underline; } .plan-opt-details { max-height: 0; overflow: hidden; transition: max-height .3s ease; padding: 0 20px; } .plan-opt-details.open { max-height: 220px; padding-bottom: 16px; } .plan-opt-details ul { list-style: none; padding-inline-start: 36px; } .plan-opt-details li { font-size: 13.5px; color: var(--muted); padding-inline-start: 16px; position: relative; margin-bottom: 5px; } .plan-opt-details li::before { content: ''; position: absolute; inset-inline-start: 0; top: 8px; width: 6px; height: 6px; background: var(--sky-d); border-radius: 50%; } .pay-summary { border-radius: var(--r); padding: 18px 22px; margin-bottom: 24px; background: linear-gradient(var(--sky-l), #fff); border: 1px solid #CFE6F8; font-size: 14.5px; } .pay-summary .row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; color: var(--muted); border-bottom: 1px dashed #CFE0EE; } .pay-summary .row:last-child { border-bottom: none; } .pay-summary .row b { color: var(--deep); font-weight: 600; text-align: end; } .pay-summary .row:nth-child(3) b { font-family: var(--display); font-size: 17px; color: var(--ink); } .pay-summary .row:last-child b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .04em; background: var(--ink); color: #fff; padding: 3px 10px; border-radius: 8px; } .pay-tabs { display: flex; gap: 6px; padding: 5px; background: var(--wash); border-radius: 14px; margin-bottom: 20px; } .pay-tab { flex: 1; text-align: center; font-size: 14px; font-weight: 600; padding: 12px; border-radius: 10px; color: var(--muted); transition: background .2s, color .2s; } .pay-tab[aria-selected="true"] { background: var(--ink); color: #fff; } .pay-view { display: none; } .pay-view.active { display: block; } .account-box { border: 1.5px solid var(--line); border-radius: 16px; margin-bottom: 16px; overflow: hidden; background: #fff; } .account-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-size: 14.5px; border-bottom: 1px solid var(--line); } .account-row:last-child { border-bottom: none; } .account-row span { color: var(--muted); } .account-row b { font-weight: 700; color: var(--deep); display: inline-flex; align-items: center; gap: 10px; } .account-row:nth-child(2) b { font-family: var(--display); font-size: 17px; letter-spacing: .02em; } .copy-btn { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--sky-l); padding: 6px 12px; border-radius: 8px; letter-spacing: 0; transition: background .2s, color .2s; } .copy-btn:hover, .copy-btn.copied { background: var(--ink); color: #fff; } .btn-primary { background: var(--ink); color: #fff; box-shadow: 0 10px 22px -12px rgba(9,69,112,.7); } .btn-primary:hover { background: var(--deep); transform: translateY(-1px); } .btn-primary:active { transform: scale(.99); } .btn-primary::after { content: '→'; transition: transform .2s; } .btn-primary:hover::after { transform: translateX(3px); } .btn-primary[disabled] { opacity: .55; cursor: wait; } .btn-secondary { border: 1.5px solid var(--line); color: var(--deep); background: #fff; margin-top: 10px; } .btn-secondary:hover { border-color: var(--ink); } .step-actions { display: flex; flex-direction: column; margin-top: 10px; } .form-status { font-size: 13.5px; margin-top: 12px; display: none; } .form-status.error { color: var(--error); } .form-note { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.6; } .form-note a { text-decoration: underline; color: var(--ink); } .note-box { display: flex; gap: 10px; align-items: flex-start; background: var(--wash); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .note-box svg { flex-shrink: 0; margin-top: 2px; color: var(--sky-d); } .confirm-icon { width: 68px; height: 68px; border-radius: 50%; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; margin-bottom: 22px; animation: pop-pay .6s var(--ease) both; box-shadow: 0 0 0 10px rgba(227,242,253,.55); } :where(.page-enroll) .home-fab:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; } .pay-steps { list-style: none; counter-reset: n; display: grid; gap: 0; margin-bottom: 20px; position: relative; } .pay-steps li { counter-increment: n; display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; color: var(--muted); padding: 6px 0; position: relative; } .pay-steps li:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 14px; top: 38px; bottom: -4px; border-inline-start: 1.5px dashed #BFD3E3; } .pay-steps li::before { content: counter(n); flex-shrink: 0; width: 29px; height: 29px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; } .pay-steps li span { padding-top: 4px; } .pay-steps li b { color: var(--deep); } .wa-label { font-size: 13.5px; font-weight: 600; color: var(--deep); margin: 22px 0 10px; } .wa-grid { display: grid; gap: 10px; } :where(.page-enroll) .btn-wa::before { content: ''; width: 18px; height: 18px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20.5l1.7-5.2A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20.5l1.7-5.2A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E") center/contain no-repeat; } :where(.page-enroll) .btn-wa small { font-weight: 500; opacity: .85; } .msg-preview { margin-top: 10px; background: var(--wash); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font-size: 13px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; max-height: 190px; overflow: auto; } .msg-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 24px; } .done-actions { display: grid; gap: 10px; margin-top: 8px; } p.err-msg.plan-err { display: none; color: var(--error); font-size: 13px; margin-top: 10px; } /* ---------------------------------------------------------------- Exam Calendars ---------------------------------------------------------------- */ :where(.page-exam-calendars) .hero::before { width: 500px; height: 500px; inset-inline-start: -200px; top: -200px; } :where(.page-exam-calendars) .hero::after { width: 340px; height: 340px; inset-inline-end: -130px; bottom: -150px; } :where(.page-exam-calendars) .pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; } :where(.page-exam-calendars) .chip { padding: 10px 18px; border-radius: 10px; color: var(--muted); font-size: 14px; font-weight: 600; transition: background .2s, color .2s, box-shadow .2s; } :where(.page-exam-calendars) .legend { display: flex; gap: 8px 18px; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 13.5px; color: var(--muted); } :where(.page-exam-calendars) .side { display: grid; gap: 16px; position: sticky; top: 96px; } .cal { padding: clamp(32px, 4vw, 48px) 0 0; } .toolbar { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 32px; } :where(.page-exam-calendars) .filters { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px; background: var(--wash); border: 1px solid var(--line); border-radius: 14px; } :where(.page-exam-calendars) .chip:hover { color: var(--ink); } :where(.page-exam-calendars) .chip[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 10px -3px rgba(6,47,77,.25); } :where(.page-exam-calendars) .legend > span { display: inline-flex; align-items: center; gap: 8px; } :where(.page-exam-calendars) .pill.confirmed { background: var(--ink); color: #fff; } .pill.expected { background: var(--sky); color: var(--deep); } :where(.page-exam-calendars) .pill.check { background: #DCEBFA; color: var(--ink); } :where(.page-exam-calendars) .pill.past { background: #E4ECF3; color: #5B7388; } .cal-layout { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: clamp(56px, 7vw, 80px); } .cal-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px 20px 18px; box-shadow: var(--shadow); } .cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; } .cal-head h2 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: var(--deep); text-align: center; flex: 1; } .nav-btn { width: 38px; height: 38px; border-radius: 10px; background: var(--wash); color: var(--ink); display: grid; place-items: center; transition: background .2s, color .2s, opacity .2s; } .nav-btn svg { width: 16px; height: 16px; } .nav-btn:hover:not(:disabled) { background: var(--ink); color: #fff; } .nav-btn:disabled { opacity: .35; cursor: not-allowed; } .today-btn { padding: 8px 13px; border-radius: 10px; background: var(--sky-l); color: var(--ink); font-size: 12.5px; font-weight: 600; transition: background .2s, color .2s; } .today-btn:hover { background: var(--ink); color: #fff; } :where(.page-exam-calendars) .dow, :where(.page-exam-calendars) .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .dow span { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; } :where(.page-exam-calendars) .day { position: relative; width: 100%; max-width: 44px; aspect-ratio: 1 / 1; justify-self: center; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; color: var(--deep); background: var(--wash); border: 2px solid transparent; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s; } :where(.page-exam-calendars) .day:hover:not(.pad) { transform: scale(1.12); box-shadow: 0 10px 22px -8px rgba(9,69,112,.55); z-index: 2; } :where(.page-exam-calendars) .day.pad { background: transparent; cursor: default; } :where(.page-exam-calendars) .day.confirmed { background: var(--ink); color: #fff; } :where(.page-exam-calendars) .day.expected { background: var(--sky); color: var(--deep); } :where(.page-exam-calendars) .day.check { background: #DCEBFA; color: var(--ink); } :where(.page-exam-calendars) .day.past { background: #E4ECF3; color: #6A8196; } :where(.page-exam-calendars) .day.exact { border-color: transparent; } .day.approx { border: 2px dashed var(--ink); } .day.past.approx { border-color: #8CA3B6; } :where(.page-exam-calendars) .day.today { box-shadow: 0 0 0 1.5px var(--sky-d) inset; } :where(.page-exam-calendars) .day.today::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--sky-d); animation: dot 1.6s ease-in-out infinite; } :where(.page-exam-calendars) .day.confirmed.today::after { background: var(--sky); } :where(.page-exam-calendars) .day.sel { transform: scale(1.08); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); z-index: 3; } :where(.page-exam-calendars) .day.sel::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ink); animation: cal-ping 1.8s ease-out infinite; pointer-events: none; } .day .star { position: absolute; top: 0; inset-inline-end: 5px; font-size: 9px; line-height: 1; color: #E0A23B; animation: twinkle 2.4s ease-in-out infinite; } :where(.page-exam-calendars) .day.enter { animation: dayIn .55s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i, 0) * 16ms); } .cal-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } .cal-key span { display: inline-flex; align-items: center; gap: 7px; } .cal-key b { color: #E0A23B; } .cal-key i { width: 13px; height: 13px; border-radius: 50%; display: inline-block; } .sel-panel { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding-block: 24px 24px; padding-inline: 28px 24px; box-shadow: var(--shadow); overflow: hidden; } .sel-panel::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--sky-d); } .sel-panel .d { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sky-d); margin-bottom: 8px; } .sel-panel h3 { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--deep); margin-bottom: 6px; } .sel-panel p { color: var(--muted); font-size: 15px; } .sel-panel p b { color: var(--deep); } .sel-panel .ev + .ev { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .sel-panel .pill { margin-bottom: 10px; } .notable { background: var(--wash); border-radius: var(--r); padding: 20px; } .notable h3 { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--deep); margin-bottom: 12px; } .notable h3 span { color: #E0A23B; } .notable ul { list-style: none; display: grid; gap: 8px; } .notable button { width: 100%; text-align: start; display: grid; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s, transform .2s; } .notable button:hover, .notable button.on { border-color: var(--ink); transform: translateX(3px); } .notable button.on { box-shadow: 0 0 0 1px var(--ink); } .notable b { font-size: 14.5px; color: var(--deep); } .notable span { font-size: 13px; color: var(--muted); } .tba-head { text-align: center; max-width: 640px; margin: 0 auto 32px; } .tba-title { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.02em; color: var(--deep); } .tba-sub { color: var(--muted); font-size: 16.5px; margin-top: 12px; } .tba { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 32px; } .tba div { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; transition: border-color .2s, box-shadow .2s; } .tba div:hover { border-color: transparent; box-shadow: var(--shadow); } .tba h3 { font-size: 16px; font-weight: 600; color: var(--deep); margin-bottom: 4px; } .tba p { font-size: 14px; color: var(--muted); margin-bottom: 14px; flex: 1; } .empty-note { font-size: 14px; color: var(--muted); } :where(.page-exam-calendars) .notice { display: flex; gap: 14px; align-items: flex-start; background: #FFF8EB; border-inline-start: 3px solid #E0A23B; border-start-start-radius: 0; border-start-end-radius: 14px; border-end-end-radius: 14px; border-end-start-radius: 0; padding: 16px 20px; font-size: 14.5px; color: #6B4A12; } :where(.page-exam-calendars) .notice svg { flex: none; margin-top: 2px; color: #B7791F; } :where(.page-exam-calendars) .notice a { color: #6B4A12; font-weight: 700; border-bottom: 1px solid rgba(107,74,18,.4); } :where(.page-exam-calendars) .cta { padding: clamp(80px, 10vw, 128px) 0 0; } .cal-key i.k-exact { background: var(--sky); } .cal-key i.k-approx { border: 2px dashed var(--ink); background: var(--sky); } .cal-key i.k-today { background: var(--wash); box-shadow: 0 0 0 2px var(--sky-d) inset; } /* ---------------------------------------------------------------- FAQ ---------------------------------------------------------------- */ :where(.page-faq) .icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--wash); color: var(--ink); display: grid; place-items: center; transition: transform .3s var(--ease), background .25s, color .25s; } html:where(.page-faq) { scroll-behavior: smooth; } :where(.page-faq) .hero { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 104px) 0 clamp(48px, 6vw, 72px); background: linear-gradient(180deg, var(--wash) 0%, #fff 100%); text-align: center; } :where(.page-faq) .hero::before { content: ''; position: absolute; width: 480px; height: 480px; inset-inline-start: -200px; top: -180px; border-radius: 50%; border: 1.5px dashed rgba(9,69,112,.12); pointer-events: none; } :where(.page-faq) .hero-copy { position: relative; max-width: 680px; margin: 0 auto; } :where(.page-faq) .hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 5.2vw, 62px); line-height: 1.06; letter-spacing: -.03em; color: var(--deep); margin-bottom: 16px; } :where(.page-faq) .item { background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: box-shadow .25s, border-color .25s; } :where(.page-faq) .item:hover { border-color: #C9D8E4; } :where(.page-faq) .q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; text-align: start; font-weight: 600; font-size: 16.5px; line-height: 1.35; color: var(--deep); } :where(.page-faq) .search { position: relative; display: block; max-width: 520px; margin: 30px auto 0; } :where(.page-faq) .search svg { position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } :where(.page-faq) .search input { width: 100%; padding-block: 16px 16px; padding-inline: 50px 18px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-size: 15.5px; box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s; } :where(.page-faq) .search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(62,151,217,.15); } :where(.page-faq) .faq { padding: clamp(32px, 4vw, 48px) 0 0; } .faq-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(28px, 4vw, 48px); align-items: start; } :where(.page-faq) .side { position: sticky; top: 100px; display: grid; gap: 16px; } :where(.page-faq) .ask { background: var(--deep); color: #fff; border-radius: var(--r); padding: 28px; position: relative; overflow: hidden; } :where(.page-faq) .ask::after { content: ''; position: absolute; inset-inline-end: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; border: 1.5px dashed rgba(133,204,255,.25); } :where(.page-faq) .ask .ic { width: 48px; height: 48px; border-radius: 14px; background: rgba(133,204,255,.16); color: var(--sky); display: grid; place-items: center; margin-bottom: 18px; } :where(.page-faq) .ask h2 { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; margin-bottom: 8px; } :where(.page-faq) .ask p { color: rgba(255,255,255,.75); font-size: 15px; margin-bottom: 20px; } :where(.page-faq) .ask .btn { width: 100%; background: var(--sky); color: var(--deep); } :where(.page-faq) .ask .btn:hover { background: #fff; } .ask .alt { display: block; text-align: center; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--sky); } .ask .alt:hover { color: #fff; } :where(.page-faq) .links { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; } :where(.page-faq) .links h3 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } :where(.page-faq) .links a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--deep); transition: color .2s; } :where(.page-faq) .links a:first-of-type { border-top: 0; } :where(.page-faq) .links a::after { content: '→'; color: var(--sky-d); transition: transform .2s; } :where(.page-faq) .links a:hover { color: var(--ink); } :where(.page-faq) .links a:hover::after { transform: translateX(3px); } :where(.page-faq) .acc { display: grid; gap: 12px; } :where(.page-faq) .item.open { border-color: transparent; box-shadow: 0 0 0 1.5px var(--ink), var(--shadow); } :where(.page-faq) .q:focus-visible { outline-offset: -2px; border-radius: 16px; } .item.open .icon { transform: rotate(45deg); background: var(--ink); color: #fff; } :where(.page-faq) .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); } :where(.page-faq) .item.open .a { grid-template-rows: 1fr; } :where(.page-faq) .a > div { overflow: hidden; } :where(.page-faq) .a p { padding: 0 24px 22px; color: var(--muted); font-size: 15.5px; max-width: 62ch; } :where(.page-faq) .a a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--sky-d); } :where(.page-faq) .a a:hover { color: var(--sky-d); } mark { background: #FFF1C2; color: inherit; border-radius: 3px; padding: 0 2px; } :where(.page-faq) .none { text-align: center; padding: 36px 20px; border: 1.5px dashed var(--line); border-radius: 16px; color: var(--muted); } :where(.page-faq) .none b { display: block; color: var(--deep); font-size: 16px; margin-bottom: 4px; } /* ---------------------------------------------------------------- Home ---------------------------------------------------------------- */ .loc { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--sky-d); } .loc i { width: 8px; height: 8px; border-radius: 50%; background: #22B45E; box-shadow: 0 0 0 4px rgba(34,180,94,.15); } .hero-art .disc { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--sky-l) 60%, #CFE8FA 100%); } .hero-art .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(9,69,112,.16); } .hero-art .crest { position: absolute; left: 50%; top: 50%; width: 36%; transform: translate(-50%, -54%); } .float .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; flex: none; } .float.f1 { top: 12%; inset-inline-start: -4%; } .float.f2 { bottom: 14%; inset-inline-end: -4%; animation-delay: -3s; } .progs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .prog-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 22px; } .when-open { display: none; } .adm-open .when-open { display: inline-flex; } .adm-open .when-closed { display: none; } .adm-open h2.when-open, .adm-open p.when-open { display: block; } .prog li em { font-style: normal; font-weight: 600; color: var(--ink); white-space: nowrap; } .prog-foot { margin-top: auto; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .reopen-box { background: var(--deep); color: #fff; border-radius: var(--r); padding: clamp(32px, 4.5vw, 56px); display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: center; justify-content: space-between; } .reopen-copy { flex: 1 1 380px; min-width: 0; } .reopen-k { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); } .reopen-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); animation: reDot 1.8s ease-out infinite; } .reopen h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -.02em; margin: 12px 0 10px; } .reopen h2 span { color: var(--sky); } .reopen-copy p { max-width: 50ch; font-size: 16px; color: rgba(255,255,255,.75); } .reopen-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .cd { flex: 0 1 440px; width: 100%; max-width: 440px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .cd div { padding: 18px 4px 14px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); text-align: center; } .cd b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .cd span { display: block; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.6); } .cd .tk b { animation: reTick .45s var(--ease); } .adm-open .cd { display: none; } .band blockquote { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.3; letter-spacing: -.01em; color: var(--deep); max-width: 24em; margin: 12px auto 16px; } .big294 { font-family: var(--display); font-weight: 700; font-size: clamp(88px, 12vw, 160px); line-height: .9; letter-spacing: -.05em; color: var(--ink); } .big294 small { display: block; margin-top: 12px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sky-d); } .story .row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 22px; } .story .row span { font-size: 14px; color: var(--muted); } .story .row span b { color: var(--deep); font-size: 16px; } .quotes { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .quote figcaption { display: flex; align-items: center; gap: 12px; } .faq-more { text-align: center; margin-top: 28px; } a.txt-link { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--sky-d); } /* ---------------------------------------------------------------- Madrasah ---------------------------------------------------------------- */ :root:where(.page-madrasah) { --deep: #062F4D; --ink: #094570; --sky: #85CCFF; --sky-d: #3E97D9; --sky-l: #E3F2FD; --wash: #F4F8FB; --text: #0E2A3D; --muted: #5B6E7F; --line: #E3EAF0; --r: 20px; --ease: cubic-bezier(.2,.7,.2,1); --display: 'Bricolage Grotesque', 'Inter', sans-serif; --ar: 'Noto Naskh Arabic', serif; --shadow: 0 1px 2px rgba(6,47,77,.04), 0 12px 32px -18px rgba(6,47,77,.18); } :where(.page-madrasah) .dd-btn { display: inline-flex; align-items: center; gap: 6px; } :where(.page-madrasah) .note { font-size: 13.5px; background: var(--sky-l); color: var(--ink); border-radius: 10px; padding: 10px 14px; } :where(.page-madrasah) .cta-box h2 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.8vw, 44px); line-height: 1.12; letter-spacing: -.02em; color: var(--deep); max-width: 16em; margin: 0 auto 14px; } :where(.page-madrasah) .cta-box p { font-size: 17px; color: var(--muted); margin: 0 auto 28px; } :where(.page-madrasah) .pill { max-width: 1180px; margin: 0 auto; height: 76px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; position: relative; } :where(.page-madrasah) .ex { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; } :where(.page-madrasah) .sub { background: var(--wash); border-radius: 14px; padding: 12px 14px; } :where(.page-madrasah) .foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); } :where(.page-madrasah) .ph { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; } :where(.page-madrasah) .links { display: flex; align-items: center; gap: 24px; } :where(.page-madrasah) .links a:not(.btn), :where(.page-madrasah) .dd-btn { font-size: 14.5px; font-weight: 500; color: var(--muted); transition: color .2s; } :where(.page-madrasah) .links a:not(.btn):hover, :where(.page-madrasah) .dd:hover .dd-btn { color: var(--ink); } :where(.page-madrasah) .dd.cur .dd-btn { color: var(--ink); font-weight: 600; } :where(.page-madrasah) .links .btn { padding: 11px 20px; font-size: 14px; } .tog { display: none; width: 44px; height: 44px; border-radius: 10px; position: relative; border: 1px solid var(--line); } .tog span { position: absolute; inset-inline-start: 12px; inset-inline-end: 12px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s, opacity .2s; } .tog span:nth-child(1) { top: 15px; } .tog span:nth-child(2) { top: 20px; } .tog span:nth-child(3) { top: 25px; } .tog[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .tog[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .tog[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } :where(.page-madrasah) .dd-menu a:hover, :where(.page-madrasah) .dd-menu a[aria-current] { background: var(--wash); color: var(--ink) !important; } :where(.page-madrasah) .dd-menu a[aria-current] { font-weight: 600; } :where(.page-madrasah) .hc > * { animation: rise .8s var(--ease) both; } :where(.page-madrasah) .hc > *:nth-child(2) { animation-delay: .08s; } :where(.page-madrasah) .hc > *:nth-child(3) { animation-delay: .16s; } :where(.page-madrasah) .hc > *:nth-child(4) { animation-delay: .24s; } :where(.page-madrasah) .hc h1 { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 5vw, 62px); line-height: 1.06; letter-spacing: -.03em; color: var(--deep); margin: 4px 0 20px; } :where(.page-madrasah) .hc p { font-size: 18px; color: var(--muted); max-width: 48ch; margin-bottom: 32px; } .hv { position: relative; aspect-ratio: 1 / 1; max-width: 440px; width: 100%; margin: 0 auto; animation: rise .9s .2s var(--ease) both; } .hv .disc { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--sky-l) 60%, #CFE8FA 100%); } .hv .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(9,69,112,.16); } .hv .ayah { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 70%; } .hv .ayah b { display: block; font-family: var(--ar); font-weight: 700; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.5; color: var(--ink); } .hv .ayah span { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--sky-d); } .bd { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); font-size: 13px; color: var(--muted); animation: bob 6s ease-in-out infinite; } .bd b { display: block; font-size: 15px; color: var(--deep); line-height: 1.2; } .bd .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; flex: none; } .bd1 { top: 12%; inset-inline-start: -4%; } .bd2 { bottom: 14%; inset-inline-end: -4%; animation-delay: -3s; } .lad { list-style: none; position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; position: sticky; top: 96px; } .lad::before { content: ''; position: absolute; inset-inline-start: 37px; top: 34px; bottom: 34px; width: 2px; background: var(--line); } .lad button { position: relative; width: 100%; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; text-align: start; padding: 10px; border-radius: 12px; transition: background .2s; } .lad button:hover { background: var(--wash); } .lad button[aria-selected=true] { background: var(--sky-l); } .lad i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--muted); z-index: 1; } .lad .dn i { background: var(--sky-l); border-color: var(--sky); color: var(--ink); } .lad [aria-selected=true] i { background: var(--ink); border-color: var(--ink); color: #fff; } .lad b { display: block; font-size: 14.5px; font-weight: 600; color: var(--deep); line-height: 1.25; } .lad span { font-size: 12.5px; color: var(--muted); } .pan { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 3.5vw, 40px); box-shadow: var(--shadow); animation: rise .4s both; } :where(.page-madrasah) .ph .k { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sky-d); } .ph h3 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; color: var(--deep); margin: 4px 0 8px; } .ph .goal { color: var(--muted); max-width: 44ch; } :where(.page-madrasah) .sc { background: var(--sky-l); border-radius: 16px; padding: 16px 22px; min-width: 200px; } :where(.page-madrasah) .sc b { display: block; font-family: var(--display); font-size: 40px; line-height: 1; color: var(--ink); } .sc b.sm { font-size: 22px; } :where(.page-madrasah) .sc span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); } .pan h4 { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--deep); margin: 26px 0 12px; } .sg { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } :where(.page-madrasah) .sub i { font-style: normal; display: block; direction: rtl; text-align: start; font-family: var(--ar); font-size: 20px; line-height: 1.5; color: var(--ink); } :where(.page-madrasah) .sub b { font-size: 13px; font-weight: 600; color: var(--deep); } :where(.page-madrasah) .need, :where(.page-madrasah) .plan ul { list-style: none; display: grid; gap: 10px; } :where(.page-madrasah) .need li, :where(.page-madrasah) .plan li { display: flex; gap: 12px; font-size: 15px; } :where(.page-madrasah) .need li::before, :where(.page-madrasah) .plan li::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--sky-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23094570' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; } .strict { margin-top: 16px; background: #FFF6E5; border-inline-start: 3px solid #E0A23B; border-start-start-radius: 0; border-start-end-radius: 12px; border-end-end-radius: 12px; border-end-start-radius: 0; padding: 12px 16px; font-size: 14.5px; color: #6B4A12; } .pan .acts { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); } .pan .acts .btn { padding: 12px 20px; font-size: 14.5px; } :where(.page-madrasah) .how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } :where(.page-madrasah) .hw { padding: 28px 24px; border-radius: var(--r); background: var(--wash); } :where(.page-madrasah) .hw .ic { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; margin-bottom: 20px; } :where(.page-madrasah) .hw b { display: block; font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--deep); margin-bottom: 8px; } :where(.page-madrasah) .hw span { font-size: 15px; color: var(--muted); } :where(.page-madrasah) .yr { display: flex; gap: 6px; margin-top: 14px; } .yr i { font-style: normal; flex: 1; text-align: center; padding: 8px; border-radius: 10px; background: #fff; font-size: 12px; font-weight: 700; color: var(--ink); } .yr i + i { background: var(--ink); color: #fff; } .seg-wrap { display: flex; justify-content: center; margin: -16px 0 36px; } .seg { display: inline-flex; background: var(--wash); border: 1px solid var(--line); border-radius: 12px; padding: 4px; } .seg button { padding: 10px 28px; border-radius: 9px; font-size: 14.5px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s; } .seg [aria-selected=true] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px -2px rgba(6,47,77,.18); } :where(.page-madrasah) .pg { display: none; grid-template-columns: 1fr 1fr; gap: 24px; } :where(.page-madrasah) .pg.on { display: grid; animation: rise .5s both; } :where(.page-madrasah) .plan.f { border: 2px solid var(--ink); } :where(.page-madrasah) .plan h3 { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--deep); } :where(.page-madrasah) .plan ul { flex: 1; } :where(.page-madrasah) .plan li { color: var(--muted); } :where(.page-madrasah) .price b { font-family: var(--display); font-size: 30px; color: var(--deep); margin-inline-end: 4px; } :where(.page-madrasah) .year { margin-top: 24px; background: var(--deep); color: #fff; border-radius: var(--r); padding: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; } :where(.page-madrasah) .year h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.2; margin-bottom: 10px; } :where(.page-madrasah) .year p { color: rgba(255,255,255,.75); max-width: 46ch; } .yc { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 24px; } .yc .price { color: rgba(255,255,255,.7); } .yc .price b { color: var(--sky); } .yc .btn { width: 100%; margin-top: 16px; } :where(.page-madrasah) .had { margin-top: clamp(80px, 10vw, 128px); background: var(--wash); padding: clamp(64px, 8vw, 104px) 0; text-align: center; } .had .ar { font-family: var(--ar); font-weight: 700; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.8; color: var(--ink); direction: rtl; max-width: 26em; margin: 0 auto; } :where(.page-madrasah) .had p.en { font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.35; color: var(--deep); max-width: 26em; margin: 14px auto 14px; } .had cite { font-style: normal; font-size: 14px; color: var(--muted); } :where(.page-madrasah) .had + .sec { padding-top: clamp(80px, 10vw, 128px); } :where(.page-madrasah) .stu { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } :where(.page-madrasah) .sc2 .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; flex: none; } :where(.page-madrasah) .sc2 div { flex: 1; min-width: 0; } :where(.page-madrasah) .sc2 b { display: block; font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--deep); } :where(.page-madrasah) .sc2 span { font-size: 14.5px; color: var(--muted); } :where(.page-madrasah) .sc2 > svg { flex: none; color: var(--ink); transition: transform .25s var(--ease); } :where(.page-madrasah) .sc2:hover > svg { transform: translateX(4px); } :where(.page-madrasah) .faq summary::after { content: '+'; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--wash); color: var(--ink); display: grid; place-items: center; font-size: 20px; font-weight: 500; transition: transform .3s var(--ease); } :where(.page-madrasah) .faq details[open] summary::after { transform: rotate(45deg); } :where(.page-madrasah) footer { background: var(--deep); color: rgba(255,255,255,.62); margin-top: clamp(80px, 10vw, 128px); padding: 72px 0 28px; font-size: 14px; } .ft { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 44px; margin-bottom: 48px; } .fb { max-width: 320px; } .fb .brand { color: #fff; margin-bottom: 14px; } .fc { display: flex; gap: 64px; flex-wrap: wrap; } .fc h4 { font-family: var(--display); font-size: 16px; color: #fff; margin-bottom: 14px; } .fc a, .fc span { display: block; margin-bottom: 9px; transition: color .2s; } .fc a:hover { color: var(--sky); } .fbot { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); } :where(.page-madrasah) .home { position: fixed; inset-inline-start: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 8px; padding-block: 12px 12px; padding-inline: 14px 18px; border-radius: 12px; background: var(--deep); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(6,47,77,.6); transition: background .2s, transform .2s; } :where(.page-madrasah) .home:hover { background: var(--ink); transform: translateY(-2px); } :where(.page-madrasah) .wa { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .wab { display: inline-flex; align-items: center; gap: 10px; padding-block: 13px 13px; padding-inline: 14px 18px; border-radius: 12px; background: #128C4B; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(18,140,75,.7); transition: background .2s, transform .2s; } .wab:hover { background: #0E6F3B; transform: translateY(-2px); } .wam { display: none; flex-direction: column; gap: 4px; background: #fff; border-radius: 16px; padding: 8px; box-shadow: 0 24px 50px -16px rgba(6,47,77,.5); min-width: 240px; animation: waIn .25s ease both; } .wa.open .wam { display: flex; } .wam a { display: flex; flex-direction: column; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--deep); } .wam small { font-weight: 500; color: var(--muted); font-size: 13px; } .wam a:hover { background: var(--wash); } .acts.acts-center { justify-content: center; } /* ---------------------------------------------------------------- Mission & Vision ---------------------------------------------------------------- */ :where(.page-mission) .hero::before { content: ''; position: absolute; width: 520px; height: 520px; inset-inline-start: -220px; top: -200px; border-radius: 50%; border: 1.5px dashed rgba(9,69,112,.12); pointer-events: none; } :where(.page-mission) .hero p { font-size: 18px; color: var(--muted); max-width: 48ch; margin: 0 auto; } .hero-crest { position: absolute; inset-inline-end: max(-60px, calc(50% - 680px)); top: 50%; width: 300px; height: auto; transform: translateY(-50%) rotate(-8deg); fill: var(--ink); opacity: .05; pointer-events: none; } :where(.page-mission) .m-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; transition: background .35s, color .35s; } :where(.page-mission) .m-ico svg { width: 28px; height: 28px; } .vision { background: var(--wash); padding: clamp(72px, 9vw, 112px) 0; text-align: center; position: relative; overflow: hidden; } .vision::before, .vision::after { content: ''; position: absolute; border-radius: 50%; border: 1.5px dashed rgba(9,69,112,.1); pointer-events: none; } .vision::before { width: 420px; height: 420px; inset-inline-end: -160px; top: -160px; } .vision::after { width: 300px; height: 300px; inset-inline-start: -120px; bottom: -140px; } .vision .seal { width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); } .vision .seal svg { width: 30px; height: auto; } .vision blockquote { position: relative; font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4vw, 50px); line-height: 1.14; letter-spacing: -.025em; color: var(--deep); max-width: 18em; margin: 6px auto 20px; } .vision blockquote em { font-style: normal; color: var(--sky-d); } .vision p { color: var(--muted); font-size: 18px; max-width: 46ch; margin: 0 auto; } :where(.page-mission) .pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; } :where(.page-mission) .pillars span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); } :where(.page-mission) .pillars span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sky-d); } .vision + .sec { padding-top: clamp(80px, 10vw, 128px); } .m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; counter-reset: m; } .m-card { counter-increment: m; display: flex; flex-direction: column; padding: 34px 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); } .m-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .m-top::after { content: '0' counter(m); font-family: var(--display); font-weight: 700; font-size: 15px; color: #B8C8D6; transition: color .35s; } .m-card h3 { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; color: var(--deep); margin-bottom: 10px; transition: color .35s; } .m-card p { color: var(--muted); font-size: 16px; max-width: 44ch; flex: 1; margin-bottom: 20px; transition: color .35s; } .m-card a { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); transition: color .35s; } .m-card a::after { content: '\2192'; transition: transform .25s var(--ease); } .m-card a:hover::after { transform: translateX(4px); } :where(.page-mission) .fx.fx-on .m-ico { background: rgba(133,204,255,.16); color: var(--sky); } .fx.fx-on .m-top::after { color: rgba(133,204,255,.6); } :where(.page-mission) .fx.fx-on a { color: var(--sky); } /* ---------------------------------------------------------------- Policies ---------------------------------------------------------------- */ :where(.page-policies) .hero small { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink); } :where(.page-policies) .hero small::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #1F9D55; box-shadow: 0 0 0 3px rgba(31,157,85,.15); } .hl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: -8px; } .hl { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 26px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); } .hl-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; margin-bottom: 10px; } .hl-ico svg { width: 22px; height: 22px; } .hl b { font-family: var(--display); font-size: 20px; line-height: 1.2; color: var(--deep); } .hl span { font-size: 14.5px; color: var(--muted); } .hl.key { background: linear-gradient(150deg, var(--ink), var(--deep)); border-color: transparent; overflow: hidden; isolation: isolate; } .hl.key::before { content: ''; position: absolute; inset-inline-end: -60px; top: -60px; width: 170px; height: 170px; border-radius: 50%; border: 1.5px dashed rgba(133,204,255,.28); z-index: -1; } .hl.key .hl-ico { background: rgba(133,204,255,.16); color: var(--sky); } .hl.key b { color: #fff; } .hl.key span { color: rgba(255,255,255,.78); } .doc { padding: clamp(56px, 7vw, 88px) 0 0; } .doc-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; } .toc { position: sticky; top: 100px; display: grid; gap: 2px; padding: 14px; background: var(--wash); border: 1px solid var(--line); border-radius: var(--r); } .toc-h { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 4px 12px 10px; } .toc a { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: background .2s, color .2s; } .toc a::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #C3D3E0; transition: background .2s, transform .2s; } .toc a:hover { color: var(--ink); background: #fff; } .toc a.active { background: #fff; color: var(--deep); font-weight: 600; box-shadow: 0 1px 2px rgba(6,47,77,.06), 0 4px 12px -6px rgba(6,47,77,.2); } .toc a.active::before { background: var(--sky-d); transform: scale(1.3); } .toc a.toc-q { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; color: var(--ink); font-weight: 600; } .toc a.toc-q::before { display: none; } .toc a.toc-q::after { content: '\2192'; margin-inline-start: auto; } .doc-body { counter-reset: sec; } .doc section { counter-increment: sec; padding: clamp(26px, 3.4vw, 36px); margin-bottom: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); scroll-margin-top: 100px; transition: border-color .3s, box-shadow .3s; } .doc section:target, .doc section.is-active { border-color: #C9DCEB; box-shadow: var(--shadow); } .sec-n { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sky-d); margin-bottom: 8px; } .sec-n::before { content: counter(sec, decimal-leading-zero); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--sky-l); color: var(--ink); letter-spacing: 0; font-size: 12px; } .doc h2 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15; letter-spacing: -.02em; color: var(--deep); margin-bottom: 14px; } .doc h3 { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--deep); margin: 22px 0 6px; } .doc p, .doc li { color: var(--muted); font-size: 16px; max-width: 68ch; } .doc p + p { margin-top: 12px; } .doc ul { list-style: none; margin: 12px 0 0; display: grid; gap: 8px; } .doc li { position: relative; padding-inline-start: 22px; } .doc li::before { content: ''; position: absolute; inset-inline-start: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--sky-d); } .doc li strong { color: var(--deep); } .doc a:not(.btn) { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--sky); transition: border-color .2s; } .doc a:not(.btn):hover { border-color: var(--ink); } .callout { display: flex; gap: 14px; align-items: center; background: var(--sky-l); border: 1px solid #CFE6F8; border-radius: 14px; padding: 16px 18px; margin: 4px 0 18px; } .callout::before { content: '!'; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 15px; } .callout p { color: var(--deep); font-weight: 600; margin: 0; } .steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .steps3 li { padding: 16px; padding-inline-start: 16px; border-radius: 14px; background: var(--wash); border: 1px solid var(--line); font-size: 14.5px; max-width: none; } .steps3 li::before { display: none; } .steps3 li strong { display: block; font-family: var(--display); font-size: 15px; margin-bottom: 4px; } .steps3 li:nth-child(1) { border-top: 3px solid #1F9D55; } .steps3 li:nth-child(2) { border-top: 3px solid #D9A21B; } .steps3 li:nth-child(3) { border-top: 3px solid #C2453A; } .contact-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .contact-row a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: var(--wash); border: 1px solid var(--line) !important; font-size: 14px; } .contact-row a:hover { border-color: var(--ink) !important; } .contact-row small { font-weight: 500; color: var(--muted); } .doc .after-list { margin-top: 14px; } /* ---------------------------------------------------------------- Programmes ---------------------------------------------------------------- */ :where(.page-programmes) .hero::before { content: ''; position: absolute; width: 520px; height: 520px; inset-inline-end: -200px; top: -200px; border-radius: 50%; border: 1.5px dashed rgba(9,69,112,.12); pointer-events: none; } :where(.page-programmes) .hero-copy > *:nth-child(3) { animation-delay: .12s; } :where(.page-programmes) .hero-copy > *:nth-child(4) { animation-delay: .18s; } :where(.page-programmes) .hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(36px, 5vw, 60px); line-height: 1.08; letter-spacing: -.03em; color: var(--deep); margin-bottom: 18px; } :where(.page-programmes) .hero-copy > *:nth-child(2) { animation-delay: .06s; } :where(.page-programmes) td { padding: 18px 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); vertical-align: top; transition: background .2s; } :where(.page-programmes) .hero-copy > *:nth-child(5) { animation-delay: .24s; } :where(.page-programmes) .ask { margin-top: 36px !important; font-size: 13px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-d) !important; } :where(.page-programmes) .choose { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; } :where(.page-programmes) .choose a { display: inline-flex; align-items: center; gap: 10px; padding-block: 12px 12px; padding-inline: 12px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--deep); font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow); transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; } :where(.page-programmes) .choose a i { width: 32px; height: 32px; border-radius: 10px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; transition: background .2s, color .2s; } :where(.page-programmes) .choose a:hover { border-color: var(--ink); transform: translateY(-3px); } :where(.page-programmes) .choose a:hover i { background: var(--ink); color: #fff; } .deck { padding: clamp(32px, 4vw, 56px) 0 0; } .dcard { position: sticky; top: calc(96px + var(--n) * 16px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 48px); align-items: stretch; padding: clamp(28px, 4vw, 44px); border-radius: var(--r); margin-bottom: 32px; background: #fff; border: 1px solid var(--line); box-shadow: 0 -10px 40px -24px rgba(6,47,77,.28), 0 16px 40px -28px rgba(6,47,77,.25); scroll-margin-top: 96px; } .c1 { --n: 0; } :where(.page-programmes) .c2 { --n: 1; } .c3 { --n: 2; } .c4 { --n: 3; } .dtext { display: flex; flex-direction: column; gap: 16px; } .dnum { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--sky-d); } .dtags { display: flex; flex-wrap: wrap; gap: 8px; } .dtags span { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--wash); color: var(--ink); } .dcard h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -.025em; color: var(--deep); } .dlead { font-size: 16.5px; max-width: 48ch; color: var(--muted); } .dlist { list-style: none; display: grid; gap: 10px; margin: 2px 0 4px; } .dlist li { display: flex; gap: 12px; font-size: 15px; color: var(--text); } .dlist li::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--sky-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23094570' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; } .dfoot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line); } .dprice small { display: block; font-size: 13px; color: var(--muted); } .dprice b { font-family: var(--display); font-size: clamp(26px, 2.8vw, 34px); line-height: 1.1; letter-spacing: -.02em; color: var(--deep); } .dprice b span { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; } .dbtns { display: flex; gap: 10px; flex-wrap: wrap; } .dbtns .btn { padding: 12px 20px; font-size: 14.5px; } .dart { position: relative; overflow: hidden; border-radius: 16px; min-height: 300px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #fff 0%, var(--sky-l) 55%, #CFE8FA 100%); } .c2 .dart, .c4 .dart { background: radial-gradient(circle at 30% 25%, #0B5A8F 0%, var(--ink) 50%, var(--deep) 100%); } .dart::before, .dart::after { content: ''; position: absolute; border-radius: 50%; border: 1.5px dashed rgba(9,69,112,.18); } .c2 .dart::before, .c2 .dart::after, .c4 .dart::before, .c4 .dart::after { border-color: rgba(133,204,255,.25); } .dart::before { width: 78%; aspect-ratio: 1; } .dart::after { width: 112%; aspect-ratio: 1; } .dart .big { position: relative; z-index: 1; width: 108px; height: 108px; border-radius: 30px; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 20px 40px -20px rgba(6,47,77,.45); transition: transform .6s var(--ease); } .c2 .dart .big, .c4 .dart .big { background: var(--sky); color: var(--deep); } .dart .big svg { width: 50px; height: 50px; } .dcard:hover .dart .big { transform: translateY(-6px) rotate(-4deg); } .dbadge { position: absolute; z-index: 1; inset-inline-start: 16px; bottom: 16px; background: #fff; color: var(--deep); font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; box-shadow: 0 8px 20px -10px rgba(6,47,77,.4); } :where(.page-programmes) td:first-child { font-weight: 700; color: var(--deep); white-space: nowrap; } :where(.page-programmes) td:last-child { font-weight: 600; color: var(--deep); white-space: nowrap; } :where(.page-programmes) td a { color: var(--ink); border-bottom: 1px solid var(--sky-d); } /* ---------------------------------------------------------------- Skills School ---------------------------------------------------------------- */ :where(.page-skills-school) .cta-box { text-align: center; padding: clamp(48px, 7vw, 80px) 24px; border-radius: var(--r); background: linear-gradient(180deg, var(--sky-l), #fff); border: 1px solid var(--line); } :where(.page-skills-school) .cta-box h2 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -.02em; color: var(--deep); max-width: 16em; margin: 0 auto 14px; } :where(.page-skills-school) .cta-box p { font-size: 17px; color: var(--muted); max-width: 46ch; margin: 0 auto 28px; } :where(.page-skills-school) .search { display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 30px auto 0; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding-block: 6px 6px; padding-inline: 18px 6px; color: var(--muted); box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s; } :where(.page-skills-school) .search svg { flex: none; color: var(--sky-d); } :where(.page-skills-school) .search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font: inherit; font-size: 15px; color: var(--text); padding: 11px 0; } :where(.page-skills-school) .tag { font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--wash); border: 1px solid var(--line); color: var(--ink); } :where(.page-skills-school) .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); margin-top: -8px; position: relative; } :where(.page-skills-school) .fact { padding: 22px 24px; display: flex; flex-direction: column; gap: 2px; } :where(.page-skills-school) .fact b { font-family: var(--display); font-size: 26px; line-height: 1.1; color: var(--deep); letter-spacing: -.01em; } :where(.page-skills-school) .tags { display: flex; gap: 6px; flex-wrap: wrap; } :where(.page-skills-school) .price b { display: block; font-family: var(--display); font-size: 26px; color: var(--ink); line-height: 1.1; } :where(.page-skills-school) .search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(133,204,255,.35); } :where(.page-skills-school) .search input::placeholder { color: #93A4B3; } :where(.page-skills-school) .search .count { font-size: 13px; font-weight: 700; color: var(--ink); background: var(--sky-l); padding: 9px 14px; border-radius: 10px; white-space: nowrap; } .quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; } .quick button { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink); transition: border-color .2s, background .2s, color .2s; } .quick button:hover { border-color: var(--ink); } .quick button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; } :where(.page-skills-school) .fact span { font-size: 13.5px; color: var(--muted); } .course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } :where(.page-skills-school) .course { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .3s, box-shadow .3s, transform .35s var(--ease), opacity .8s var(--ease); } :where(.page-skills-school) .course:hover { border-color: #C9D6E1; box-shadow: 0 24px 48px -28px rgba(6,47,77,.4); transform: translateY(-4px); } :where(.page-skills-school) .course.hidden { display: none; } .cart { position: relative; overflow: hidden; height: 190px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #fff 0%, var(--sky-l) 55%, #CFE8FA 100%); } .course.c2 .cart { background: radial-gradient(circle at 30% 25%, #0B5A8F 0%, var(--ink) 50%, var(--deep) 100%); } .cart::before, .cart::after { content: ''; position: absolute; border-radius: 50%; border: 1.5px dashed rgba(9,69,112,.18); } .course.c2 .cart::before, .course.c2 .cart::after { border-color: rgba(133,204,255,.25); } .cart::before { width: 190px; aspect-ratio: 1; } .cart::after { width: 300px; aspect-ratio: 1; } .cart .big { position: relative; z-index: 1; width: 88px; height: 88px; border-radius: 26px; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 20px 40px -20px rgba(6,47,77,.45); transition: transform .6s var(--ease); } .course.c2 .cart .big { background: var(--sky); color: var(--deep); } .cart .big svg { width: 42px; height: 42px; } .course:hover .cart .big { transform: translateY(-6px) rotate(-4deg); } :where(.page-skills-school) .level { position: absolute; z-index: 1; inset-inline-start: 16px; top: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; color: var(--ink); box-shadow: 0 4px 12px -6px rgba(6,47,77,.3); } :where(.page-skills-school) .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; } :where(.page-skills-school) .bars b { width: 3px; border-radius: 2px; background: #C9D6E1; } :where(.page-skills-school) .bars b:nth-child(1) { height: 5px; } :where(.page-skills-school) .bars b:nth-child(2) { height: 7.5px; } :where(.page-skills-school) .bars b:nth-child(3) { height: 10px; } .l1 .bars b:nth-child(1), .l2 .bars b:nth-child(-n + 2), .l3 .bars b { background: var(--sky-d); } .course-body { padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; } :where(.page-skills-school) .course h3 { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -.01em; color: var(--deep); } .course .desc { color: var(--muted); font-size: 15px; flex: 1; } .outcome { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--sky-l); font-size: 13.5px; color: var(--ink); font-weight: 600; } .outcome svg { flex: none; margin-top: 2px; color: var(--sky-d); } .course-foot { padding-top: 16px; margin-top: 4px; border-top: 1px dashed #D5E1EB; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } :where(.page-skills-school) .price span { font-size: 13px; color: var(--muted); } .course-foot .btn { padding: 12px 18px; font-size: 14.5px; } .course-foot .btn::after { content: '\2192'; transition: transform .2s; } .course-foot .btn:hover::after { transform: translateX(3px); } .no-results { display: none; text-align: center; padding: 44px 24px; color: var(--muted); background: #fff; border: 1.5px dashed #C9D6E1; border-radius: var(--r); } .no-results.show { display: block; } /* ---------------------------------------------------------------- Success Stories ---------------------------------------------------------------- */ :where(.page-success-stories) .hero { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 112px) 0 clamp(96px, 11vw, 140px); background: linear-gradient(180deg, var(--wash) 0%, #fff 100%); text-align: center; } :where(.page-success-stories) .hero::before { width: 520px; height: 520px; inset-inline-start: -200px; top: -180px; } :where(.page-success-stories) .hero::after { width: 380px; height: 380px; inset-inline-end: -140px; bottom: -160px; } :where(.page-success-stories) .hero-copy { position: relative; max-width: 720px; margin: 0 auto; } :where(.page-success-stories) .fx { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; transition: color .35s, border-color .35s, box-shadow .35s, transform .35s var(--ease); } :where(.page-success-stories) .stats { position: relative; z-index: 2; margin-top: -64px; } :where(.page-success-stories) .nav-links a:not(.btn):hover, :where(.page-success-stories) .nav-links a[aria-current="page"] { color: var(--ink); } :where(.page-success-stories) .nav-links a[aria-current="page"] { font-weight: 600; } :where(.page-success-stories) .avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--sky-l); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 18px; display: grid; place-items: center; flex: none; } .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; } .stat { position: relative; padding: 28px 26px 30px; } .stat + .stat { border-inline-start: 1px solid var(--line); } .stat::after { content: ''; position: absolute; inset-inline-start: 26px; inset-inline-end: 26px; bottom: 18px; height: 4px; border-radius: 4px; background: var(--sky-l); } .stat i { position: absolute; inset-inline-start: 26px; bottom: 18px; height: 4px; width: calc((100% - 52px) * var(--fill, .9)); border-radius: 4px; background: var(--sky-d); z-index: 1; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .3s; } .stat.in i { transform: scaleX(1); } .stat b { display: block; font-family: var(--display); font-size: clamp(40px, 4.4vw, 54px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--ink); } .stat strong { display: block; margin-top: 12px; color: var(--deep); font-size: 15.5px; font-weight: 600; } .stat span { display: block; font-size: 13.5px; color: var(--muted); margin: 2px 0 10px; line-height: 1.4; } .spot-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; padding: clamp(28px, 4.5vw, 56px); border: 1px solid var(--line); border-radius: var(--r); background: #fff; } .badge { position: relative; width: 200px; height: 200px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--sky-l) 60%, #CFE8FA 100%); } .badge::before, .badge::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--sky-d); animation: ring 3.2s ease-out infinite; } .badge::after { animation-delay: 1.6s; } .badge b { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -.04em; color: var(--ink); } .badge span { font-size: 13px; font-weight: 600; color: var(--sky-d); margin-top: 6px; } .spot-box h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -.02em; color: var(--deep); margin: 4px 0 16px; } .spot-box .kicker { margin-bottom: 4px; } .spot-box p { color: var(--muted); font-size: 16.5px; max-width: 58ch; } .spot-box p + p { margin-top: 12px; } .voice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } :where(.page-success-stories) .voice { display: flex; flex-direction: column; gap: 20px; padding: 30px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); } .voice .qm { width: 32px; height: 32px; color: var(--sky-d); } :where(.page-success-stories) .voice header { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); } :where(.page-success-stories) .voice b { display: block; font-size: 15px; color: var(--deep); line-height: 1.3; } :where(.page-success-stories) .voice small { font-size: 13px; font-weight: 600; color: var(--sky-d); } .stars { display: flex; gap: 3px; } .stars svg { width: 17px; height: 17px; fill: #F2B33D; transition: fill .3s; } .voice blockquote { font-size: 15.5px; line-height: 1.7; color: var(--text); } .js .stars svg { opacity: 0; transform: scale(0) rotate(-40deg); } .js .in .stars svg { animation: pop-star .5s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 140ms + 400ms + var(--s) * 90ms); } :where(.page-success-stories) .fx.fx-on :is(b, blockquote) { color: #fff; } :where(.page-success-stories) .fx.fx-on small, :where(.page-success-stories) .fx.fx-on .qm { color: var(--sky); } :where(.page-success-stories) .fx.fx-on header { border-color: rgba(255,255,255,.15); } :where(.page-success-stories) .fx.fx-on .avatar { background: var(--sky); color: var(--deep); } .fill-90 { --fill: .9; } .fill-98 { --fill: .98; } /* ---------------------------------------------------------------- Teenagers Building Circle ---------------------------------------------------------------- */ :where(.page-teenagers-building-circle) .steps { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: s; } :where(.page-teenagers-building-circle) .pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } :where(.page-teenagers-building-circle) .plan { position: sticky; top: 100px; background: #fff; border: 2px solid var(--ink); border-radius: var(--r); padding: clamp(28px, 3.5vw, 40px); box-shadow: var(--shadow); } :where(.page-teenagers-building-circle) .plan h3 { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--deep); margin: 8px 0 20px; } .quad { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 440px; width: 100%; margin: 0 auto; animation: rise .9s .2s var(--ease) both; } .quad .q { aspect-ratio: 1 / 1; border-radius: 24px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); } .quad .q:nth-child(1) { border-start-start-radius: 60px; border-start-end-radius: 24px; border-end-end-radius: 24px; border-end-start-radius: 24px; } .quad .q:nth-child(2) { border-start-start-radius: 24px; border-start-end-radius: 60px; border-end-end-radius: 24px; border-end-start-radius: 24px; } .quad .q:nth-child(3) { border-start-start-radius: 24px; border-start-end-radius: 24px; border-end-end-radius: 24px; border-end-start-radius: 60px; } .quad .q:nth-child(4) { border-start-start-radius: 24px; border-start-end-radius: 24px; border-end-end-radius: 60px; border-end-start-radius: 24px; } .quad .q:nth-child(2), .quad .q:nth-child(3) { background: var(--sky-l); border-color: transparent; box-shadow: none; } .quad .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; } .quad .q:nth-child(2) .ic, .quad .q:nth-child(3) .ic { background: #fff; } .quad b { font-family: var(--display); font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--deep); } .quad .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 50%; background: var(--deep); display: grid; place-items: center; box-shadow: 0 0 0 8px #fff, 0 14px 30px -12px rgba(6,47,77,.5); } .quad .core svg { width: 32px; height: auto; } :where(.page-teenagers-building-circle) .pillar .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; margin-bottom: 22px; } :where(.page-teenagers-building-circle) .pillar .ic svg { width: 26px; height: 26px; } :where(.page-teenagers-building-circle) .pillar small { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--sky-d); } :where(.page-teenagers-building-circle) .pillar h3 { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--deep); margin: 4px 0 10px; } :where(.page-teenagers-building-circle) .pillar p { font-size: 15px; color: var(--muted); } .detail-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 64px); align-items: start; } .detail-copy .kicker { margin-bottom: 10px; } .detail-copy h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -.02em; color: var(--deep); margin-bottom: 16px; } .detail-copy > p { color: var(--muted); font-size: 16.5px; max-width: 56ch; margin-bottom: 28px; } :where(.page-teenagers-building-circle) .steps li { counter-increment: s; display: flex; align-items: center; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--line); font-size: 15.5px; font-weight: 500; color: var(--deep); } :where(.page-teenagers-building-circle) .steps li::before { content: "0" counter(s); flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--sky-l); color: var(--ink); display: grid; place-items: center; font-size: 13px; font-weight: 700; } :where(.page-teenagers-building-circle) .plan small.k { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sky-d); } :where(.page-teenagers-building-circle) .plan .price { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--deep); } :where(.page-teenagers-building-circle) .plan .price span { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 15px; color: var(--muted); } :where(.page-teenagers-building-circle) .plan .ages { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; } :where(.page-teenagers-building-circle) .plan .ages span { padding: 5px 12px; border-radius: 999px; background: var(--wash); font-size: 13px; font-weight: 600; color: var(--ink); } :where(.page-teenagers-building-circle) .plan .btn { width: 100%; } :where(.page-teenagers-building-circle) .plan .alt { display: block; text-align: center; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink); } /* ---------------------------------------------------------------- Academy student dashboard ---------------------------------------------------------------- */ :where(.page-academy-dashboard) .stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 22px; } :where(.page-academy-dashboard) .stats > div { background: var(--wash); border-radius: 18px; padding: 16px 18px; } .stats .big { font-size: 28px; } .mchart { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 150px; margin: 30px 0 4px; padding-bottom: 20px; } .mchart div { flex: 1; background: var(--sky); border-radius: 8px 8px 0 0; position: relative; min-height: 4px; transition: height .9s; height: 4px; } .mchart div.wk { background: var(--ink); } .mchart div em { position: absolute; top: -17px; inset-inline-start: 0; inset-inline-end: 0; text-align: center; font-style: normal; font-size: 11px; color: var(--muted); font-weight: 600; } .mchart div span { position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%); font-size: 10.5px; color: var(--muted); white-space: nowrap; } .tline { position: absolute; inset-inline-start: 0; inset-inline-end: 0; border-top: 2px dashed #3E97D9; z-index: 2; pointer-events: none; height: 0; margin-bottom: 20px; } .tline em { position: absolute; inset-inline-end: 0; top: -18px; font-size: 11px; font-style: normal; font-weight: 700; color: var(--sky-d); background: #fff; padding: 0 4px; } :where(.page-academy-dashboard) .legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); margin: 6px 0 16px; } :where(.page-academy-dashboard) .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--sky); margin-inline-end: 6px; } .legend i.wk { background: var(--ink); } :where(.page-academy-dashboard) .sits { display: grid; gap: 8px; } :where(.page-academy-dashboard) .sit { background: var(--wash); border-radius: 16px; } :where(.page-academy-dashboard) .sit[open] { box-shadow: 0 0 0 1.5px var(--ink); background: #fff; } :where(.page-academy-dashboard) .sit summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 18px; cursor: pointer; } :where(.page-academy-dashboard) .sit summary::-webkit-details-marker { display: none; } :where(.page-academy-dashboard) .sit summary b { display: block; color: var(--deep); font-size: 15px; } :where(.page-academy-dashboard) .sit summary small { color: var(--muted); font-size: 13px; } :where(.page-academy-dashboard) .subj { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 16px; } :where(.page-academy-dashboard) .subj span { font-size: 13px; color: var(--muted); background: var(--wash); border-radius: 999px; padding: 6px 12px; } :where(.page-academy-dashboard) .subj b { color: var(--deep); } .rform { display: grid; gap: 10px; margin-top: 14px; } .rform label { font-size: 13px; font-weight: 600; color: var(--deep); display: block; margin-bottom: 6px; } .rform input { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid transparent; background: var(--wash); font-size: 15px; } .rform input:focus { outline: none; border-color: var(--ink); background: #fff; } :where(.page-academy-dashboard) .r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rform .btn { justify-self: start; } .rchart { display: flex; align-items: flex-end; gap: 8px; height: 80px; margin-top: 8px; padding-bottom: 18px; } .rchart div { flex: 1; background: var(--sky); border-radius: 6px 6px 0 0; position: relative; min-height: 4px; height: 4px; transition: height .9s; } .rchart div.hit { background: var(--ink); } .rchart div span { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10.5px; color: var(--muted); white-space: nowrap; } /* ---------------------------------------------------------------- Library ---------------------------------------------------------------- */ :root:where(.page-library) { --deep: #062F4D; --ink: #094570; --sky: #85CCFF; --sky-d: #3E97D9; --sky-l: #E3F2FD; --wash: #F4F8FB; --text: #0E2A3D; --muted: #5B6E7F; --line: #E3EAF0; --d: 'Bricolage Grotesque','Inter',sans-serif; --ease: cubic-bezier(.2,.7,.2,1); --ring: 0 0 0 1px var(--line); --shadow: 0 0 0 1px var(--line),0 12px 32px -22px rgba(6,47,77,.25); } :where(.page-library) .wrap { position: relative; max-width: 1200px; margin: 0 auto; padding: 52px 24px 40px; } :where(.page-library) .btn-line:hover { border-color: var(--ink); } :where(.page-library) .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } :where(.page-library) .brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--d); font-weight: 700; font-size: 18px; color: var(--deep); } :where(.page-library) .top > div { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } :where(.page-library) .top .btn { min-height: 40px; padding: 0 16px; font-size: 13.5px; } :where(.page-library) .item .btn-ink::after, :where(.page-library) .feat .btn-sky::after { content: '\2197'; font-size: 13px; transition: transform .2s; } :where(.page-library) .item .btn-ink:hover::after, :where(.page-library) .feat .btn-sky:hover::after { transform: translate(2px,-2px); } :where(.page-library) .lbox .btn { width: 100%; min-height: 50px; } :where(.page-library) .greet { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-d); margin-bottom: 12px; animation: up .5s var(--ease) both; } :where(.page-library) .foot2 { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); } :where(.page-library) .item { position: relative; background: #fff; border-radius: 18px; padding: 20px 22px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; box-shadow: var(--shadow); animation: up .45s var(--ease) backwards; animation-delay: calc(var(--i,0)*35ms); transition: box-shadow .25s,transform .25s; } :where(.page-library) .item::before { content: ''; position: absolute; inset-inline-start: 0; top: 18px; bottom: 18px; width: 3px; border-start-start-radius: 0; border-start-end-radius: 3px; border-end-end-radius: 3px; border-end-start-radius: 0; background: var(--sky-d); transform: scaleY(0); transition: transform .25s var(--ease); } :where(.page-library) .item:hover { box-shadow: 0 0 0 1.5px var(--ink),0 24px 40px -30px rgba(6,47,77,.5); transform: translateY(-2px); } :where(.page-library) .item:hover::before { transform: scaleY(1); } :where(.page-library) .item h3 { font-family: var(--d); font-size: 19px; line-height: 1.25; color: var(--deep); } :where(.page-library) .empty { background: #fff; border-radius: 20px; padding: 44px 28px; text-align: center; color: var(--muted); box-shadow: var(--shadow); border: 1.5px dashed #C9D6E1; } :where(.page-library) #app { overflow-x: clip; background: linear-gradient(180deg,#fff 0,var(--wash) 380px); } :where(.page-library) .wrap::before { content: ''; position: absolute; inset-inline-end: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; border: 1.5px dashed rgba(9,69,112,.12); pointer-events: none; } :where(.page-library) .wrap::after { content: ''; position: absolute; inset-inline-end: 110px; top: 40px; width: 120px; height: 120px; border-radius: 50%; border: 1.5px dashed rgba(62,151,217,.25); pointer-events: none; } :where(.page-library) .greet::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--sky-d); } :where(.page-library) .wrap > h1 { font-family: var(--d); font-weight: 700; font-size: clamp(36px,5.4vw,60px); line-height: 1.04; letter-spacing: -.03em; color: var(--deep); margin-bottom: 14px; animation: up .55s var(--ease) .05s both; } .intro { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; animation: up .55s var(--ease) .1s both; } .intro p { font-size: 17px; color: var(--muted); max-width: 52ch; } :where(.page-library) .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: var(--ring); font-size: 13px; font-weight: 600; color: var(--ink); } :where(.page-library) .chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #1F9D55; box-shadow: 0 0 0 3px rgba(31,157,85,.15); } :where(.page-library) .layout { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 36px; align-items: flex-start; position: relative; z-index: 1; } .rail { flex: 1 1 260px; max-width: 300px; background: #fff; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 22px; box-shadow: var(--shadow); position: sticky; top: 88px; } :where(.page-library) .main { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 36px; } .rail label, .rail .lbl { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .rail input { min-height: 46px; padding-inline-start: 42px; background: var(--wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6E7F' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 14px center/17px no-repeat; border-color: transparent; } .rail input:focus { background-color: #fff; } :where(.page-library) .subjects { display: flex; flex-direction: column; gap: 2px; } :where(.page-library) .subjects button { display: flex; justify-content: space-between; align-items: center; min-height: 42px; padding: 0 12px; border-radius: 10px; color: var(--text); font-size: 14.5px; font-weight: 500; text-align: start; transition: background .2s,color .2s; } :where(.page-library) .subjects button:hover { background: var(--wash); } :where(.page-library) .subjects button span + span { min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--wash); color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; } .subjects button[aria-pressed=true] { background: var(--ink); color: #fff; font-weight: 600; } .subjects button[aria-pressed=true] span + span { background: rgba(255,255,255,.18); color: #fff; } .formats { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 4px; background: var(--wash); border-radius: 12px; } .formats button { min-height: 38px; padding: 0 12px; border-radius: 9px; color: var(--muted); font-size: 13.5px; font-weight: 600; transition: background .2s,color .2s,box-shadow .2s; } .formats button:hover { color: var(--ink); } .formats button[aria-pressed=true] { background: #fff; color: var(--deep); box-shadow: 0 1px 2px rgba(6,47,77,.08),0 4px 12px -6px rgba(6,47,77,.25); } :where(.page-library) .levels { border-top: 1px solid var(--line); padding-top: 18px; } :where(.page-library) .levels button { width: 100%; min-height: 44px; border-radius: 12px; border: 1.5px dashed #9FC2DD; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; transition: background .2s,color .2s,border-color .2s; } :where(.page-library) .levels button:hover { border-color: var(--ink); } .levels button[aria-pressed=true] { background: var(--ink); color: #fff; border-style: solid; border-color: var(--ink); } .sortbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 10px; background: #fff; box-shadow: var(--ring); color: var(--ink); font-size: 13px; font-weight: 600; transition: box-shadow .2s; } .sortbtn::before { content: '\21C5'; font-size: 14px; color: var(--sky-d); } .sortbtn:hover { box-shadow: 0 0 0 1.5px var(--ink); } :where(.page-library) .main h2 { font-family: var(--d); font-size: 26px; letter-spacing: -.02em; color: var(--deep); line-height: 1.2; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } :where(.page-library) .main h2 small { font-family: 'Inter',sans-serif; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--sky-l); padding: 3px 10px; border-radius: 999px; } .fgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; margin-top: 16px; } .feat { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(150deg,var(--ink),var(--deep)); color: #fff; border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 10px; animation: up .5s var(--ease) backwards; box-shadow: 0 20px 40px -26px rgba(6,47,77,.7); } .feat:nth-child(2) { animation-delay: .08s; } .feat::before { content: ''; position: absolute; inset-inline-end: -70px; top: -70px; width: 200px; height: 200px; border-radius: 50%; border: 1.5px dashed rgba(133,204,255,.28); z-index: -1; } .feat .top2 { display: flex; align-items: center; justify-content: space-between; } :where(.page-library) .tile { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--sky); color: var(--deep); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11.5px; letter-spacing: .06em; } :where(.page-library) .tile svg { width: 24px; height: 24px; } .newp { padding: 4px 11px; border-radius: 999px; background: rgba(133,204,255,.18); color: var(--sky); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .feat h3 { margin-top: 8px; font-family: var(--d); font-size: 22px; line-height: 1.2; } .feat .by { font-size: 13.5px; color: var(--sky); font-weight: 600; } .feat p.d { font-size: 14.5px; color: rgba(255,255,255,.78); margin-bottom: 6px; } .feat .btn { align-self: flex-start; margin-top: auto; } :where(.page-library) .list { display: flex; flex-direction: column; gap: 10px; } .item.other { opacity: .72; } .item.other:hover { opacity: 1; } .item .tile { width: 54px; height: 54px; border-radius: 14px; background: var(--sky-l); color: var(--ink); transition: background .25s,color .25s; } .item:hover .tile { background: var(--ink); color: #fff; } .item .txt { flex: 1 1 260px; min-width: 0; } :where(.page-library) .item .by { font-size: 13px; font-weight: 600; color: var(--sky-d); margin: 3px 0 5px; } :where(.page-library) .item .d { font-size: 14.5px; color: var(--muted); } .item .act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lv { padding: 4px 11px; border-radius: 999px; background: var(--wash); color: var(--muted); font-size: 12px; font-weight: 700; box-shadow: var(--ring); } .lv.mine { background: var(--sky-l); color: var(--ink); box-shadow: none; } :where(.page-library) .nm { padding: 4px 11px; border-radius: 999px; background: #E8F7EE; color: #1F7A45; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } :where(.page-library) .empty::before { content: ''; display: block; width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 14px; background: var(--sky-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23094570' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/22px no-repeat; } :where(.page-library) .foot2::before { content: ''; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---------------------------------------------------------------- Quizzes ---------------------------------------------------------------- */ :root:where(.page-quiz) { --deep: #062F4D; --ink: #094570; --sky: #85CCFF; --sky-d: #3E97D9; --sky-l: #E3F2FD; --wash: #F4F8FB; --text: #0E2A3D; --muted: #5B6E7F; --line: #E3EAF0; --ok: #1B7F4B; --ok-l: #EAF6EF; --bad: #B42318; --bad-l: #FDECEA; --d: 'Bricolage Grotesque','Inter',sans-serif; --ease: cubic-bezier(.2,.7,.2,1); --ring: 0 0 0 1px var(--line); --shadow: 0 0 0 1px var(--line),0 12px 32px -22px rgba(6,47,77,.25); } :where(.page-quiz) .btn:disabled { opacity: .45; cursor: not-allowed; } :where(.page-quiz) .hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(90% 120% at 100% 0%,rgba(133,204,255,.22),transparent 60%),linear-gradient(150deg,var(--ink),var(--deep)); color: #fff; border-radius: 20px; padding: 34px 38px; box-shadow: 0 24px 44px -30px rgba(6,47,77,.8); animation: up .5s var(--ease) both; } :where(.page-quiz) .hero::before, :where(.page-quiz) .hero::after { content: ''; position: absolute; border-radius: 50%; border: 1.5px dashed rgba(133,204,255,.25); z-index: -1; pointer-events: none; } :where(.page-quiz) .hero::before { width: 300px; height: 300px; inset-inline-end: -90px; top: -130px; } :where(.page-quiz) .hero::after { width: 120px; height: 120px; inset-inline-end: 150px; bottom: -60px; } :where(.page-quiz) .wrap { max-width: 1000px; margin: 0 auto; padding: 28px 24px 40px; } :where(.page-quiz) .nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); flex-wrap: wrap; } :where(.page-quiz) .brand { display: flex; align-items: center; gap: 10px; font-family: var(--d); font-weight: 700; font-size: 18px; color: var(--deep); white-space: nowrap; } :where(.page-quiz) .hero h1 { font-family: var(--d); font-size: clamp(26px,4vw,40px); line-height: 1.1; letter-spacing: -.02em; margin: 8px 0 10px; } :where(.page-quiz) .hero p { color: rgba(255,255,255,.78); max-width: 58ch; font-size: 15px; } :where(.page-quiz) .top > div { max-width: 1000px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } :where(.page-quiz) .btn-line:hover:not(:disabled) { border-color: var(--ink); } :where(.page-quiz) .btn-sm { padding: 9px 16px; font-size: 13.5px; border-radius: 10px; } :where(.page-quiz) [data-next]::after, :where(.page-quiz) .item [data-start]::after { content: '\2192'; transition: transform .2s; } :where(.page-quiz) [data-next]:hover:not(:disabled)::after, :where(.page-quiz) .item [data-start]:hover::after { transform: translateX(3px); } :where(.page-quiz) [data-back]::before { content: '\2190'; } :where(.page-quiz) .err { color: var(--bad); font-size: 13.5px; min-height: 20px; margin: 4px 0 10px; } :where(.page-quiz) .hero small { display: inline-flex; align-items: center; gap: 8px; color: var(--sky); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; } :where(.page-quiz) .msg { color: var(--bad); font-size: 13.5px; min-height: 20px; margin-top: 10px; } :where(.page-quiz) .foot2 { text-align: center; color: var(--muted); font-size: 12.5px; padding: 28px 0 40px; } :where(.page-quiz) .hero small::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--sky); } :where(.page-quiz) .hero p b { color: #fff; background: rgba(133,204,255,.18); padding: 1px 8px; border-radius: 6px; font-weight: 600; } :where(.page-quiz) .grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 18px; } :where(.page-quiz) .item { position: relative; overflow: hidden; background: #fff; border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); animation: up .45s var(--ease) backwards; animation-delay: calc(var(--i,0)*45ms + 80ms); transition: box-shadow .25s,transform .25s; } :where(.page-quiz) .item::before { content: ''; position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: 0; height: 3px; background: linear-gradient(90deg,var(--ink),var(--sky-d)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } :where(.page-quiz) .item:hover { box-shadow: 0 0 0 1.5px var(--ink),0 24px 40px -30px rgba(6,47,77,.5); transform: translateY(-3px); } :where(.page-quiz) .item:hover::before { transform: scaleX(1); } :where(.page-quiz) .pill { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 99px; background: var(--wash); color: var(--ink); display: inline-block; } :where(.page-quiz) .pill.t { background: var(--sky-l); color: var(--ink); } :where(.page-quiz) .pill.ok { background: var(--ok-l); color: var(--ok); } :where(.page-quiz) .pill.ok::before { content: '\2713 '; } :where(.page-quiz) .item h3 { font-family: var(--d); font-size: 20px; line-height: 1.2; color: var(--deep); margin-top: 6px; } :where(.page-quiz) .item p { font-size: 14px; color: var(--muted); flex: 1; } .item .foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; padding-top: 14px; border-top: 1px dashed #D5E1EB; font-size: 13px; font-weight: 600; color: var(--muted); } :where(.page-quiz) .empty { background: #fff; border-radius: 18px; padding: 44px 28px; text-align: center; color: var(--muted); margin-top: 18px; box-shadow: var(--shadow); border: 1.5px dashed #C9D6E1; } :where(.page-quiz) .q { background: #fff; border-radius: 20px; padding: 32px; margin-top: 4px; box-shadow: var(--shadow); animation: up .4s var(--ease) both; } .pmeta { font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .pmeta b { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sky-d); } .pmeta span { font-weight: 600; color: var(--ink); background: var(--sky-l); padding: 3px 10px; border-radius: 999px; font-size: 12.5px; } :where(.page-quiz) .prog { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 14px 0 4px; } :where(.page-quiz) .prog i { display: block; height: 100%; background: linear-gradient(90deg,var(--ink),var(--sky-d)); border-radius: 99px; transition: width .4s var(--ease); } :where(.page-quiz) .q h2 { font-family: var(--d); font-size: clamp(21px,3vw,28px); line-height: 1.25; letter-spacing: -.01em; color: var(--deep); margin: 24px 0 20px; } :where(.page-quiz) .opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; padding: 14px 16px; border-radius: 14px; background: #fff; margin-bottom: 10px; border: 1.5px solid var(--line); transition: background .2s,border-color .2s,box-shadow .2s,transform .15s; } :where(.page-quiz) button.opt:hover { border-color: var(--sky-d); background: var(--wash); } :where(.page-quiz) button.opt:active { transform: scale(.99); } :where(.page-quiz) .opt .k { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--wash); border: 1.5px solid var(--line); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--ink); transition: background .2s,color .2s,border-color .2s; } .opt .tx { font-weight: 500; font-size: 16px; } .opt .tx.ar { font-size: 30px; line-height: 1.2; font-weight: 600; } .opt[aria-checked=true], button.opt[aria-checked=true]:hover { background: var(--sky-l); border-color: var(--ink); box-shadow: 0 0 0 3px rgba(133,204,255,.3); } .opt[aria-checked=true] .k { background: var(--ink); color: #fff; border-color: var(--ink); } .opt.good { background: var(--ok-l); border-color: var(--ok); } .opt.good .k { background: var(--ok); color: #fff; border-color: var(--ok); } .opt.wrong { background: var(--bad-l); border-color: var(--bad); } .opt.wrong .k { background: var(--bad); color: #fff; border-color: var(--bad); } .opt.static { cursor: default; } .opt.good::after, .opt.wrong::after { margin-inline-start: auto; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #fff; } .opt.good::after { content: 'Correct'; color: var(--ok); } .opt.wrong::after { content: 'Your answer'; color: var(--bad); } :where(.page-quiz) .score { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; background: linear-gradient(120deg,var(--sky-l) 0%,#fff 70%); border-radius: 20px; padding: 32px; box-shadow: var(--shadow); animation: up .45s var(--ease) both; } :where(.page-quiz) .score::after { content: ''; position: absolute; inset-inline-end: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 1.5px dashed rgba(9,69,112,.14); pointer-events: none; } :where(.page-quiz) .ring { width: 136px; height: 136px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c,var(--ink)) calc(var(--p)*1%),#DCE7F0 0); animation: pop-ring .6s var(--ease) both; } :where(.page-quiz) .ring div { width: 106px; height: 106px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-family: var(--d); font-size: 30px; font-weight: 700; color: var(--deep); box-shadow: inset 0 0 0 1px var(--line); } :where(.page-quiz) .score h2 { font-family: var(--d); font-size: 28px; letter-spacing: -.02em; color: var(--deep); line-height: 1.15; margin-bottom: 6px; } :where(.page-quiz) .score p { color: var(--muted); font-size: 15px; margin-bottom: 16px; max-width: 52ch; } :where(.page-quiz) .score .btn { margin-block: 0 6px; margin-inline: 0 6px; } .rev { background: #fff; border-radius: 18px; padding: 22px 24px; margin-top: 12px; box-shadow: var(--shadow); animation: up .45s var(--ease) backwards; } .rev:nth-of-type(2) { animation-delay: .08s; } .rev:nth-of-type(3) { animation-delay: .14s; } .rev:nth-of-type(4) { animation-delay: .2s; } .rev h3 { font-family: var(--d); font-size: 18px; line-height: 1.3; color: var(--deep); margin-bottom: 14px; font-weight: 700; } :where(.page-quiz) .ex { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); margin-top: 8px; background: var(--wash); border-inline-start: 3px solid var(--sky-d); border-start-start-radius: 4px; border-start-end-radius: 12px; border-end-end-radius: 12px; border-end-start-radius: 4px; padding: 11px 14px; } /* ---------------------------------------------------------------- TBC student dashboard ---------------------------------------------------------------- */ .pils { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .pil { background: var(--wash); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 2px; } :where(.page-tbc-dashboard) .ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; } :where(.page-tbc-dashboard) .ph b { font-family: var(--d); font-size: 17px; line-height: 1.2; color: var(--deep); } :where(.page-tbc-dashboard) .rt { flex: none; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--muted); } .rt.r3, .rt.r4, .rt.r5 { background: var(--ink); color: #fff; } :where(.page-tbc-dashboard) .rt.r1, :where(.page-tbc-dashboard) .rt.r2 { background: var(--sky); color: var(--deep); } .meter { display: flex; gap: 5px; margin-bottom: 8px; } .meter i { flex: 1; height: 9px; border-radius: 99px; background: #fff; } .meter i.on { background: var(--ink); } .pil .sub { margin-top: 2px; } :where(.page-tbc-dashboard) blockquote { margin-top: 12px; background: #fff; border-radius: 14px; padding: 12px 14px; font-size: 14px; color: var(--text); } :where(.page-tbc-dashboard) blockquote cite { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 6px; } .trend { display: flex; align-items: flex-end; gap: 4px; height: 30px; margin-top: 12px; } .trend span { flex: 1; background: var(--sky); border-radius: 4px 4px 0 0; min-height: 4px; } .trend span:last-child { background: var(--ink); } :where(.page-tbc-dashboard) .att { display: flex; flex-wrap: wrap; gap: 8px; } :where(.page-tbc-dashboard) .att span { display: block; font-size: 12.5px; color: var(--muted); padding: 9px 14px; border-radius: 16px; background: var(--wash); } :where(.page-tbc-dashboard) .att b { display: block; font-size: 13.5px; color: var(--deep); } .att .a-Absent { background: #FEE4E2; } .att .a-Absent b { color: #B42318; } .att .a-Present { background: var(--sky); } .att .a-Present b { color: var(--deep); } /* ---------------------------------------------------------------- Teacher ---------------------------------------------------------------- */ :where(.page-teacher) .pick { display: grid; gap: 6px; margin: 10px 0 14px; max-height: 240px; overflow: auto; } /* ---------------------------------------------------------------- Daily revision ---------------------------------------------------------------- */ :root:where(.page-tracker) { --deep: #062F4D; --ink: #094570; --sky: #85CCFF; --sky-d: #3E97D9; --wash: #F1F7FC; --text: #0E2A3D; --muted: #55697B; --line: rgba(9,69,112,.12); --ok: #1B7F4B; --d: 'Bricolage Grotesque','Inter',sans-serif; } :where(.page-tracker) .card { background: #fff; border-radius: 28px; padding: 26px 28px; margin-top: 16px; } :where(.page-tracker) .hero { background: var(--ink); color: #fff; border-radius: 32px; padding: 34px 40px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; } :where(.page-tracker) .wrap { max-width: 900px; margin: 0 auto; padding: 24px; } :where(.page-tracker) .btn-ink:hover { background: var(--deep); } :where(.page-tracker) .btn-line { border: 1px solid var(--ink); color: var(--ink); } :where(.page-tracker) .btn-line:hover { background: var(--ink); color: #fff; } :where(.page-tracker) .brand { display: flex; align-items: center; gap: 10px; font-family: var(--d); font-weight: 700; font-size: 18px; color: var(--ink); } :where(.page-tracker) .hero h1 { font-family: var(--d); font-size: clamp(26px,4vw,38px); line-height: 1.1; letter-spacing: -.02em; margin: 4px 0 8px; } :where(.page-tracker) .hero p { color: rgba(255,255,255,.8); font-size: 15px; } :where(.page-tracker) .btn-sm { padding: 9px 16px; font-size: 13.5px; } :where(.page-tracker) .top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } :where(.page-tracker) .top > div { max-width: 900px; margin: 0 auto; padding: 11px 24px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } :where(.page-tracker) .top nav { display: flex; gap: 8px; } :where(.page-tracker) .login { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 24px; } :where(.page-tracker) .lbox { width: 100%; max-width: 440px; background: #fff; border-radius: 32px; padding: 40px; box-shadow: 0 30px 60px -40px rgba(6,47,77,.5); } :where(.page-tracker) .lbox h1 { font-family: var(--d); font-size: 32px; line-height: 1.08; color: var(--deep); margin-bottom: 8px; } :where(.page-tracker) .lbox p { color: var(--muted); margin-bottom: 22px; font-size: 15px; } :where(.page-tracker) .f { margin-bottom: 14px; } :where(.page-tracker) .f label { display: block; font-size: 13.5px; font-weight: 600; color: var(--deep); margin-bottom: 6px; } :where(.page-tracker) input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1.5px solid transparent; background: var(--wash); font-size: 15px; color: var(--text); } :where(.page-tracker) input:focus { outline: none; border-color: var(--ink); background: #fff; } :where(.page-tracker) .demo { background: var(--wash); border-radius: 14px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; } :where(.page-tracker) .hero small { color: var(--sky); font-weight: 600; font-size: 14px; } :where(.page-tracker) .streak { text-align: center; min-width: 120px; } :where(.page-tracker) .streak svg { display: block; margin: 0 auto 2px; transform-origin: 50% 90%; } :where(.page-tracker) .streak.on svg { animation: flick 2.4s ease-in-out infinite; } :where(.page-tracker) .streak b { display: block; font-family: var(--d); font-size: 54px; line-height: 1; } :where(.page-tracker) .streak span { font-size: 13px; color: var(--sky); font-weight: 600; } :where(.page-tracker) .card h2 { font-family: var(--d); font-size: 21px; color: var(--deep); margin-bottom: 4px; } .card .sub { font-size: 14px; color: var(--muted); margin-bottom: 16px; } .task { display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; padding: 15px 16px; border-radius: 18px; background: var(--wash); margin-bottom: 10px; border: 1.5px solid transparent; transition: background .2s,border-color .2s; } .task:hover { border-color: var(--sky-d); } .task .box { flex: none; width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--ink); display: grid; place-items: center; background: #fff; transition: background .2s,border-color .2s; } .task .box svg { opacity: 0; transform: scale(.4); transition: opacity .2s,transform .25s; } .task .t { font-weight: 600; color: var(--deep); } .task[aria-checked=true] { background: #EAF6EF; } .task[aria-checked=true] .box { background: var(--ok); border-color: var(--ok); } .task[aria-checked=true] .box svg { opacity: 1; transform: scale(1); } .task[aria-checked=true] .t { color: var(--ok); } .task:disabled { opacity: .6; cursor: wait; } :where(.page-tracker) .done { background: #EAF6EF; color: var(--ok); border-radius: 16px; padding: 12px 16px; font-weight: 600; font-size: 14.5px; margin-top: 4px; } :where(.page-tracker) .msg { color: #B42318; font-size: 13.5px; min-height: 20px; margin-top: 8px; } :where(.page-tracker) .strip { display: grid; grid-template-columns: repeat(14,1fr); gap: 6px; } :where(.page-tracker) .strip div { text-align: center; font-size: 11px; color: var(--muted); } :where(.page-tracker) .strip i { display: grid; place-items: center; margin: 0 auto 5px; width: 100%; max-width: 34px; aspect-ratio: 1; border-radius: 50%; background: var(--wash); border: 1.5px solid var(--line); } :where(.page-tracker) .strip .y i { background: var(--ink); border-color: var(--ink); } :where(.page-tracker) .strip .t { color: var(--deep); font-weight: 700; } :where(.page-tracker) .strip .t i { border-color: var(--sky-d); } :where(.page-tracker) .stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 18px; } :where(.page-tracker) .stats div { background: var(--wash); border-radius: 18px; padding: 14px; text-align: center; } :where(.page-tracker) .stats b { display: block; font-family: var(--d); font-size: 28px; color: var(--ink); line-height: 1.1; } :where(.page-tracker) .stats span { font-size: 12.5px; color: var(--muted); } :where(.page-tracker) .foot2 { text-align: center; color: var(--muted); font-size: 12.5px; padding: 26px 0 40px; } /* ---------------------------------------------------------------- 404 page ---------------------------------------------------------------- */ :root:where(.page-404) { --deep: #062F4D; --ink: #094570; --sky: #85CCFF; --display: 'Bricolage Grotesque', 'Inter', sans-serif; } :where(.page-404) body { font-family: 'Inter', -apple-system, sans-serif; min-height: 100vh; padding: 16px; background: #fff; -webkit-font-smoothing: antialiased; line-height: 1.6; } :where(.page-404) .frame { max-width: 1400px; min-height: calc(100vh - 32px); margin: 0 auto; border-radius: 40px; background: var(--ink); color: #fff; display: grid; grid-template-rows: auto 1fr; padding: 28px 40px 48px; position: relative; overflow: hidden; } :where(.page-404) .frame::before { content: ''; position: absolute; inset-inline-end: -120px; top: -120px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(133,204,255,.3), transparent 68%); } :where(.page-404) h1 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4.4vw, 48px); line-height: 1.1; letter-spacing: -.02em; margin-top: 10px; } :where(.page-404) p { color: rgba(255,255,255,.8); max-width: 44ch; margin: 8px auto 28px; font-size: 17px; } :where(.page-404) .btn { display: inline-flex; padding: 15px 28px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: background .2s, color .2s; } :where(.page-404) .brand { position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 18px; } :where(.page-404) .brand path { fill: var(--sky); } :where(.page-404) .body { position: relative; display: grid; place-content: center; text-align: center; gap: 8px; padding: 40px 0; animation: rise-404 .8s cubic-bezier(.2,.7,.2,1) both; } :where(.page-404) .code { font-family: var(--display); font-weight: 700; font-size: clamp(110px, 24vw, 260px); line-height: .9; letter-spacing: -.05em; color: var(--sky); } .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } :where(.page-404) .btn-ghost { border: 1px solid rgba(255,255,255,.5); } :where(.page-404) .btn-ghost:hover { background: rgba(255,255,255,.14); } :where(.page-404) a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* ---------------------------------------------------------------- Payment received ---------------------------------------------------------------- */ :root:where(.page-payment-success) { --deep: #062F4D; --ink: #094570; --sky: #85CCFF; --wash: #F1F7FC; --muted: #55697B; --display: 'Bricolage Grotesque', 'Inter', sans-serif; } :where(.page-payment-success) body { font-family: 'Inter', -apple-system, sans-serif; min-height: 100vh; display: grid; place-items: center; padding: 16px; background: #fff; -webkit-font-smoothing: antialiased; line-height: 1.6; } :where(.page-payment-success) .frame { width: 100%; max-width: 1400px; min-height: calc(100vh - 32px); border-radius: 40px; background: var(--ink); color: #fff; display: grid; place-items: center; text-align: center; padding: 48px 24px; position: relative; overflow: hidden; } :where(.page-payment-success) .frame::before { content: ''; position: absolute; top: -200px; left: 50%; width: 700px; height: 700px; margin-left: -350px; border-radius: 50%; background: radial-gradient(circle, rgba(133,204,255,.28), transparent 68%); } :where(.page-payment-success) .card { position: relative; max-width: 520px; animation: rise-pay .8s cubic-bezier(.2,.7,.2,1) both; } :where(.page-payment-success) .icon { width: 84px; height: 84px; border-radius: 50%; background: var(--sky); color: var(--deep); display: grid; place-items: center; margin: 0 auto 28px; animation: pop-pay .7s .15s cubic-bezier(.2,.7,.2,1) both; } :where(.page-payment-success) h1 { font-family: var(--display); font-weight: 700; font-size: clamp(36px, 5.4vw, 60px); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 16px; } :where(.page-payment-success) p { font-size: 17px; color: rgba(255,255,255,.8); margin-bottom: 32px; } :where(.page-payment-success) a.btn { display: inline-flex; padding: 16px 30px; background: var(--sky); color: var(--deep); font-weight: 600; font-size: 15px; border-radius: 999px; text-decoration: none; transition: background .2s; } :where(.page-payment-success) a.btn:hover { background: #fff; } :where(.page-payment-success) a.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* ------------------------------------------------------------------ Closed Madrasah classes (madrasah, admissions, enroll) ------------------------------------------------------------------ */ .btn.btn-locked, .btn.btn-locked:hover { background: var(--wash); color: var(--muted); border: 1.5px dashed #C9D8E4; cursor: not-allowed; transform: none; box-shadow: none; } .btn.btn-locked svg { color: #B7791F; } .plans-note { display: inline-block; margin-top: 14px !important; padding: 8px 14px; border-radius: 999px; background: #FFF8EB; color: #6B4A12 !important; font-size: 14px !important; font-weight: 600; } .plan-closed-note { margin: 0 0 4px; padding: 10px 14px; border-inline-start: 3px solid #E0A23B; border-start-start-radius: 0; border-start-end-radius: 12px; border-end-end-radius: 12px; border-end-start-radius: 0; background: #FFF8EB; color: #6B4A12; font-size: 13.5px; } .plan-opt.closed { background: var(--wash); border-style: dashed; opacity: .7; } .plan-opt.closed:hover { border-color: var(--line); box-shadow: none; } .plan-opt.closed .plan-opt-head { cursor: not-allowed; } .plan-opt.closed .plan-opt-radio { border-color: #C9D8E4; background: #fff; } .plan-opt-shut { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1.5px dashed #C9D8E4; color: var(--muted); } /* ===================================================================== Screens 1120px wide and narrower ===================================================================== */ @media (max-width: 1120px) { /* -------------------------------------------------------------- Madrasah -------------------------------------------------------------- */ .tog { display: block; } :where(.page-madrasah) .links { position: absolute; top: 76px; inset-inline-start: 0; inset-inline-end: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 6px 24px 22px; box-shadow: 0 20px 30px -24px rgba(6,47,77,.35); display: none; max-height: calc(100vh - 76px); overflow-y: auto; } :where(.page-madrasah) .links.open { display: flex; } :where(.page-madrasah) .links a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); } :where(.page-madrasah) .links .btn { margin-top: 16px; } :where(.page-madrasah) .dd-btn { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--line); justify-content: space-between; } :where(.page-madrasah) .dd-menu, :where(.page-madrasah) .dd-r .dd-menu { position: static; opacity: 1; visibility: visible; transform: none; padding-block: 4px 4px; padding-inline: 12px 0; display: none; min-width: 0; } :where(.page-madrasah) .dd-menu::before { display: none; } :where(.page-madrasah) .dd.open .dd-menu { display: block; } :where(.page-madrasah) .dd:hover .dd-menu { display: none; } :where(.page-madrasah) .dd.open:hover .dd-menu { display: block; } } /* ===================================================================== Screens 1024px wide and narrower ===================================================================== */ @media (max-width: 1024px) { /* -------------------------------------------------------------- Public site -------------------------------------------------------------- */ :where(.site:not(.page-skills-school)) .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } :where(.site:not(.page-skills-school)) .fact:nth-child(3) { border-inline-start: 0; } :where(.site:not(.page-skills-school)) .fact:nth-child(n + 3) { border-top: 1px solid var(--line); } :where(.site:not(.page-skills-school)) .facts .btn { grid-column: 1 / -1; margin: 0 22px 22px; } /* -------------------------------------------------------------- Academy -------------------------------------------------------------- */ .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* -------------------------------------------------------------- Home -------------------------------------------------------------- */ .quotes { grid-template-columns: 1fr 1fr; } /* -------------------------------------------------------------- Madrasah -------------------------------------------------------------- */ :where(.page-madrasah) .how { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* -------------------------------------------------------------- Teenagers Building Circle -------------------------------------------------------------- */ :where(.page-teenagers-building-circle) .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ===================================================================== Screens 1000px wide and narrower ===================================================================== */ @media (max-width: 1000px) { /* -------------------------------------------------------------- Staff portals -------------------------------------------------------------- */ :where(.staff) .c, :where(.staff) .c.w8, :where(.staff) .c.w4 { grid-column: span 12; } /* -------------------------------------------------------------- Student dashboards -------------------------------------------------------------- */ :where(.student) .c, :where(.student) .c.w6, :where(.student) .c.w8 { grid-column: span 6; } /* -------------------------------------------------------------- About -------------------------------------------------------------- */ .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } :where(.page-about) .num:nth-child(3) { border-inline-start: 0; } :where(.page-about) .num:nth-child(n + 3) { border-top: 1px solid var(--line); } /* -------------------------------------------------------------- Academy student dashboard -------------------------------------------------------------- */ :where(.page-academy-dashboard) .stats { grid-template-columns: repeat(2,1fr); } /* -------------------------------------------------------------- TBC student dashboard -------------------------------------------------------------- */ .pils { grid-template-columns: repeat(2,1fr); } } /* ===================================================================== Screens 980px wide and narrower ===================================================================== */ @media (max-width: 980px) { /* -------------------------------------------------------------- Skills School -------------------------------------------------------------- */ .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } :where(.page-skills-school) .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } :where(.page-skills-school) .fact:nth-child(3) { border-inline-start: 0; } :where(.page-skills-school) .fact:nth-child(n + 3) { border-top: 1px solid var(--line); } } /* ===================================================================== Screens 960px wide and narrower ===================================================================== */ @media (max-width: 960px) { /* -------------------------------------------------------------- Public site -------------------------------------------------------------- */ .nav-toggle { display: block; } .nav-links { position: absolute; top: 76px; inset-inline-start: 0; inset-inline-end: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 6px 24px 22px; box-shadow: 0 20px 30px -24px rgba(6,47,77,.35); display: none; max-height: calc(100vh - 76px); overflow-y: auto; } .nav-links.open { display: flex; } .nav-links a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); } .nav-links .btn { margin-top: 16px; } :where(.site:not(.page-madrasah)) .dd-btn { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--line); justify-content: space-between; } :where(.site:not(.page-madrasah, .page-teenagers-building-circle)) .dd-menu { position: static; opacity: 1; visibility: visible; transform: none; padding-block: 4px 4px; padding-inline: 12px 0; display: none; min-width: 0; } :where(.site:not(.page-madrasah)) .dd-menu::before { display: none; } :where(.page-teenagers-building-circle) .dd-menu, :where(.page-teenagers-building-circle) .dd-r .dd-menu { position: static; opacity: 1; visibility: visible; transform: none; padding-block: 4px 4px; padding-inline: 12px 0; display: none; min-width: 0; } :where(.site:not(.page-madrasah)) .dd.open .dd-menu { display: block; } :where(.site:not(.page-madrasah)) .dd:hover .dd-menu { display: none; } :where(.site:not(.page-madrasah)) .dd.open:hover .dd-menu { display: block; } /* -------------------------------------------------------------- Contact -------------------------------------------------------------- */ .line-grid, .more-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } .route-box { grid-template-columns: 1fr; } /* -------------------------------------------------------------- Exam Calendars -------------------------------------------------------------- */ .cal-layout { grid-template-columns: minmax(0, 1fr); } .cal-card { max-width: 520px; width: 100%; margin: 0 auto; } :where(.page-exam-calendars) .side { position: static; } /* -------------------------------------------------------------- Policies -------------------------------------------------------------- */ .hl-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline-start: auto; margin-inline-end: auto; } .doc-grid { grid-template-columns: 1fr; gap: 20px; } .toc { position: sticky; top: 66px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; padding: 8px; border-radius: 14px; background: rgba(244,248,251,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); scrollbar-width: none; } .toc::-webkit-scrollbar { display: none; } .toc-h { display: none; } .toc a { flex: none; padding: 8px 12px; } .toc a::before { display: none; } .toc a.toc-q { margin: 0; padding-top: 8px; border-top: 0; border-radius: 10px; } .doc section { scroll-margin-top: 140px; } /* -------------------------------------------------------------- Success Stories -------------------------------------------------------------- */ .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(3) { border-inline-start: 0; } .stat:nth-child(n + 3) { border-top: 1px solid var(--line); } .voice-row { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } } /* ===================================================================== Screens 900px wide and narrower ===================================================================== */ @media (max-width: 900px) { /* -------------------------------------------------------------- Admissions -------------------------------------------------------------- */ :where(.page-admissions) .req-grid, :where(.page-admissions) .fee-cols, :where(.page-admissions) .two { grid-template-columns: 1fr; } /* -------------------------------------------------------------- Enroll -------------------------------------------------------------- */ :where(.page-enroll) .split { flex-direction: column; padding: 12px; } :where(.page-enroll) .hero { flex: none; position: relative; top: 0; height: auto; min-height: 0; padding: 28px 24px; border-radius: 24px; gap: 32px; } .hero-roadmap, .hero-help { display: none; } .hero-mid h1 { max-width: none; } .hero-mark { width: 170px; bottom: -20px; inset-inline-end: -30px; } /* -------------------------------------------------------------- FAQ -------------------------------------------------------------- */ .faq-grid { grid-template-columns: 1fr; } :where(.page-faq) .side { position: static; grid-template-columns: 1fr 1fr; } /* -------------------------------------------------------------- Madrasah -------------------------------------------------------------- */ :where(.page-madrasah) .hero-grid { grid-template-columns: 1fr; } .hv { max-width: 320px; } :where(.page-madrasah) .ex { grid-template-columns: 1fr; } .lad { position: static; display: flex; gap: 8px; overflow-x: auto; padding: 10px; scrollbar-width: thin; } .lad::before { display: none; } .lad li { flex: 0 0 auto; } .lad button { grid-template-columns: 30px auto; padding-block: 6px 6px; padding-inline: 6px 14px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; } .lad span { display: none; } .lad i { width: 28px; height: 28px; } :where(.page-madrasah) .pg.on { grid-template-columns: 1fr; } :where(.page-madrasah) .year { grid-template-columns: 1fr; } :where(.page-madrasah) .stu { grid-template-columns: 1fr; } /* -------------------------------------------------------------- Mission & Vision -------------------------------------------------------------- */ .hero-crest { display: none; } /* -------------------------------------------------------------- Programmes -------------------------------------------------------------- */ .dcard { position: relative; top: auto; grid-template-columns: 1fr; gap: 22px; } .dart { order: -1; min-height: 190px; } .dart .big { width: 84px; height: 84px; border-radius: 24px; } .dart .big svg { width: 40px; height: 40px; } } /* ===================================================================== Screens 860px wide and narrower ===================================================================== */ @media (max-width: 860px) { /* -------------------------------------------------------------- Public site -------------------------------------------------------------- */ :where(.site:not(.page-madrasah)) .hero-grid { grid-template-columns: 1fr; } /* -------------------------------------------------------------- About -------------------------------------------------------------- */ .story-grid { grid-template-columns: 1fr; } .belief-grid { grid-template-columns: 1fr; } /* -------------------------------------------------------------- Academy -------------------------------------------------------------- */ :where(.page-academy) .hero-art { max-width: 560px; } :where(.page-academy) .tracks { grid-template-columns: 1fr; } /* -------------------------------------------------------------- Home -------------------------------------------------------------- */ .progs { grid-template-columns: 1fr; } /* -------------------------------------------------------------- Teenagers Building Circle -------------------------------------------------------------- */ .quad { max-width: 360px; } .detail-grid { grid-template-columns: 1fr; } :where(.page-teenagers-building-circle) .plan { position: static; } } /* ===================================================================== Screens 800px wide and narrower ===================================================================== */ @media (max-width: 800px) { /* -------------------------------------------------------------- Mission & Vision -------------------------------------------------------------- */ .m-grid { grid-template-columns: 1fr; } } /* ===================================================================== Screens 760px wide and narrower ===================================================================== */ @media (max-width: 760px) { /* -------------------------------------------------------------- About -------------------------------------------------------------- */ .name-box { grid-template-columns: 1fr; justify-items: center; text-align: center; } .name-box p { margin: 0 auto; } /* -------------------------------------------------------------- Success Stories -------------------------------------------------------------- */ .spot-box { grid-template-columns: 1fr; justify-items: center; text-align: center; } .spot-box p { margin-inline-start: auto; margin-inline-end: auto; } /* -------------------------------------------------------------- Library -------------------------------------------------------------- */ .rail { max-width: none; flex-basis: 100%; position: static; } } /* ===================================================================== Screens 700px wide and narrower ===================================================================== */ @media (max-width: 700px) { /* -------------------------------------------------------------- Staff portals -------------------------------------------------------------- */ :where(.staff) .greet { padding: 24px 22px; } :where(.staff) .c { padding: 22px; } /* -------------------------------------------------------------- Student dashboards -------------------------------------------------------------- */ :where(.student) .c, :where(.student) .c.w6, :where(.student) .c.w8, :where(.student) .c.w12 { grid-column: span 12; } :where(.student) .greet { padding: 28px 24px; } :where(.app) .tools { grid-template-columns: 1fr; } /* -------------------------------------------------------------- Administrators -------------------------------------------------------------- */ :where(.page-administrators) .founder { grid-template-columns: 1fr; justify-items: start; } /* -------------------------------------------------------------- Quizzes -------------------------------------------------------------- */ :where(.page-quiz) .grid { grid-template-columns: 1fr; } } /* ===================================================================== Screens 640px wide and narrower ===================================================================== */ @media (max-width: 640px) { /* -------------------------------------------------------------- Staff portals -------------------------------------------------------------- */ .row2, .row3 { grid-template-columns: 1fr; } /* -------------------------------------------------------------- Skills School -------------------------------------------------------------- */ .course-grid { grid-template-columns: 1fr; } /* -------------------------------------------------------------- Daily revision -------------------------------------------------------------- */ :where(.page-tracker) .hero { grid-template-columns: 1fr; padding: 28px 24px; } :where(.page-tracker) .streak { text-align: start; display: flex; align-items: center; gap: 14px; } :where(.page-tracker) .streak svg { margin: 0; } :where(.page-tracker) .streak b { font-size: 40px; } } /* ===================================================================== Screens 600px wide and narrower ===================================================================== */ @media (max-width: 600px) { /* -------------------------------------------------------------- Public site -------------------------------------------------------------- */ :where(.site:not(.page-enroll)) body { font-size: 15px; } :where(.site:not(.page-enroll)) .wrap { padding: 0 18px; } :where(.site:not(.page-enroll)) .btn { padding: 13px 20px; font-size: 14.5px; } .nav-pill { height: 66px; padding: 0 18px; } :where(.site) .brand { font-size: 17px; } :where(.site) .brand svg { width: 21px; height: 26px; } .nav-links { top: 66px; padding: 6px 18px 20px; } :where(.page-about, .page-mission) .hero { padding: 48px 0 40px; } :where(.page-academy, .page-index, .page-madrasah, .page-teenagers-building-circle) .hero { padding-top: 40px; } :where(.page-administrators, .page-contact, .page-policies, .page-skills-school) .hero { padding: 48px 0 44px; } :where(.page-exam-calendars, .page-faq, .page-programmes) .hero { padding: 48px 0 32px; } :where(.page-about, .page-academy, .page-admissions, .page-exam-calendars, .page-faq, .page-success-stories, .page-teenagers-building-circle) .hero h1 { font-size: 34px; } :where(.page-administrators, .page-contact, .page-mission, .page-policies, .page-programmes, .page-skills-school) .hero h1 { font-size: 32px; } :where(.page-about, .page-administrators, .page-admissions, .page-contact, .page-exam-calendars, .page-faq, .page-mission, .page-policies, .page-programmes, .page-skills-school, .page-success-stories) .hero p { font-size: 16px; } :where(.site:not(.page-academy, .page-index, .page-teenagers-building-circle)) .hero-actions { margin-top: 24px; gap: 10px; } :where(.site:not(.page-about)) .hero-actions .btn { flex: 1 1 auto; } :where(.page-about, .page-admissions, .page-contact, .page-mission, .page-policies, .page-skills-school) .sec { padding-top: 64px; } :where(.page-academy, .page-administrators, .page-index, .page-madrasah, .page-programmes, .page-success-stories, .page-teenagers-building-circle) .sec { padding-top: 72px; } :where(.page-about, .page-admissions, .page-contact, .page-mission, .page-policies, .page-programmes, .page-skills-school) .head { margin-bottom: 28px; } :where(.page-academy, .page-administrators, .page-index, .page-madrasah, .page-success-stories, .page-teenagers-building-circle) .head { margin-bottom: 32px; } :where(.site:not(.page-enroll, .page-exam-calendars, .page-faq)) .head p { font-size: 15.5px; } :where(.page-about, .page-admissions) .steps::before { inset-inline-start: 21px; } .step-i { grid-template-columns: 44px 1fr; gap: 14px; } .step-i::before { width: 44px; height: 44px; font-size: 16px; } .step-i div { padding: 16px 18px; } .step-i h3 { font-size: 17px; } .step-i p { font-size: 14.5px; } :where(.site:not(.page-skills-school)) .cta-box { padding: 44px 20px; } :where(.site:not(.page-administrators, .page-index, .page-madrasah, .page-skills-school)) .cta-box h2 { font-size: 27px; } :where(.page-administrators, .page-madrasah, .page-skills-school) .cta-box h2 { font-size: 26px; } .cta-box p { font-size: 15px; } footer.site { margin-top: 72px; padding: 48px 0 90px; } .f-top { gap: 28px; margin-bottom: 28px; } .f-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; } .f-col:last-child { grid-column: 1 / -1; } :where(.site:not(.page-enroll)) .home-fab { inset-inline-start: 12px; bottom: 12px; padding-block: 10px 10px; padding-inline: 12px 14px; font-size: 13px; } .wa-widget { inset-inline-end: 12px; bottom: 12px; } .wa-fab span { display: none; } .wa-fab { padding: 12px; } :where(.site:not(.page-about, .page-administrators)) .hero p.lead { font-size: 16px; margin-bottom: 24px; } :where(.site:not(.page-skills-school)) .facts { grid-template-columns: 1fr; } :where(.site:not(.page-skills-school)) .fact { padding: 18px; } :where(.site:not(.page-skills-school)) .fact + .fact { border-inline-start: 0; border-top: 1px solid var(--line); } :where(.site:not(.page-skills-school)) .facts .btn { margin: 4px 18px 18px; } :where(.site:not(.page-about, .page-enroll, .page-exam-calendars, .page-faq)) .head h2 { font-size: 28px; } :where(.site) td, :where(.site) th { padding: 14px 16px; } .faq summary { padding: 16px 18px; font-size: 15.5px; } .faq details p { padding: 0 18px 18px; font-size: 14.5px; } /* -------------------------------------------------------------- Portals (dashboards, staff tools, library, quizzes) -------------------------------------------------------------- */ :where(.app:not(.page-library, .page-quiz, .page-tracker)) body { line-height: 1.5; } :where(.page-library, .page-quiz) .brand { font-size: 15px; gap: 7px; } :where(.page-library, .page-quiz) .login { padding: 20px 14px; min-height: calc(100vh - 61px); } :where(.page-library, .page-quiz) .lbox { padding: 28px 20px; } :where(.page-admin, .page-library, .page-quiz, .page-teacher) .top > div { padding: 0 12px; height: 60px; gap: 8px; } :where(.page-library, .page-quiz) .top nav { gap: 6px; } :where(.app:not(.page-academy-dashboard, .page-dashboard)) .brand em { display: none; } :where(.app:not(.page-tracker)) .lbox h1 { font-size: 27px; } :where(.page-library, .page-quiz) .lbox > p { margin-bottom: 20px; font-size: 14.5px; } /* -------------------------------------------------------------- Staff portals -------------------------------------------------------------- */ :where(.staff) .wrap { padding: 16px 14px; } :where(.staff) .btn { padding: 11px 18px; font-size: 14px; } :where(.staff:not(.page-admin, .page-teacher)) .brand { font-size: 15px; white-space: nowrap; min-width: 0; } :where(.page-admin, .page-teacher) .brand { font-size: 15.5px; gap: 8px; white-space: nowrap; min-width: 0; } :where(.staff) .brand svg { width: 19px; height: 23px; flex: none; } :where(.staff:not(.page-admin, .page-teacher)) .top .btn { padding: 7px 12px; font-size: 12.5px; border-radius: 10px; white-space: nowrap; } :where(.page-admin, .page-teacher) .top .btn { padding: 8px 12px; font-size: 12.5px; border-radius: 10px; white-space: nowrap; line-height: 1.2; } :where(.staff) .login { padding: 20px 14px; min-height: calc(100vh - 61px); } :where(.staff) .lbox { padding: 28px 20px; } :where(.staff:not(.page-admin, .page-teacher)) .top > div { padding: 0 14px; height: 60px; } :where(.staff) .top nav { gap: 6px; flex: none; } :where(.staff) .greet { padding: 22px 20px; gap: 12px; } :where(.staff) .greet h1 { font-size: 25px; margin: 4px 0 12px; } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) .chips span { font-size: 12px; padding: 5px 11px; } :where(.staff) .grid { gap: 12px; } :where(.staff) .c { padding: 20px 16px; } :where(.staff) .c h2 { font-size: 18px; } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) .list li { padding: 10px 12px; } :where(.staff) .foot { padding: 22px 0 30px; } :where(.staff) .lbox > p { margin-bottom: 20px; font-size: 14.5px; } .tabs { flex-wrap: nowrap; overflow-x: auto; width: auto; margin: 14px 0; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs button { padding: 9px 14px; font-size: 13.5px; white-space: nowrap; flex: none; } .alist { max-height: none; gap: 6px; } .arow { padding-block: 10px 10px; padding-inline: 12px 10px; } .segb { width: 100%; } .segb button { flex: 1; padding: 7px 4px; font-size: 12px; } .bar2 > div { min-width: 0; flex: 1 1 140px; } :where(.app:not(.page-academy-dashboard, .page-dashboard, .page-tbc-dashboard)) details.box > summary { padding: 13px 14px; } :where(.staff) .body { padding: 14px 14px 16px; gap: 16px; } .mj { grid-template-columns: 1fr; } .mrow { padding: 12px; } :where(.app:not(.page-academy-dashboard)) .scores div { padding-block: 6px 6px; padding-inline: 12px 6px; } :where(.app:not(.page-academy-dashboard)) .scores input { width: 84px; } .toast { bottom: 14px; padding: 10px 16px; font-size: 13.5px; } .tiles { gap: 8px; } :where(.app:not(.page-library)) .tile { padding: 10px 12px; } :where(.app:not(.page-library)) .tile b { font-size: 21px; } :where(.app:not(.page-teacher)) .pick { max-height: 320px; } :where(.app:not(.page-teacher)) .pick label small { display: none; } /* -------------------------------------------------------------- Student dashboards -------------------------------------------------------------- */ :where(.student) .wrap { padding: 14px; } :where(.student) .brand { font-size: 16px; } :where(.student) .brand svg { width: 19px; height: 23px; } :where(.student) .top div { padding: 9px 14px; } :where(.student) .top .btn { padding: 8px 14px; font-size: 13px; } :where(.student) .btn { padding: 11px 20px; font-size: 14px; } :where(.student) .login { padding: 16px; min-height: calc(100vh - 54px); } :where(.student) .lbox { padding: 26px 20px; border-radius: 24px; } :where(.student) .lbox p { margin-bottom: 18px; font-size: 14.5px; } :where(.student) .greet { padding: 22px 20px; border-radius: 24px; gap: 14px; } :where(.student) .greet h1 { font-size: 25px; margin: 2px 0 10px; } :where(.student) .chips span { font-size: 12px; padding: 6px 12px; } .remind { gap: 6px; margin-top: 12px; } .remind a { padding: 11px 16px; font-size: 14px; border-radius: 16px; } :where(.student) .grid { gap: 12px; margin-top: 12px; } :where(.student) .c { padding: 20px 18px; border-radius: 22px; } :where(.student) .c h2 { font-size: 18px; margin-bottom: 10px; } :where(.app) .big { font-size: 23px; } :where(.student) .sub { font-size: 13.5px; } .sur span { font-size: 12.5px; padding: 7px 12px; } :where(.student) .list li { padding: 10px 14px; font-size: 14px; } :where(.student) table { font-size: 13px; } :where(.student) td { padding: 9px 4px; } .chart { height: 76px; } :where(.student) .path span { font-size: 12.5px; padding: 7px 12px; } :where(.student) .asg summary { padding: 13px 16px; } :where(.student) .asg summary b { font-size: 15px; } .abody { padding: 0 16px 16px; } :where(.student) .tool { padding: 14px 16px; } :where(.student) .tool b { font-size: 16px; } :where(.student) .tool span { font-size: 13px; } :where(.student) .foot { padding: 20px 0 28px; } .gbtn .btn { padding: 10px 16px; } /* -------------------------------------------------------------- About -------------------------------------------------------------- */ :where(.page-about) .hero-actions .btn { flex: 1 1 100%; } :where(.page-about) .head h2, :where(.page-about) .h2 { font-size: 28px; } .statement p { font-size: 23px; } :where(.page-about) .story p { font-size: 15.5px; } :where(.page-about) .chips a { padding: 9px 14px; font-size: 14px; } .belief-grid { gap: 14px; } .belief { padding: 22px 20px; display: grid; grid-template-columns: auto 1fr; gap: 0 16px; } .belief .ic { grid-row: span 2; margin: 0; width: 44px; height: 44px; } .belief h3 { font-size: 18px; margin-bottom: 6px; } .belief p { font-size: 14.5px; } :where(.page-about) .band { margin-top: 64px; padding: 56px 0; } :where(.page-about) .quote { font-size: 20px; } .nums { grid-template-columns: 1fr; } :where(.page-about) .num { padding: 16px 18px; } :where(.page-about) .num + .num { border-inline-start: 0; border-top: 1px solid var(--line); } :where(.page-about) .num b { font-size: 22px; } .name-box { padding: 28px 20px; gap: 24px; } :where(.page-about) .seal { width: 140px; height: 140px; } .seal .crest { width: 50px; } .seal b { font-size: 18px; bottom: 16px; } .name-box h2 { font-size: 24px; } .name-box p { font-size: 15.5px; } /* -------------------------------------------------------------- Academy -------------------------------------------------------------- */ :where(.page-academy) .tracks { gap: 16px; } :where(.page-academy) .track { padding: 24px 20px; } :where(.page-academy) .track h3 { font-size: 21px; } :where(.page-academy) .track p { font-size: 14.5px; } .track-top { flex-direction: column; } :where(.page-academy) .tags { justify-content: flex-start; } .perks { grid-template-columns: 1fr; gap: 14px; } :where(.page-academy) .perk { padding: 22px 20px; display: grid; grid-template-columns: auto 1fr; gap: 0 16px; } :where(.page-academy) .perk .ic { margin: 0; grid-row: span 2; width: 44px; height: 44px; } :where(.page-academy) .perk h3 { font-size: 17px; margin-bottom: 4px; } :where(.page-academy) .perk p { font-size: 14.5px; } .calbar-box { padding: 26px 20px; } .calbar-l { flex-direction: column; gap: 16px; } .calbar-box p { font-size: 14.5px; } /* -------------------------------------------------------------- Administrators -------------------------------------------------------------- */ .avatar-lg { width: 84px; height: 84px; font-size: 28px; } .f-name h2 { font-size: 28px; } .f-lead { font-size: 16px; } .f-stats span { font-size: 12.5px; } :where(.page-administrators) .team { margin-top: 72px; padding: 56px 0; } .roster { gap: 12px; } :where(.page-administrators) .person { padding: 20px 18px; } .pd-body { padding: 18px 18px 22px; } .pd-body p { font-size: 15px; } /* -------------------------------------------------------------- Admissions -------------------------------------------------------------- */ :where(.page-admissions) .hero { padding: 48px 0 36px; } .req-grid { gap: 14px; } :where(.page-admissions) .req { padding: 22px 20px; } .req h3 { font-size: 20px; } :where(.page-admissions) .req > p, :where(.page-admissions) .req li { font-size: 14.5px; } .closed-note { font-size: 13.5px; padding: 10px 14px; } .levels-head { font-size: 23px; margin-top: 48px; } .fee-cols, .fee-col { gap: 14px; } .fee-row { flex-wrap: wrap; padding: 12px 10px; } .fee-right { width: 100%; justify-content: space-between; } .fee-row .amt { text-align: start; font-size: 18px; } .fee-row .amt small { display: inline; margin-inline-start: 4px; } :where(.page-admissions) .two { gap: 14px; } .card-dark, .card-light { padding: 24px 20px; } /* -------------------------------------------------------------- Contact -------------------------------------------------------------- */ :where(.page-contact) .num { font-size: 18px; padding: 11px 12px; } :where(.page-contact) .field { margin-bottom: 12px; } .hero-meta { gap: 8px; margin-top: 22px; } .hero-meta a, .hero-meta span { font-size: 13px; padding: 7px 12px; } .line-grid, .more-grid { gap: 14px; } :where(.page-contact) .line { padding: 22px 20px 20px; gap: 12px; } .l-ico { width: 46px; height: 46px; border-radius: 13px; } .l-ico svg { width: 23px; height: 23px; } :where(.page-contact) .line h2 { font-size: 24px; } :where(.page-contact) .line p { font-size: 14.5px; } .route-box { padding: 24px 16px; gap: 24px; } .route-copy h2 { font-size: 27px; } .route-copy > p { font-size: 15.5px; } .rsteps { margin-top: 18px; } .rsteps li { font-size: 14.5px; } .form-card { padding: 20px 16px; } .field textarea { min-height: 96px; } .mini { padding: 22px 20px; } .mini h3 { font-size: 19px; } .mini p { font-size: 14.5px; } /* -------------------------------------------------------------- Enroll -------------------------------------------------------------- */ :where(.page-enroll) .btn { padding: 14px 18px; font-size: 15px; } :where(.page-enroll) .hero { padding: 22px 20px 24px; border-radius: 20px; gap: 22px; } :where(.page-enroll) .home-fab { inset-inline-end: 12px; bottom: 12px; padding-block: 10px 10px; padding-inline: 12px 14px; font-size: 13px; } :where(.page-enroll) .split { padding: 8px; gap: 8px; min-height: 0; } .hero-top a { font-size: 16.5px; } .hero-top .crest { width: 20px; height: 25px; } .hero-kicker { margin-bottom: 10px; font-size: 11px; } .hero-mid h1 { font-size: 30px; margin-bottom: 10px; } .hero-mid p { font-size: 14.5px; } .form-panel { min-height: 0; } .form-panel-inner { padding: 22px 8px 16px; } .wizard-footer { padding: 14px 8px 74px; } .stepper { margin-bottom: 22px; } :where(.page-enroll) .step h2 { font-size: 26px; } .step > p.step-sub { font-size: 14.5px; margin-bottom: 20px; } :where(.page-enroll) .field { margin-bottom: 14px; } :where(.page-enroll) .field label { font-size: 13px; margin-bottom: 5px; } :where(.page-enroll) .field input, :where(.page-enroll) .field select { padding: 13px 15px; font-size: 15px; } .field-row { gap: 0; } .prog-pills { margin-bottom: 16px; } .prog-pill { padding: 9px 12px; font-size: 13px; } .plan-opt-head { padding: 14px 16px 8px; gap: 12px; } .plan-opt-name { font-size: 15px; } .plan-opt-price { font-size: 16px; } .plan-opt-toggle { padding-block: 0 12px; padding-inline: 50px 16px; } .pay-summary { padding: 12px 16px; margin-bottom: 18px; font-size: 14px; } .pay-summary .row { padding: 6px 0; } .account-row { padding: 12px 14px; font-size: 14px; } .msg-preview { max-height: 150px; padding: 14px 16px; } .confirm-icon { width: 56px; height: 56px; margin-bottom: 16px; } /* -------------------------------------------------------------- Exam Calendars -------------------------------------------------------------- */ :where(.page-exam-calendars) .chip { padding: 9px 14px; font-size: 13.5px; white-space: nowrap; flex: none; } .cal { padding-top: 20px; } .toolbar { gap: 12px; margin-bottom: 22px; } :where(.page-exam-calendars) .filters { display: flex; width: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; } :where(.page-exam-calendars) .filters::-webkit-scrollbar { display: none; } :where(.page-exam-calendars) .legend { font-size: 12.5px; gap: 8px 12px; } .cal-card { padding: 16px 14px 14px; } :where(.page-exam-calendars) .dow, :where(.page-exam-calendars) .days { gap: 4px; } :where(.page-exam-calendars) .day { font-size: 12.5px; } .cal-layout { margin-bottom: 48px; } .sel-panel { padding-block: 20px 20px; padding-inline: 22px 18px; } .sel-panel h3 { font-size: 19px; } .notable { padding: 16px; } .notable button { padding: 11px 13px; } .tba-title { font-size: 26px; } .tba-sub { font-size: 15px; } .tba { grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; } .tba div { padding: 18px; } :where(.page-exam-calendars) .notice { padding: 14px 16px; font-size: 14px; } :where(.page-exam-calendars) .cta { padding-top: 64px; } /* -------------------------------------------------------------- FAQ -------------------------------------------------------------- */ :where(.page-faq) .q { padding: 16px 18px; font-size: 15.5px; gap: 14px; } :where(.page-faq) .ask { padding: 22px 20px; } :where(.page-faq) .search { margin-top: 22px; } :where(.page-faq) .search input { padding-block: 14px 14px; padding-inline: 46px 16px; font-size: 15px; } :where(.page-faq) .faq { padding-top: 20px; } :where(.page-faq) .side { grid-template-columns: 1fr; } :where(.page-faq) .acc { gap: 10px; } :where(.page-faq) .icon { width: 30px; height: 30px; } :where(.page-faq) .a p { padding: 0 18px 18px; font-size: 14.5px; } :where(.page-faq) .ask h2 { font-size: 20px; } :where(.page-faq) .ask p { font-size: 14.5px; } /* -------------------------------------------------------------- Home -------------------------------------------------------------- */ .float .ic { width: 30px; height: 30px; } .float.f1 { inset-inline-start: -8%; } .float.f2 { inset-inline-end: -8%; } .progs { gap: 16px; } .reopen-box { padding: 28px 20px; gap: 22px; } .reopen h2 { font-size: 24px; } .reopen-copy p { font-size: 14.5px; } .cd { gap: 6px; } .cd div { padding: 12px 2px 10px; border-radius: 12px; } .cd b { font-size: 26px; } .cd span { font-size: 10.5px; } .band blockquote { font-size: 21px; } .big294 { font-size: 96px; } .quotes { grid-template-columns: 1fr; gap: 14px; } /* -------------------------------------------------------------- Madrasah -------------------------------------------------------------- */ :where(.page-madrasah) .sub { padding: 10px 12px; } :where(.page-madrasah) .pill { height: 66px; padding: 0 18px; } :where(.page-madrasah) .links { top: 66px; padding: 6px 18px 20px; } :where(.page-madrasah) .hc h1 { font-size: 34px; } :where(.page-madrasah) .hc p { font-size: 16px; margin-bottom: 24px; } .hc .acts .btn { flex: 1 1 auto; } .hv { max-width: 270px; } .bd { padding: 9px 12px; font-size: 12px; } .bd b { font-size: 13.5px; } .bd .ic { width: 30px; height: 30px; } .bd1 { inset-inline-start: -10%; } .bd2 { inset-inline-end: -10%; } .pan { padding: 22px 18px; } .ph h3 { font-size: 26px; } :where(.page-madrasah) .sc { min-width: 0; width: 100%; } :where(.page-madrasah) .sc b { font-size: 32px; } .sg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } :where(.page-madrasah) .sub i { font-size: 18px; } :where(.page-madrasah) .need li, :where(.page-madrasah) .plan li { font-size: 14.5px; } .pan .acts .btn { flex: 1 1 100%; } :where(.page-madrasah) .how { grid-template-columns: 1fr; gap: 14px; } :where(.page-madrasah) .hw { padding: 22px 20px; } .seg-wrap { margin: -8px 0 28px; } .seg button { padding: 10px 22px; } :where(.page-madrasah) .pg, :where(.page-madrasah) .pg.on { gap: 18px; } :where(.page-madrasah) .plan h3 { font-size: 21px; } :where(.page-madrasah) .price b { font-size: 26px; } :where(.page-madrasah) .had { margin-top: 72px; padding: 56px 0; } :where(.page-madrasah) .had p.en { font-size: 19px; } :where(.page-madrasah) .sc2 { padding: 20px; gap: 14px; } :where(.page-madrasah) .sc2 .ic { width: 44px; height: 44px; } :where(.page-madrasah) .sc2 b { font-size: 18px; } :where(.page-madrasah) .sc2 span { font-size: 13.5px; } :where(.page-madrasah) .stu { gap: 14px; } :where(.page-madrasah) footer { margin-top: 72px; padding: 48px 0 90px; } .ft { gap: 28px; margin-bottom: 28px; } .fc { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; } .fc > div:last-child { grid-column: 1 / -1; } :where(.page-madrasah) .home { inset-inline-start: 12px; bottom: 12px; padding-block: 10px 10px; padding-inline: 12px 14px; font-size: 13px; } :where(.page-madrasah) .wa { inset-inline-end: 12px; bottom: 12px; } .wab span { display: none; } .wab { padding: 12px; } /* -------------------------------------------------------------- Mission & Vision -------------------------------------------------------------- */ .vision { padding: 56px 0; } .vision .seal { width: 60px; height: 60px; margin-bottom: 16px; } .vision blockquote { font-size: 25px; } .vision p { font-size: 15.5px; } :where(.page-mission) .pillars { gap: 8px; margin-top: 22px; } :where(.page-mission) .pillars span { font-size: 13px; padding: 7px 12px; } .vision + .sec { padding-top: 64px; } .m-grid { gap: 14px; } .m-card { padding: 24px 20px; } :where(.page-mission) .m-ico { width: 48px; height: 48px; border-radius: 14px; } :where(.page-mission) .m-ico svg { width: 24px; height: 24px; } .m-top { margin-bottom: 16px; } .m-card h3 { font-size: 20px; } .m-card p { font-size: 14.5px; margin-bottom: 14px; } /* -------------------------------------------------------------- Policies -------------------------------------------------------------- */ :where(.page-policies) .hero small { margin-top: 18px; font-size: 12.5px; } .hl-grid { gap: 12px; } .hl { padding: 20px; } .hl-ico { width: 40px; height: 40px; margin-bottom: 6px; } .hl b { font-size: 18px; } .hl span { font-size: 14px; } .doc { padding-top: 40px; } .toc a { font-size: 13px; } .doc section { padding: 22px 18px; margin-bottom: 12px; border-radius: 16px; } .doc h2 { font-size: 23px; margin-bottom: 10px; } .doc h3 { font-size: 16px; margin: 16px 0 4px; } .doc p, .doc li { font-size: 15px; } .steps3 { grid-template-columns: 1fr; } .callout { padding: 14px; } /* -------------------------------------------------------------- Programmes -------------------------------------------------------------- */ :where(.page-programmes) .ask { margin-top: 26px !important; } :where(.page-programmes) .choose { display: grid; grid-template-columns: 1fr; gap: 8px; text-align: start; } :where(.page-programmes) .choose a { padding-block: 10px 10px; padding-inline: 10px 14px; font-size: 14px; } .deck { padding-top: 24px; } .dcard { padding: 20px 18px; gap: 18px; margin-bottom: 16px; } .dart { min-height: 160px; } .dcard h2 { font-size: 28px; } .dlead { font-size: 15px; } .dlist { gap: 8px; } .dlist li { font-size: 14.5px; } .dfoot { padding-top: 16px; } .dprice b { font-size: 26px; } .dbtns { width: 100%; } .dbtns .btn { flex: 1 1 auto; } /* -------------------------------------------------------------- Skills School -------------------------------------------------------------- */ :where(.page-skills-school) .cta-box { padding: 40px 18px; } :where(.page-skills-school) .search { margin-top: 22px; padding-block: 4px 4px; padding-inline: 14px 4px; gap: 8px; } :where(.page-skills-school) .search input { font-size: 14.5px; padding: 10px 0; } :where(.page-skills-school) .fact { padding: 16px 16px; } :where(.page-skills-school) .price b { font-size: 23px; } :where(.page-skills-school) .search .count { padding: 8px 10px; font-size: 12px; } .quick { gap: 6px; } .quick button { font-size: 13px; padding: 6px 12px; } :where(.page-skills-school) .fact b { font-size: 21px; } :where(.page-skills-school) .fact span { font-size: 12.5px; } .course-grid { gap: 14px; } .cart { height: 150px; } .cart .big { width: 72px; height: 72px; border-radius: 22px; } .cart .big svg { width: 34px; height: 34px; } .course-body { padding: 20px 18px 18px; gap: 10px; } :where(.page-skills-school) .course h3 { font-size: 21px; } .course .desc { font-size: 14.5px; } /* -------------------------------------------------------------- Success Stories -------------------------------------------------------------- */ :where(.page-success-stories) .hero { padding: 48px 0 92px; } :where(.page-success-stories) .stats { margin-top: -56px; } .stat { padding: 20px 16px 26px; } .stat::after, .stat i { inset-inline-start: 16px; bottom: 14px; } .stat::after { inset-inline-end: 16px; } .stat i { width: calc((100% - 32px) * var(--fill, .9)); } .stat b { font-size: 36px; } .stat strong { font-size: 14px; margin-top: 8px; } .stat span { font-size: 12.5px; } .spot-box { padding: 28px 20px; gap: 28px; } .badge { width: 150px; height: 150px; } .badge b { font-size: 48px; } .spot-box h2 { font-size: 24px; } .spot-box p { font-size: 15px; } .voice-row { gap: 14px; } :where(.page-success-stories) .voice { padding: 24px 20px; gap: 16px; } .voice blockquote { font-size: 15px; } /* -------------------------------------------------------------- Teenagers Building Circle -------------------------------------------------------------- */ :where(.page-teenagers-building-circle) .plan h3 { font-size: 22px; } .quad { max-width: 300px; gap: 10px; } .quad .q { padding: 14px; } .quad .ic { width: 38px; height: 38px; } .quad b { font-size: 14.5px; } .quad .core { width: 66px; height: 66px; box-shadow: 0 0 0 6px #fff; } .quad .core svg { width: 24px; } :where(.page-teenagers-building-circle) .pillars { grid-template-columns: 1fr; gap: 14px; } :where(.page-teenagers-building-circle) .pillar { padding: 22px 20px; display: grid; grid-template-columns: auto 1fr; gap: 0 16px; } :where(.page-teenagers-building-circle) .pillar .ic { grid-row: span 3; margin: 0; width: 44px; height: 44px; } :where(.page-teenagers-building-circle) .pillar h3 { font-size: 18px; margin: 2px 0 6px; } :where(.page-teenagers-building-circle) .pillar p { font-size: 14.5px; } .detail-copy h2 { font-size: 28px; } .detail-copy > p { font-size: 15.5px; margin-bottom: 20px; } :where(.page-teenagers-building-circle) .steps li { padding: 14px 2px; font-size: 14.5px; gap: 12px; } :where(.page-teenagers-building-circle) .steps li::before { width: 32px; height: 32px; font-size: 12px; } :where(.page-teenagers-building-circle) .plan { padding: 24px 20px; } :where(.page-teenagers-building-circle) .plan .price { font-size: 38px; } /* -------------------------------------------------------------- Academy student dashboard -------------------------------------------------------------- */ :where(.page-academy-dashboard) .stats { gap: 8px; } :where(.page-academy-dashboard) .stats > div { padding: 12px 14px; } .stats .big { font-size: 23px; } .mchart { height: 130px; gap: 5px; } .mchart div span { font-size: 9.5px; } :where(.page-academy-dashboard) .sit summary { padding: 12px 14px; } :where(.page-academy-dashboard) .subj { padding: 0 14px 14px; } :where(.page-academy-dashboard) .r2 { gap: 8px; } /* -------------------------------------------------------------- Library -------------------------------------------------------------- */ :where(.page-library) .wrap { padding: 26px 14px 28px; } :where(.page-library) .brand svg { width: 19px; height: 23px; } :where(.page-library) .head { margin-bottom: 12px; } :where(.page-library) .top .btn { min-height: 36px; padding: 0 11px; font-size: 12.5px; } :where(.page-library) .btn { min-height: 40px; padding: 0 16px; font-size: 13.5px; } :where(.page-library) .item { padding: 16px; border-radius: 16px; gap: 12px; } :where(.page-library) .item h3 { font-size: 17px; } :where(.page-library) .wrap::before { width: 240px; height: 240px; inset-inline-end: -90px; top: -90px; } :where(.page-library) .wrap::after { display: none; } :where(.page-library) .wrap > h1 { font-size: 34px; margin-bottom: 10px; } .intro p { font-size: 15px; } :where(.page-library) .chip { padding: 5px 12px; font-size: 12.5px; } :where(.page-library) .layout { margin-top: 22px; gap: 14px; } .rail { padding: 18px; border-radius: 18px; gap: 18px; } :where(.page-library) .subjects button { min-height: 40px; font-size: 14px; } :where(.page-library) .levels { padding-top: 14px; } :where(.page-library) .levels button { min-height: 42px; } :where(.page-library) .main { gap: 26px; } :where(.page-library) .main h2 { font-size: 22px; } .fgrid { gap: 12px; margin-top: 12px; } .feat { padding: 20px; border-radius: 18px; gap: 8px; } .feat h3 { font-size: 20px; margin-top: 4px; } .feat p.d { font-size: 14px; } .item .tile { width: 44px; height: 44px; border-radius: 12px; font-size: 10.5px; } :where(.page-library) .item .d { font-size: 14px; } .item .act { width: 100%; padding-top: 4px; } .item .act .btn { margin-inline-start: auto; } :where(.page-library) .empty { padding: 28px 18px; } :where(.page-library) .foot2 { margin-top: 30px; } /* -------------------------------------------------------------- Quizzes -------------------------------------------------------------- */ :where(.page-quiz) .wrap { padding: 16px 14px 32px; } :where(.page-quiz) .brand svg { width: 18px; height: 22px; } :where(.page-quiz) .hero { padding: 26px 22px; border-radius: 18px; } :where(.page-quiz) .hero h1 { font-size: 26px; } :where(.page-quiz) .hero p { font-size: 14.5px; } :where(.page-quiz) .btn-sm { padding: 8px 11px; font-size: 12.5px; } :where(.page-quiz) .item { padding: 20px; border-radius: 16px; } :where(.page-quiz) .item h3 { font-size: 18px; } :where(.page-quiz) .q { padding: 22px 18px; border-radius: 18px; } :where(.page-quiz) .q h2 { margin: 18px 0 16px; } :where(.page-quiz) .opt { padding: 12px 14px; gap: 12px; } .opt .tx { font-size: 15px; } .opt .tx.ar { font-size: 27px; } :where(.page-quiz) .nav .btn { flex: 1; } :where(.page-quiz) .score { padding: 26px 20px; border-radius: 18px; } :where(.page-quiz) .score h2 { font-size: 24px; } .rev { padding: 18px; border-radius: 16px; } .rev h3 { font-size: 16.5px; } .opt.good::after, .opt.wrong::after { font-size: 11px; padding: 2px 8px; } /* -------------------------------------------------------------- TBC student dashboard -------------------------------------------------------------- */ .pils { grid-template-columns: 1fr; } .pil { padding: 16px; } /* -------------------------------------------------------------- 404 page -------------------------------------------------------------- */ :where(.page-404) .frame { border-radius: 28px; padding: 24px 22px 36px; } } /* ===================================================================== Screens 560px wide and narrower ===================================================================== */ @media (max-width: 560px) { /* -------------------------------------------------------------- Quizzes -------------------------------------------------------------- */ :where(.page-quiz) .score { grid-template-columns: 1fr; text-align: center; gap: 18px; } :where(.page-quiz) .ring { margin: 0 auto; } :where(.page-quiz) .score p { margin-inline-start: auto; margin-inline-end: auto; } /* -------------------------------------------------------------- Daily revision -------------------------------------------------------------- */ :where(.page-tracker) .strip { grid-template-columns: repeat(7,1fr); row-gap: 12px; } } /* ===================================================================== Screens 520px wide and narrower ===================================================================== */ @media (max-width: 520px) { /* -------------------------------------------------------------- Enroll -------------------------------------------------------------- */ .field-row { grid-template-columns: 1fr; } } /* ===================================================================== Screens 480px wide and narrower ===================================================================== */ @media (max-width: 480px) { /* -------------------------------------------------------------- Daily revision -------------------------------------------------------------- */ :where(.page-tracker) .top > div { padding: 10px 16px; } :where(.page-tracker) .brand { font-size: 15px; white-space: nowrap; gap: 8px; } :where(.page-tracker) .brand svg { width: 18px; height: 22px; } :where(.page-tracker) .btn-sm { padding: 8px 12px; font-size: 12.5px; white-space: nowrap; } :where(.page-tracker) .top nav { gap: 6px; } :where(.page-tracker) .wrap { padding: 16px; } } /* ===================================================================== Screens 360px wide and narrower ===================================================================== */ @media (max-width: 360px) { /* -------------------------------------------------------------- Staff portals -------------------------------------------------------------- */ :where(.page-admin, .page-teacher) .brand { font-size: 14px; } :where(.page-admin, .page-teacher) .top .btn { padding: 7px 10px; font-size: 12px; } } /* ===================================================================== Reduced motion ===================================================================== */ @media (prefers-reduced-motion: reduce) { /* -------------------------------------------------------------- Shared -------------------------------------------------------------- */ html:where(.page-404, .page-payment-success), :where(.page-404, .page-payment-success) * { animation: none !important; } html:where(.page-enroll, .page-library, .page-quiz, .page-tracker), :where(.page-enroll, .page-library, .page-quiz, .page-tracker) * { animation: none !important; transition-duration: .001ms !important; } /* -------------------------------------------------------------- Public site -------------------------------------------------------------- */ html:where(.site:not(.page-enroll)), :where(.site:not(.page-enroll)) *, html:where(.site:not(.page-enroll))::before, :where(.site:not(.page-enroll)) *::before, html:where(.site:not(.page-enroll))::after, :where(.site:not(.page-enroll)) *::after { animation: none !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } :where(.site:not(.page-enroll, .page-success-stories)).js .reveal { opacity: 1; transform: none; } .hero h1 .ch { opacity: 1; transform: none; filter: none; } :where(.site:not(.page-about, .page-contact, .page-mission, .page-success-stories)) .fx::after { transition: none; } /* -------------------------------------------------------------- Portals (dashboards, staff tools, library, quizzes) -------------------------------------------------------------- */ html:where(.app:not(.page-library, .page-quiz, .page-tracker)), :where(.app:not(.page-library, .page-quiz, .page-tracker)) * { animation: none !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* -------------------------------------------------------------- Success Stories -------------------------------------------------------------- */ :where(.page-success-stories).js .reveal, :where(.page-success-stories).js .stars svg { opacity: 1; transform: none; } .stat i { transform: none; } } /* ===================================================================== Animations ===================================================================== */ @keyframes beat { 0%, 100% { box-shadow: 0 0 0 0 rgba(133,204,255,.6); } 50% { box-shadow: 0 0 0 6px rgba(133,204,255,0); } } @keyframes bob { 50% { transform: translateY(-8px); } } @keyframes cal-ping { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } } @keyframes chIn { to { opacity: 1; transform: none; filter: blur(0); } } @keyframes dayIn { from { opacity: 0; transform: scale(.2); } } @keyframes dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.7); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } } @keyframes flick { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } } @keyframes pdIn { from { opacity: 0; transform: translateY(16px) scale(.98); } } @keyframes ping { to { box-shadow: 0 0 0 14px rgba(62,151,217,0); } } @keyframes ping-sky { to { box-shadow: 0 0 0 14px rgba(133,204,255,0); } } @keyframes pop-pay { from { transform: scale(0); } } @keyframes pop-ring { from { transform: scale(.6); opacity: 0; } } @keyframes pop-star { to { opacity: 1; transform: none; } } @keyframes reDot { 0% { box-shadow: 0 0 0 0 rgba(133,204,255,.6); } 100% { box-shadow: 0 0 0 12px rgba(133,204,255,0); } } @keyframes reTick { from { transform: translateY(-6px); opacity: .45; } } @keyframes ring { from { transform: scale(1); opacity: .5; } to { transform: scale(1.4); opacity: 0; } } @keyframes rise { from { opacity: 0; transform: translateY(20px); } } @keyframes rise-404 { from { opacity: 0; transform: translateY(22px); } } @keyframes rise-pay { from { opacity: 0; transform: translateY(24px); } } @keyframes swap { from { opacity: .3; transform: translateY(6px); } } @keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: .8; } 50% { transform: scale(1.4) rotate(18deg); opacity: 1; } } @keyframes up { from { opacity: 0; transform: translateY(14px); } } @keyframes up-dash { from { opacity: 0; transform: translateY(18px); } } @keyframes waIn { from { opacity: 0; transform: translateY(8px); } } /* ========================================================================== Glass design (homepage first; nav, buttons and footer shared by every public page) Night-blue hero with a glass navigation pill and one live "programme window", then calm paper sections, a dark results board, a tide-blue admission band, and a dark footer with a spotlit wordmark. Shared pieces use the h- prefix. ========================================================================== */ :root:where(.site, .app) { --h-ink: #061521; --h-deep: #0A2B40; --h-tide: #0F4460; --h-glow: #3B88A8; --h-sky: #85CCFF; --h-sand: #E4C4A2; --h-copper: #B97A4E; --h-paper: #EDEBE5; --h-paper-2: #E4E1D9; --h-text: #13212B; --h-muted: #5E6B73; --h-f: 'Geist', 'Inter', system-ui, sans-serif; --h-ease: cubic-bezier(.2, .7, .2, 1); } .site body { background: var(--h-paper); color: var(--h-text); font-family: var(--h-f); } .site .h-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; } .site .h-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .site .h-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--h-sky); flex: none; } .site .h-dot-sand { background: var(--h-sand); } .site :is(a, button, select, summary):focus-visible { outline: 2px solid var(--h-sky); outline-offset: 3px; } /* headings: one weight, tight tracking; a second line can step back in tone */ .site :is(.h-hero, .h-sec, .h-cta) h1, .site :is(.h-sec, .h-cta, .h-win) h2 { font-family: var(--h-f); font-weight: 500; letter-spacing: -.035em; margin: 0; } .site .h-soft { color: rgba(255,255,255,.55); } .site .h-paper .h-soft { color: #8A949A; } /* buttons */ .site .h-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding-block: 0; padding-inline: 20px 6px; border-radius: 999px; font: 500 15px/1 var(--h-f); letter-spacing: -.01em; border: 0; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; } .site .h-btn:not(:has(.h-go)) { padding-inline: 20px; } .site .h-btn-light { background: #fff; color: var(--h-ink); box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 10px 30px -12px rgba(0,0,0,.6); } .site .h-btn-light:hover { background: #F2F5F7; } .site .h-btn-dark { background: var(--h-ink); color: #fff; } .site .h-btn-dark:hover { background: var(--h-deep); } .site .h-btn-glass { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter: blur(10px); } .site .h-btn-glass:hover { background: rgba(255,255,255,.14); } .site .h-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #4A93B3, var(--h-deep) 75%); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: transform .25s var(--h-ease); } .site .h-btn-dark .h-go { background: radial-gradient(circle at 30% 30%, #fff, #D9E2E7); color: var(--h-ink); } .site .h-btn:hover .h-go { transform: rotate(45deg); } html[dir="rtl"].site .h-go svg, html[dir="rtl"].site .h-more svg, html[dir="rtl"].site .h-badge svg { scale: -1 1; } .site .h-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14.5px; color: var(--h-tide); } .site .h-more:hover { color: var(--h-ink); } .site .h-more-light { color: var(--h-sky); } .site .h-more-light:hover { color: #fff; } /* ---------- hero ---------- */ .site .h-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 0 0 72px; background: radial-gradient(60% 50% at 18% 18%, rgba(59,136,168,.55), transparent 70%), radial-gradient(45% 40% at 85% 30%, rgba(59,136,168,.32), transparent 70%), radial-gradient(70% 45% at 50% 100%, rgba(185,122,78,.42), transparent 72%), linear-gradient(180deg, var(--h-tide) 0%, var(--h-deep) 46%, var(--h-ink) 100%); } .site .h-aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background: repeating-radial-gradient(circle at 50% -20%, rgba(255,255,255,.035) 0 1px, transparent 1px 7px); mask-image: linear-gradient(#000, transparent 70%); } /* glass navigation pill */ .site .h-nav { position: fixed; inset-inline: 0; top: 14px; z-index: 80; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; } .site .h-pill { pointer-events: auto; display: flex; align-items: center; gap: 22px; height: 56px; padding-block: 0; padding-inline: 18px 6px; border-radius: 999px; background: rgba(9,40,60,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 18px 40px -24px rgba(0,0,0,.7); backdrop-filter: blur(16px) saturate(1.2); transition: background .3s; } .site .h-nav.h-solid .h-pill { background: rgba(6,21,33,.82); } .site .h-brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; font: 600 15.5px/1 var(--h-f); letter-spacing: -.02em; white-space: nowrap; } .site .h-brand svg { fill: currentColor; color: var(--h-sky); } .site .h-links { display: flex; align-items: center; gap: 20px; } .site .h-links > a:not(.h-btn), .site .h-links .dd-btn { color: rgba(255,255,255,.72); font: 450 14px/1 var(--h-f); background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: color .2s; } .site .h-links > a:not(.h-btn):hover, .site .h-links .dd-btn:hover { color: #fff; } .site .h-links .dd { position: relative; } .site .h-links .dd-menu { min-width: 230px; padding-top: 22px; z-index: 5; isolation: isolate; } .site .h-links .dd-menu::before { content: ''; position: absolute; inset: 12px 0 0 0; z-index: -1; border-radius: 16px; background: #0B2638; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 24px 48px -18px rgba(0,0,0,.75); } .site .h-links .dd-menu a { display: block; padding: 10px 14px; border-radius: 10px; color: rgba(255,255,255,.82) !important; font-size: 14px !important; font-weight: 450 !important; background: transparent; } .site .h-links .dd-menu a:hover, .site .h-links .dd-menu a[aria-current] { background: rgba(255,255,255,.08); color: #fff !important; } .site .h-nav-cta { height: 44px; font-size: 14px; } .site .h-tog { display: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08); border: 0; position: relative; cursor: pointer; } .site .h-tog span { position: absolute; inset-inline: 14px; height: 1.6px; border-radius: 2px; background: #fff; transition: transform .25s, top .25s; } .site .h-tog span:first-child { top: 18px; } .site .h-tog span:last-child { top: 25px; } .site .h-tog[aria-expanded="true"] span:first-child { top: 21.5px; transform: rotate(45deg); } .site .h-tog[aria-expanded="true"] span:last-child { top: 21.5px; transform: rotate(-45deg); } .site .h-pill.has-lang .h-links { margin-inline-end: 0; } .site .h-pill > .lang .lang-btn { height: 44px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; } .site .h-pill > .lang .lang-btn svg { color: var(--h-sky); } .site .h-pill > .lang .lang-btn:hover, .site .h-pill > .lang.open .lang-btn { background: rgba(255,255,255,.14); } /* floating status cards */ .site .h-float { position: absolute; top: 210px; z-index: 1; width: 230px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter: blur(12px); display: grid; gap: 4px; animation: h-bob 7s ease-in-out infinite; } .site .h-float-l { inset-inline-start: max(24px, calc(50% - 650px)); top: 250px; } .site .h-float-r { inset-inline-end: max(24px, calc(50% - 640px)); top: 168px; animation-delay: -3.5s; } .site .h-float-k { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,.6); } .site .h-float b { font-weight: 500; font-size: 14.5px; letter-spacing: -.01em; } .site .h-float small { font-size: 12.5px; color: rgba(255,255,255,.5); line-height: 1.4; } @keyframes h-bob { 50% { transform: translateY(-8px); } } .site .h-hero-in { position: relative; z-index: 2; max-width: 920px; margin: 0 auto; padding: 150px 24px 0; text-align: center; display: flex; flex-direction: column; align-items: center; } .site .h-badge { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding-block: 0; padding-inline: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: rgba(255,255,255,.85); font-size: 13px; margin-bottom: 26px; transition: background .2s; } .site .h-badge:hover { background: rgba(255,255,255,.12); } .site .h-badge em { font-style: normal; font-weight: 600; font-size: 12px; padding: 4px 9px; border-radius: 999px; background: var(--h-sand); color: #4A2C14; } .site .h-hero h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.04; } .site .h-hero h1 span { display: block; } .site .h-lead { max-width: 560px; margin: 22px auto 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.7); } /* "I am looking for" picker */ .site .h-pick { margin-top: 34px; width: min(100%, 560px); display: flex; align-items: center; gap: 10px; height: 60px; padding-block: 0; padding-inline: 20px 7px; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 20px 50px -20px rgba(0,0,0,.6); backdrop-filter: blur(12px); } .site .h-pick-ic { color: var(--h-sand); flex: none; } .site .h-pick select { flex: 1; min-width: 0; height: 100%; appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: #fff; font: 450 15.5px var(--h-f); cursor: pointer; } .site .h-pick select option { color: var(--h-text); } .site .h-pick select:focus-visible { outline: none; } .site .h-pick:focus-within { box-shadow: inset 0 0 0 1px rgba(133,204,255,.7), 0 20px 50px -20px rgba(0,0,0,.6); } .site .h-pick .h-btn { height: 46px; } .site .h-chips { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; } .site .h-chips-k { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,.6); margin-inline-end: 4px; } .site .h-chips a { padding: 7px 13px; border-radius: 999px; font-size: 13px; color: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background .2s, color .2s; } .site .h-chips a:hover { background: rgba(255,255,255,.1); color: #fff; } .site .h-scroll { margin-top: 34px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.55); } .site .h-scroll:hover { color: #fff; } /* the programme window */ .site .h-win { position: relative; z-index: 2; max-width: 1080px; margin: 56px auto 0; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 40px 90px -40px rgba(0,0,0,.8); backdrop-filter: blur(18px); overflow: hidden; scroll-margin-top: 90px; } .site .h-win-bar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.1); } .site .h-win-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); } .site .h-win-bar span { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.55); margin-inline-end: 34px; } .site .h-win-bar svg { fill: currentColor; } .site .h-win-body { display: grid; grid-template-columns: 330px 1fr; } .site .h-win-side { padding: 28px 24px; border-inline-end: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; text-align: start; } .site .h-win-side h2 { font-size: 22px; line-height: 1.2; letter-spacing: -.025em; } .site .h-win-side > p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.6); margin: 10px 0 22px; } .site .h-tabs { display: grid; gap: 6px; } .site .h-tabs button { text-align: start; padding: 12px 14px; border-radius: 12px; border: 0; background: transparent; color: #fff; cursor: pointer; display: grid; gap: 3px; box-shadow: inset 0 0 0 1px transparent; transition: background .2s, box-shadow .2s; font-family: var(--h-f); } .site .h-tabs button b { font-weight: 500; font-size: 14.5px; } .site .h-tabs button small { font-size: 12.5px; color: rgba(255,255,255,.5); } .site .h-tabs button:hover { background: rgba(255,255,255,.05); } .site .h-tabs button[aria-selected="true"] { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .site .h-prog { margin-top: auto; padding-top: 22px; } .site .h-prog::before { content: ''; display: block; height: 2px; border-radius: 2px; background: rgba(255,255,255,.12); } .site .h-prog i { display: block; height: 2px; margin-top: -2px; border-radius: 2px; background: #fff; transform-origin: 0 50%; transform: scaleX(0); } html[dir="rtl"].site .h-prog i { transform-origin: 100% 50%; } .site .h-win-main { padding: 22px; } .site .h-panel { height: 100%; min-height: 380px; border-radius: 16px; background: #F6F5F1; color: var(--h-text); padding: 26px 26px 22px; display: flex; flex-direction: column; text-align: start; animation: h-in .45s var(--h-ease); } .site .h-panel[hidden] { display: none; } @keyframes h-in { from { opacity: 0; transform: translateY(8px); } } .site .h-panel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; } .site .h-panel h3 { font: 500 24px/1.2 var(--h-f); letter-spacing: -.03em; margin: 0; } .site .h-panel-top p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--h-muted); max-width: 460px; } .site .h-tag { flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: #E8E6DF; color: var(--h-muted); font-size: 12.5px; white-space: nowrap; } .site .h-tag-on { background: #DDF0E4; color: #1B6B3E; } .site .h-viz { flex: 1; margin: 22px 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #E6E3DB; padding: 20px; } .site .h-panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .site .h-price { font-size: 13.5px; color: var(--h-muted); display: flex; align-items: baseline; gap: 6px; } .site .h-price b { font: 500 26px/1 var(--h-f); letter-spacing: -.03em; color: var(--h-text); } /* rings */ .site .h-ring { --p: .5; --c: var(--h-tide); --t: #E7ECEF; position: relative; width: 120px; aspect-ratio: 1; border-radius: 50%; flex: none; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--c) calc(var(--p) * 360deg), var(--t) 0); transition: --p 1.3s var(--h-ease); } .site .h-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff; } .site .h-ring > * { position: relative; } .site .h-ring b { font: 500 30px/1 var(--h-f); letter-spacing: -.04em; } .site .h-ring small { font-size: 11.5px; color: var(--h-muted); max-width: 80px; line-height: 1.3; margin-top: 4px; } html[dir="rtl"].site .h-ring { transform: scaleX(-1); } html[dir="rtl"].site .h-ring > * { transform: scaleX(-1); } .site .h-viz-mad { display: flex; align-items: center; gap: 26px; } .site .h-list { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; } .site .h-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #EEECE6; font-size: 14px; } .site .h-list li:last-child { border-bottom: 0; } .site .h-list em { font-style: normal; font-size: 12.5px; color: var(--h-tide); } .site .h-list em.h-muted { color: #9AA3A8; } .site .h-viz-aca { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; } .site .h-bars { flex: 1; min-height: 130px; display: flex; align-items: flex-end; gap: 10px; } .site .h-bars i { flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #9CC9DF, #DCEAF1); } .site .h-bars i:last-child { background: linear-gradient(180deg, var(--h-tide), #5D97B4); } .site .h-bars-k { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--h-muted); } .site .h-bars-k b { font: 500 22px/1 var(--h-f); color: var(--h-text); letter-spacing: -.03em; } .site .h-viz-tbc { display: grid; gap: 16px; align-content: center; } .site .h-meter { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 14px; font-size: 13.5px; } .site .h-meter i { height: 8px; border-radius: 99px; background: #EDEFF0; position: relative; overflow: hidden; } .site .h-meter i::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--h-tide), #6AA7C4); } html[dir="rtl"].site .h-meter i::after { background: linear-gradient(270deg, var(--h-tide), #6AA7C4); } .site .h-courses { list-style: none; display: grid; align-content: center; gap: 0; } .site .h-courses li { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid #EEECE6; font-size: 15px; } .site .h-courses li:last-child { border-bottom: 0; } .site .h-courses em { font-style: normal; font-weight: 500; } /* ---------- section frames ---------- */ .site .h-sec { padding: 120px 0; } .site .h-paper { background: var(--h-paper); color: var(--h-text); } .site .h-night { background: radial-gradient(70% 60% at 80% 0%, rgba(59,136,168,.28), transparent 70%), linear-gradient(180deg, #0B2536, var(--h-ink)); color: #fff; } .site .h-tide { background: radial-gradient(50% 70% at 0% 50%, rgba(133,204,255,.18), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(228,196,162,.22), transparent 70%), linear-gradient(135deg, var(--h-tide), #12536F 55%, #0C3A54); color: #fff; } .site .h-eye { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 13px; color: var(--h-muted); } .site :is(.h-night, .h-tide) .h-eye { color: rgba(255,255,255,.6); } .site .h-head h2 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.06; } .site .h-head h2 span { display: block; } .site .h-head > p, .site .h-head-split > p { margin: 16px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--h-muted); max-width: 460px; } .site .h-head-c { text-align: center; } .site .h-head-c > p { margin-inline: auto; } .site .h-head-split { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; } .site .h-night .h-head-split > p { color: rgba(255,255,255,.55); max-width: 300px; font-size: 14px; text-align: end; } .site .h-center { text-align: center; margin-top: 56px; } /* ---------- how enrolment works ---------- */ .site .h-steps { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; } .site .h-steps::before { content: ''; position: absolute; top: 6px; inset-inline: 6px; height: 1px; background: #C9CDC9; } .site .h-step { position: relative; padding-top: 34px; } .site .h-step::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--h-tide); box-shadow: 0 0 0 5px rgba(15,68,96,.14); } .site .h-step-n { font-size: 12.5px; color: var(--h-muted); } .site .h-step h3 { font: 500 20px/1.25 var(--h-f); letter-spacing: -.02em; margin: 10px 0 8px; } .site .h-step > p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--h-muted); min-height: 70px; } .site .h-card { position: relative; margin-top: 26px; height: 290px; border-radius: 18px; padding: 0 20px; display: flex; align-items: flex-end; overflow: visible; } .site .h-card-mint { background: linear-gradient(160deg, #CFE4EC, #A8CBD9 60%, #93BCCD); } .site .h-card-deep { background: radial-gradient(80% 70% at 70% 10%, #2F7896, transparent 70%), linear-gradient(160deg, #123E57, #0A2536); } .site .h-card-sand { background: linear-gradient(160deg, #F2DDC6, #E7C7A6 55%, #D9B28C); } .site .h-mini { width: 100%; margin-bottom: -26px; border-radius: 14px; background: rgba(255,255,255,.86); box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0 24px 40px -24px rgba(6,21,33,.45); backdrop-filter: blur(10px); padding: 16px; } .site .h-mini-dark { background: rgba(16,52,74,.92); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 24px 40px -24px rgba(0,0,0,.6); } .site .h-mini-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; } .site .h-mini-h b { font-weight: 500; font-size: 14.5px; } .site .h-mini-h small { font-size: 12px; color: var(--h-muted); } .site .h-mini-dark .h-mini-h small { color: rgba(255,255,255,.55); } .site .h-checks, .site .h-dots { list-style: none; margin: 0; padding: 0; } .site .h-checks li, .site .h-dots li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid rgba(19,33,43,.08); font-size: 13.5px; } .site .h-checks svg { color: var(--h-tide); } .site .h-dots li { justify-content: flex-start; gap: 10px; } .site .h-dots li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--h-copper); } .site .h-mini-big { font: 500 44px/1 var(--h-f); letter-spacing: -.04em; margin: 4px 0 14px; } .site .h-mini-big small { font-size: 16px; color: rgba(255,255,255,.55); margin-inline-start: 4px; letter-spacing: 0; } .site .h-mini-tags { display: flex; flex-wrap: wrap; gap: 6px; } .site .h-mini-tags span { font-size: 12px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); } .site .h-done { position: absolute; top: 18px; inset-inline-end: 18px; padding: 12px 14px; border-radius: 12px; background: var(--h-ink); color: #fff; display: grid; gap: 4px; } .site .h-done small { font-size: 11.5px; color: rgba(255,255,255,.6); } .site .h-done b { font: 500 17px/1.1 var(--h-f); letter-spacing: -.02em; } /* ---------- results board ---------- */ .site .h-board { margin-top: 56px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); overflow: hidden; } .site .h-board-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; color: rgba(255,255,255,.7); } .site .h-board-bar span { display: inline-flex; align-items: center; gap: 8px; } .site .h-board-bar svg { fill: var(--h-sky); } .site .h-board-bar em { font-style: normal; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; } .site .h-board-grid { display: grid; grid-template-columns: 330px 1fr; gap: 16px; padding: 16px; } .site .h-score { grid-row: span 2; border-radius: 16px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); padding: 22px; display: flex; flex-direction: column; align-items: center; text-align: center; } .site .h-score-k { align-self: flex-start; font-size: 13.5px; color: rgba(255,255,255,.7); } .site .h-score .h-ring { --c: #9ED3F2; --t: rgba(255,255,255,.08); margin: 26px 0; } .site .h-score .h-ring::before { background: #0E2A3B; } .site .h-ring-xl { width: 190px; } .site .h-ring-xl::before { inset: 10px; } .site .h-ring-xl b { font-size: 52px; } .site .h-ring-wait { --p: 0 !important; } @property --p { syntax: ''; inherits: true; initial-value: 0; } .site .h-score p { margin: auto 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.6); } .site .h-score p b { color: #fff; font-weight: 500; } .site .h-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .site .h-tile { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .site .h-tile > div:last-child { display: grid; gap: 3px; } .site .h-tile b { font-weight: 500; font-size: 14.5px; } .site .h-tile small { font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.4; } .site .h-ring-s { --c: #9ED3F2; --t: rgba(255,255,255,.1); width: 58px; } .site .h-ring-s::before { inset: 4px; background: #11303F; } .site .h-ring-s b { font-size: 15px; letter-spacing: -.02em; } .site .h-story { border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); padding: 18px 20px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; } .site .h-flag { align-self: start; font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--h-sand); color: #4A2C14; font-weight: 500; white-space: nowrap; } .site .h-story h3 { font: 500 17px/1.3 var(--h-f); margin: 0 0 6px; letter-spacing: -.015em; } .site .h-story p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.6); max-width: 560px; } /* ---------- hadith ---------- */ .site .h-hadith { text-align: center; padding: 130px 0 70px; } .site .h-ar { font-family: 'Amiri', serif; font-size: clamp(26px, 3.4vw, 38px); color: var(--h-tide); margin: 0 0 22px; line-height: 1.6; } .site .h-words { margin: 0 auto; max-width: 820px; font: 500 clamp(30px, 4.4vw, 52px)/1.15 var(--h-f); letter-spacing: -.035em; color: var(--h-text); } .js.site .h-words span { color: #B9BEBF; transition: color .35s; } .js.site .h-words span.on { color: var(--h-text); } .site .h-hadith cite { display: inline-block; margin-top: 22px; font-style: normal; font-size: 13.5px; color: var(--h-muted); } /* ---------- testimonials ---------- */ .site .h-voices { padding: 40px 0 120px; } .site .h-quotes { padding: 14px; border-radius: 24px; background: var(--h-ink); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .site .h-q { margin: 0; min-height: 360px; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; position: relative; } .site .h-q-tide { background: radial-gradient(80% 60% at 30% 20%, #2C6F8C, transparent 70%), #0E3247; color: #fff; } .site .h-q-mist { background: radial-gradient(70% 60% at 50% 30%, #fff, #D4E7EE 70%); color: var(--h-text); } .site .h-q-sand { background: radial-gradient(70% 60% at 50% 20%, #FBEBDA, #E3BF9B 75%); color: #2B1B0E; } .site .h-q-n { align-self: flex-end; font: 500 13px/1 var(--h-f); padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--h-ink); } .site .h-q-tide .h-q-n { background: rgba(255,255,255,.14); color: #fff; } .site .h-q blockquote { margin: auto 0 22px; font: 500 20px/1.35 var(--h-f); letter-spacing: -.02em; } .site .h-q figcaption { display: grid; gap: 3px; padding-top: 14px; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 18%, transparent); } .site .h-q figcaption b { font-weight: 500; font-size: 14px; } .site .h-q figcaption small { font-size: 12.5px; opacity: .65; } /* ---------- madrasah admission ---------- */ .site .h-reopen { display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: center; } .site .h-reopen h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; } .site .h-reopen h2 span { color: var(--h-sand); } .site .h-reopen-copy > p:not(.h-eye) { margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.7); max-width: 500px; } .site .h-reopen-copy > p.h-note { margin-top: 10px; color: var(--h-sand); font-size: 14.5px; } .site .h-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .site .h-acts-c { justify-content: center; } .site .h-cd { border-radius: 22px; padding: 22px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 40px 70px -40px rgba(0,0,0,.6); backdrop-filter: blur(14px); } .site .h-cd-date { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.12); } .site .h-cd-date small { font-size: 13px; color: rgba(255,255,255,.6); } .site .h-cd-date b { font: 500 20px/1 var(--h-f); letter-spacing: -.02em; } .site .h-cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .site .h-cd-grid div { border-radius: 14px; background: rgba(6,21,33,.35); padding: 16px 6px 12px; text-align: center; display: grid; gap: 6px; } .site .h-cd-grid b { font: 500 34px/1 var(--h-f); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .site .h-cd-grid span { font-size: 12px; color: rgba(255,255,255,.55); } /* ---------- faq ---------- */ .site .h-faq-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; } .site .h-faq-grid .h-head .h-btn { margin-top: 30px; } .site .h-faq details { border-bottom: 1px solid #D6D3CB; } .site .h-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font: 500 17px/1.35 var(--h-f); letter-spacing: -.015em; } .site .h-faq summary::-webkit-details-marker { display: none; } .site .h-faq summary svg { flex: none; color: var(--h-muted); transition: transform .25s var(--h-ease); } .site .h-faq details[open] summary svg { transform: rotate(180deg); } .site .h-faq details p { margin: -6px 0 22px; font-size: 15px; line-height: 1.65; color: var(--h-muted); max-width: 560px; } .site .h-faq .txt-link { color: var(--h-tide); text-decoration: underline; text-underline-offset: 3px; } /* ---------- call to action ---------- */ .site .h-cta { position: relative; isolation: isolate; overflow: hidden; padding: 150px 0 170px; text-align: center; color: #fff; background: var(--h-ink); } .site .h-cta-aura { position: absolute; inset: -20% -10% 0; z-index: -1; filter: blur(40px); opacity: .9; background: radial-gradient(30% 50% at 25% 10%, rgba(59,136,168,.75), transparent 70%), radial-gradient(28% 45% at 70% 0%, rgba(110,180,205,.55), transparent 70%), radial-gradient(35% 40% at 50% 35%, rgba(15,68,96,.9), transparent 75%); animation: h-aurora 16s ease-in-out infinite alternate; } @keyframes h-aurora { to { transform: translateX(4%) scale(1.06); } } .site .h-cta h2 { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.04; } .site .h-cta p { margin: 18px auto 0; max-width: 480px; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.65); } /* ---------- footer ---------- */ .site .h-foot { background: var(--h-ink); color: rgba(255,255,255,.7); padding: 30px 0 22px; } .site .h-foot-top { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; padding-bottom: 10px; } .site .h-foot-brand p { margin: 14px 0 22px; font-size: 14px; line-height: 1.6; max-width: 280px; color: rgba(255,255,255,.55); } .site .h-foot-cols { display: grid; grid-template-columns: 1.1fr .8fr 1.3fr; gap: 24px; } .site .h-foot-cols > div { display: grid; align-content: start; gap: 11px; padding-inline-start: 18px; border-inline-start: 1px solid rgba(255,255,255,.08); } .site .h-foot-cols h4 { margin: 0 0 6px; font: 500 12.5px/1 var(--h-f); color: rgba(255,255,255,.45); } .site .h-foot-cols a, .site .h-foot-cols span { font-size: 14px; color: rgba(255,255,255,.75); overflow-wrap: anywhere; } .site .h-foot-cols a:hover { color: #fff; } .site .h-mark { --sx: 50%; position: relative; margin-top: 46px; border-top: 1px solid rgba(255,255,255,.06); text-align: center; overflow: hidden; line-height: 1; padding-top: 20px; } .site .h-mark::before { content: ''; position: absolute; top: 0; inset-inline-start: var(--sx); width: 420px; height: 100%; translate: -50% 0; pointer-events: none; background: radial-gradient(40% 75% at 50% 0%, rgba(214,232,240,.22), transparent 70%); transition: inset-inline-start .4s var(--h-ease); } html[dir="rtl"].site .h-mark::before { translate: 50% 0; } .site .h-mark span { display: block; font: 600 clamp(64px, 17vw, 220px)/.95 var(--h-f); letter-spacing: -.06em; color: transparent; background: radial-gradient(260px 200px at var(--sx) 30%, rgba(255,255,255,.75), rgba(255,255,255,.07) 70%); -webkit-background-clip: text; background-clip: text; transition: background-position .4s; user-select: none; } .site .h-foot-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); font-size: 12.5px; color: rgba(255,255,255,.5); } .site .h-social { display: flex; gap: 8px; } .site .h-social a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .site .h-social a:hover { color: #fff; background: rgba(255,255,255,.08); } /* admission open or closed */ .site .when-open { display: none; } .adm-open.site .when-open { display: inline-flex; } .adm-open.site :is(h2, p).when-open { display: block; } .adm-open.site .when-closed, .adm-open.site .h-cd { display: none; } /* Arabic: headings use the Arabic face at the same weight */ html[lang="ar"].site .h-pick select { font-family: 'Inter', sans-serif; } html[lang="ar"].site .h-mark span { line-height: 1.35; } /* ---------- screens ---------- */ @media (max-width: 1180px) { .site .h-links { gap: 15px; } .site .h-float { display: none; } } @media (max-width: 1060px) { .site .h-tog { display: block; } .site .h-pill { width: 100%; max-width: 720px; justify-content: space-between; padding-inline: 18px 6px; position: relative; } .site .h-links { position: absolute; top: calc(100% + 8px); inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; border-radius: 20px; background: rgba(6,21,33,.95); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -30px rgba(0,0,0,.8); backdrop-filter: blur(18px); display: none; max-height: calc(100vh - 100px); overflow-y: auto; } .site .h-links.open { display: flex; } .site .h-links > a:not(.h-btn), .site .h-links .dd-btn { padding: 14px 12px; font-size: 15.5px; width: 100%; justify-content: space-between; color: rgba(255,255,255,.85); } .site .h-links .dd-menu { position: static; opacity: 1; visibility: visible; transform: none; display: none; padding: 0 0 6px 10px; min-width: 0; } .site .h-links .dd-menu::before { display: none; } .site .h-links .dd.open .dd-menu { display: block; } .site .h-links .dd:hover .dd-menu { display: none; } .site .h-links .dd.open:hover .dd-menu { display: block; } .site .h-nav-cta { margin-top: 8px; justify-content: center; } .site .h-pill > .lang { margin-inline-start: auto; margin-inline-end: 8px; } .site .h-win-body { grid-template-columns: 1fr; } .site .h-win-side { border-inline-end: 0; border-bottom: 1px solid rgba(255,255,255,.1); } .site .h-tabs { grid-template-columns: repeat(2, 1fr); } .site .h-board-grid { grid-template-columns: 1fr; } .site .h-score { grid-row: auto; } .site .h-reopen { grid-template-columns: 1fr; gap: 40px; } .site .h-faq-grid { grid-template-columns: 1fr; gap: 30px; } .site .h-foot-top { grid-template-columns: 1fr; } } @media (max-width: 820px) { .site .h-sec { padding: 88px 0; } .site .h-steps { grid-template-columns: 1fr; gap: 64px; } .site .h-steps::before { top: 6px; bottom: 0; inset-inline-start: 6px; inset-inline-end: auto; width: 1px; height: auto; } .site .h-step { padding-top: 0; padding-inline-start: 34px; } .site .h-step > p { min-height: 0; } .site .h-quotes { grid-template-columns: 1fr; } .site .h-q { min-height: 280px; } .site .h-head-split { flex-direction: column; align-items: flex-start; } .site .h-night .h-head-split > p { text-align: start; } .site .h-story { grid-template-columns: 1fr; } .site .h-foot-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .site .h-wrap { padding: 0 16px; } .site .h-nav { top: 10px; padding: 0 10px; } .site .h-pill { height: 54px; padding-inline: 14px 5px; } .site .h-brand { font-size: 14.5px; } .site .h-hero-in { padding: 118px 16px 0; } .site .h-lead { font-size: 16px; } .site .h-pick { height: auto; flex-wrap: wrap; padding: 8px; border-radius: 22px; } .site .h-pick-ic { margin-inline-start: 10px; } .site .h-pick select { height: 46px; } .site .h-pick .h-btn { width: 100%; justify-content: center; padding-inline: 20px 6px; } .site .h-chips a:nth-of-type(n+3) { display: none; } .site .h-win { margin: 44px 12px 0; border-radius: 18px; } .site .h-win-side, .site .h-win-main { padding: 16px; } .site .h-tabs { grid-template-columns: 1fr; } .site .h-tabs button small { display: none; } .site .h-panel { padding: 18px; min-height: 0; } .site .h-panel-top { flex-direction: column; gap: 10px; } .site .h-viz-mad { flex-direction: column; align-items: stretch; } .site .h-viz-mad .h-ring { align-self: center; } .site .h-meter { grid-template-columns: 1fr; gap: 6px; } .site .h-tiles { grid-template-columns: 1fr; } .site .h-cd-grid b { font-size: 26px; } .site .h-foot-cols { grid-template-columns: 1fr; } .site .h-foot-bar { justify-content: center; text-align: center; } } @media (prefers-reduced-motion: reduce) { .site .h-float, .site .h-cta-aura { animation: none; } .site .h-panel { animation: none; } .site .h-ring { transition: none; } } /* ========================================================================== Glass design on the other public pages The page rules above keep their layout; these rules move them onto the homepage's palette and type: night-blue hero under the glass nav, paper body, white cards, dark call-to-action, the shared dark footer. ========================================================================== */ :root.site:not(.page-index) { --deep: #0A2B40; --ink: #0F4460; --sky-d: #2D7DA3; --sky-l: #DCEBF2; --wash: #E4E1D9; --white: #fff; --line: #DAD6CD; --text: #13212B; --muted: #5E6B73; --display: 'Geist', 'Inter', system-ui, sans-serif; --d: var(--display); --shadow: 0 1px 2px rgba(6,21,33,.04), 0 18px 40px -26px rgba(6,21,33,.35); } .site:not(.page-index) :is(button, input, select, textarea) { font-family: inherit; } .site:not(.page-index) :is(h1, h2, h3, h4) { font-family: var(--h-f); font-weight: 500; letter-spacing: -.03em; } .site:not(.page-index) :is(h3, h4) { letter-spacing: -.02em; } /* small labels: sentence case with a dot, no wide tracking */ .site:not(.page-index) :is(.kicker, .hero-kicker, .p-role, .who, .group-label, .msg-title, .sel-panel .d, .links h3, .reopen-k, .ph .k, .toc-h, .sec-n, .ask, .plan small.k, th) { text-transform: none; letter-spacing: 0; font-weight: 500; } .site:not(.page-index) .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); } .site:not(.page-index) .kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sky-d); flex: none; } /* buttons: pills */ .site:not(.page-index) .btn { border-radius: 999px; font-family: var(--h-f); font-weight: 500; letter-spacing: -.01em; } .site:not(.page-index) .btn-ink { background: var(--h-ink); color: #fff; border-color: var(--h-ink); } .site:not(.page-index) .btn-ink:hover { background: var(--deep); } .site:not(.page-index) :is(.btn-line, .btn-ghost) { background: transparent; color: var(--h-ink); box-shadow: inset 0 0 0 1px #C9C5BB; border-color: transparent; } .site:not(.page-index) :is(.btn-line, .btn-ghost):hover { background: rgba(6,21,33,.05); } .site:not(.page-index) .btn-sky { background: #fff; color: var(--h-ink); } /* ---------- hero ---------- */ .site:not(.page-index, .page-enroll) header.hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding-top: clamp(130px, 14vw, 170px); background: radial-gradient(55% 60% at 15% 10%, rgba(59,136,168,.5), transparent 70%), radial-gradient(40% 50% at 90% 20%, rgba(59,136,168,.28), transparent 70%), radial-gradient(60% 50% at 50% 115%, rgba(185,122,78,.35), transparent 72%), linear-gradient(180deg, var(--h-tide) 0%, var(--h-deep) 55%, #0A2333 100%); } .site:not(.page-index, .page-enroll) header.hero::before, .site:not(.page-index, .page-enroll) header.hero::after { border-color: rgba(255,255,255,.08) !important; } .site:not(.page-index, .page-enroll) header.hero :is(h1, h2) { color: #fff; } .site:not(.page-index, .page-enroll) header.hero h1 { margin-bottom: clamp(24px, 2.6vw, 34px); } /* breathing room above the intro text */ .site:not(.page-index, .page-enroll) header.hero :is(h1 em, h1 .acc, h1 span:not(.w):not(.ch):not(.ball)) { color: rgba(255,255,255,.55); font-style: normal; } .site:not(.page-index, .page-enroll) header.hero h1 .acc .ch { color: inherit; } .site:not(.page-index, .page-enroll) header.hero h1 .ball { background: var(--h-sand) !important; box-shadow: none !important; } .site:not(.page-index, .page-enroll) header.hero :is(p, .lead, li) { color: rgba(255,255,255,.72); } .site:not(.page-index, .page-enroll) header.hero .kicker { color: rgba(255,255,255,.65); } .site:not(.page-index, .page-enroll) header.hero .kicker::before { background: var(--h-sky); } .site:not(.page-index, .page-enroll) header.hero .btn-ink, .site:not(.page-index, .page-enroll) header.hero .btn-sky { background: #fff; color: var(--h-ink); box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); border-color: #fff; } .site:not(.page-index, .page-enroll) header.hero .btn-ink:hover { background: #F2F5F7; } .site:not(.page-index, .page-enroll) header.hero :is(.btn-line, .btn-ghost) { color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); backdrop-filter: blur(10px); } .site:not(.page-index, .page-enroll) header.hero :is(.btn-line, .btn-ghost):hover { background: rgba(255,255,255,.14); } /* ---------- body sections ---------- */ .site:not(.page-index) :is(.sec, .statement, .story, .band, .stats, .lines, .deck, .vision, .cal, .faq, .doc, .team) { background-color: transparent; } .site:not(.page-index) :is(.head h2, .statement p, .vision h2) { color: var(--text); } /* call-to-action box: dark like the homepage ending */ .site:not(.page-index) .cta-box { position: relative; isolation: isolate; overflow: hidden; border: 0; border-radius: 24px; color: #fff; background: radial-gradient(40% 70% at 20% 0%, rgba(59,136,168,.7), transparent 70%), radial-gradient(35% 60% at 80% 0%, rgba(110,180,205,.45), transparent 70%), linear-gradient(180deg, #0C3048, var(--h-ink)); } .site:not(.page-index) .cta-box :is(h2, h3) { color: #fff; } .site:not(.page-index) .cta-box p { color: rgba(255,255,255,.68); } .site:not(.page-index) .cta-box .btn-ink, .site:not(.page-index) .cta-box .btn-sky { background: #fff; color: var(--h-ink); border-color: #fff; } .site:not(.page-index) .cta-box :is(.btn-line, .btn-ghost) { color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); } .site.page-about .statement { padding-top: clamp(64px, 8vw, 104px); } /* the shared footer sits right after the last section */ .site:not(.page-index) .h-foot { margin-top: 0; padding-top: 70px; } /* 404 and payment received: the same night-blue panel as the hero */ :root:is(.page-404, .page-payment-success) { --display: 'Geist', 'Inter', system-ui, sans-serif; } :is(.page-404, .page-payment-success) body { font-family: 'Geist', 'Inter', system-ui, sans-serif; background: #EDEBE5; } :is(.page-404, .page-payment-success) .frame { border-radius: 28px; background: radial-gradient(50% 60% at 15% 10%, rgba(59,136,168,.55), transparent 70%), radial-gradient(60% 50% at 50% 115%, rgba(185,122,78,.4), transparent 72%), linear-gradient(180deg, #0F4460, #0A2B40 55%, #061521); } :is(.page-404, .page-payment-success) .frame::before { opacity: .35; } :is(.page-404, .page-payment-success) h1 { font-weight: 500; letter-spacing: -.035em; } .page-404 .code { font-weight: 500; letter-spacing: -.06em; color: transparent; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.12)); -webkit-background-clip: text; background-clip: text; } :is(.page-404, .page-payment-success) .btn { font-weight: 500; } .page-404 .btn-sky, .page-payment-success a.btn { background: #fff; color: #061521; } .page-404 .btn-ghost { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); } .page-payment-success .icon { background: #E4C4A2; color: #3A2410; } /* ========================================================================== Arabic and the language switch The rules above use start/end (logical) properties, so the whole site mirrors itself when js/i18n.js sets . What follows is only what the mirror cannot do on its own. ========================================================================== */ /* Arabic letters in IBM Plex Sans Arabic wherever the site asks for Inter or Bricolage */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plex-arabic-400.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/plex-arabic-500.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/plex-arabic-600.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/plex-arabic-700.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plex-arabic-400.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/plex-arabic-500.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/plex-arabic-600.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/plex-arabic-600.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/plex-arabic-600.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/plex-arabic-700.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* Hold the page for a moment while the Arabic is put in, so English doesn't flash */ html.i18n-wait body { visibility: hidden; } /* Arabic is joined-up script: no letter spacing, no slanted italics, a little more line height */ html[lang="ar"] body, html[lang="ar"] body * { letter-spacing: normal !important; } html[lang="ar"] :is(em, i, cite, dfn) { font-style: normal; } html[lang="ar"] :is(h1, h2) { line-height: 1.3 !important; } html[lang="ar"] :is(h3, h4) { line-height: 1.45 !important; } html[lang="ar"] .lang-menu [lang="en"] { font-family: 'Inter', sans-serif; } /* Icons that point a direction turn round in Arabic */ html[dir="rtl"] svg:has(> path[d="M5 12h14M13 6l6 6-6 6"]), html[dir="rtl"] svg:has(> path[d="M9 6l6 6-6 6"]), html[dir="rtl"] svg:has(> path[d="M15 6l-6 6 6 6"]), html[dir="rtl"] svg:has(> path[d="M9 18l6-6-6-6"]), html[dir="rtl"] svg:has(> path[d="M15 18l-6-6 6-6"]) { scale: -1 1; } /* Arrows written into the stylesheet point the other way, and nudge the other way on hover */ html[dir="rtl"]:where(.page-about) .chips a::after { content: '\2190'; } html[dir="rtl"]:where(.page-about) .chips a:hover::after { transform: translateX(-3px); } html[dir="rtl"] .open-btn::after { content: '\2190'; } html[dir="rtl"] .open-btn:hover::after { transform: translateX(-3px); } html[dir="rtl"] .p-open::after { content: '\2190'; } html[dir="rtl"] .person:hover .p-open::after { transform: translateX(-3px); } html[dir="rtl"] .req a.more::after { content: '\2190'; } html[dir="rtl"] .req a.more:hover::after { transform: translateX(-3px); } html[dir="rtl"] .btn-primary::after { content: '\2190'; } html[dir="rtl"] .btn-primary:hover::after { transform: translateX(-3px); } html[dir="rtl"]:where(.page-faq) .links a::after { content: '\2190'; } html[dir="rtl"]:where(.page-faq) .links a:hover::after { transform: translateX(-3px); } html[dir="rtl"]:where(.page-index) .more:hover svg { transform: translateX(-4px); } html[dir="rtl"]:where(.page-madrasah) .sc2:hover > svg { transform: translateX(-4px); } html[dir="rtl"] .m-card a::after { content: '\2190'; } html[dir="rtl"] .m-card a:hover::after { transform: translateX(-4px); } html[dir="rtl"] .toc a.toc-q::after { content: '\2190'; } html[dir="rtl"] .course-foot .btn::after { content: '\2190'; } html[dir="rtl"] .course-foot .btn:hover::after { transform: translateX(-3px); } html[dir="rtl"]:where(.page-quiz) [data-next]::after, html[dir="rtl"]:where(.page-quiz) .item [data-start]::after { content: '\2190'; } html[dir="rtl"]:where(.page-quiz) [data-next]:hover:not(:disabled)::after, html[dir="rtl"]:where(.page-quiz) .item [data-start]:hover::after { transform: translateX(-3px); } html[dir="rtl"]:where(.page-quiz) [data-back]::before { content: '\2192'; } /* Dropdown arrows inside select boxes move to the other side */ html[dir="rtl"]:where(.app) select.in { background-position: left 11px center; } html[dir="rtl"]:where(.page-contact) .field select { background-position: left 16px center; } html[dir="rtl"]:where(.page-enroll) .field select { background-position: left 16px center; } /* An Arabic quote already sits above its translation, and a subject's Arabic name above its transliteration, so in Arabic the second copy is hidden */ html[lang="ar"] .had .en, html[lang="ar"] .band .ar + blockquote, html[lang="ar"] .sg .sub b, html[lang="ar"] .hv .ayah span { display: none; } /* Words that live in the stylesheet */ html[lang="ar"]:where(.page-madrasah) .plan.f::before { content: 'الأشمل'; } html[lang="ar"] .opt.good::after { content: 'صحيح'; } html[lang="ar"] .opt.wrong::after { content: 'إجابتك'; } /* The switch */ .lang { position: relative; flex: none; font-family: 'Inter', sans-serif; z-index: 60; } .nav-pill.has-lang .nav-links, .pill.has-lang > .links { margin-inline-start: auto; } .nav-pill > .lang, .pill > .lang { margin-inline-start: 18px; } .lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line, #E3EAF0); background: #fff; color: var(--ink, #094570); font: 600 13.5px/1 'Inter', sans-serif; cursor: pointer; transition: border-color .2s, background .2s; white-space: nowrap; } .lang-btn:hover, .lang.open .lang-btn { border-color: #C9D8E4; background: var(--wash, #F4F8FB); } .lang-btn:focus-visible, .lang-menu button:focus-visible { outline: 2px solid var(--sky-d, #3E97D9); outline-offset: 2px; } .lang-btn svg { flex: none; color: var(--sky-d, #3E97D9); } .top nav .lang-btn { height: 38px; } .lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 196px; padding: 6px; background: #fff; border: 1px solid var(--line, #E3EAF0); border-radius: 14px; box-shadow: 0 1px 2px rgba(6,47,77,.05), 0 18px 40px -20px rgba(6,47,77,.35); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .18s, transform .18s, visibility .18s; } .lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; } .lang-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--text, #0E2A3D); font: 500 14.5px/1.2 'Inter', sans-serif; text-align: start; cursor: pointer; } .lang-menu button:hover { background: var(--wash, #F4F8FB); color: var(--ink, #094570); } .lang-menu button[aria-checked="true"] { color: var(--ink, #094570); font-weight: 600; } .lang-tick { color: var(--sky-d, #3E97D9); visibility: hidden; } .lang-menu button[aria-checked="true"] .lang-tick { visibility: visible; } .lang-menu .lang-more { margin-top: 4px; border-top: 1px solid var(--line, #E3EAF0); border-radius: 0 0 10px 10px; color: var(--muted, #5B6E7F); font-size: 13.5px; } .lang-gt { display: none; padding: 8px 6px 4px; font-size: 12px; color: var(--muted, #5B6E7F); } .lang.gt .lang-gt { display: block; } .lang.gt .lang-more { display: none; } .lang-gt select.goog-te-combo { width: 100%; margin: 0 0 6px !important; padding: 8px 10px; border: 1px solid var(--line, #E3EAF0); border-radius: 10px; background: #fff; color: var(--text, #0E2A3D); font: 500 14px 'Inter', sans-serif; } .lang-gt .goog-te-gadget { font-size: 11px !important; color: var(--muted, #5B6E7F) !important; } .lang-float { position: fixed; top: 14px; inset-inline-end: 14px; z-index: 95; } .lang-float .lang-btn { box-shadow: 0 6px 20px -10px rgba(6,47,77,.35); } /* Google Translate: no top banner, no hover pop-ups */ html.translated-ltr body, html.translated-rtl body { top: 0 !important; } iframe.goog-te-banner-frame, body > .skiptranslate > iframe, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } @media (max-width: 1240px) and (min-width: 1121px) { .pill.has-lang > .links { gap: 17px; } } @media (min-width: 1121px) { .pill > .lang { margin-inline-start: 12px; } .pill > .lang .lang-btn { padding: 0 11px; } .pill > .lang .lang-cur { display: none; } } @media (max-width: 1120px) { .pill > .lang { margin-inline-start: auto; margin-inline-end: 10px; } .pill > .lang .lang-btn { height: 44px; border-radius: 10px; } } @media (max-width: 1180px) and (min-width: 961px) { /* room is tight before the menu folds away: globe only, slightly closer links */ .nav-pill.has-lang .nav-links { gap: 20px; } .nav-pill > .lang { margin-inline-start: 12px; } .nav-pill > .lang .lang-btn { padding: 0 11px; } .nav-pill > .lang .lang-cur { display: none; } } @media (max-width: 960px) { .nav-pill > .lang { margin-inline-start: auto; margin-inline-end: 10px; } .nav-pill > .lang .lang-btn { height: 44px; border-radius: 10px; } } @media (max-width: 480px) { .top nav .lang-btn { height: 34px; padding: 0 10px; font-size: 12.5px; } .top nav .lang-btn svg { display: none; } } /* ---------- class times (programme pages) ---------- */ :where(.site) .when-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } :where(.site) .when-card { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 24px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); } :where(.site) .when-card b { font-family: var(--h-f); font-weight: 500; font-size: 19px; letter-spacing: -.02em; color: var(--text); } :where(.site) .when-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; } :where(.site) .when-i { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 12px; color: #fff; background: linear-gradient(180deg, var(--h-tide), var(--h-ink)); } :where(.site) .when-card:last-child { background: linear-gradient(180deg, #0C3048, var(--h-ink)); box-shadow: none; } :where(.site) .when-card:last-child b { color: #fff; } :where(.site) .when-card:last-child p { color: rgba(255,255,255,.7); } :where(.site) .when-card:last-child .when-i { background: rgba(255,255,255,.12); color: var(--h-sky); } @media (max-width: 820px) { :where(.site) .when-grid { grid-template-columns: 1fr; } } /* ========================================================================== Glass design on the portals Student, teacher and admin pages move onto the website's palette: a dark glass top bar, a night-blue sign-in screen, pill buttons, Geist headings and night-blue welcome panels. Layout and behaviour are unchanged. ========================================================================== */ :root.app { --ink: #0F4460; --deep: #0A2B40; --sky-d: #2D7DA3; --sky-l: #DCEBF2; --wash: #F2F0EB; --line: #E2DED5; --text: #13212B; --muted: #5E6B73; --d: 'Geist', 'Inter', system-ui, sans-serif; --display: var(--d); --ring: 0 0 0 1px #E2DED5; } .app body { background: var(--h-paper); } .app :is(h1, h2, h3, h4) { font-family: var(--d); font-weight: 500; letter-spacing: -.03em; } .app :is(h3, h4) { letter-spacing: -.02em; } .app .big, .app .tile b, .app .mark b { font-family: var(--d); font-weight: 500; letter-spacing: -.03em; } /* top bar: dark glass */ .app header.top { background: rgba(6,21,33,.88); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; } .app header.top .brand { color: #fff; font-family: var(--h-f); font-weight: 500; letter-spacing: -.02em; } .app header.top .brand svg { fill: #fff; } .app header.top .brand em { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); font-family: var(--h-f); font-weight: 500; } .app header.top .btn { border-radius: 999px; font-family: var(--h-f); font-weight: 500; } .app header.top .btn-line { background: rgba(255,255,255,.08); color: #fff; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } .app header.top .btn-line:hover { background: rgba(255,255,255,.15); } .app header.top .btn-ink { background: #fff; color: var(--h-ink); border-color: #fff; } .app header.top .btn-ink:hover { background: #E9EEF1; } .app header.top .lang-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; } .app header.top .lang-btn:hover, .app header.top .lang.open .lang-btn { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.28); } .app header.top .lang-btn svg { color: var(--h-sky); } /* sign-in screen: night blue behind a white card */ .app main.login { background: radial-gradient(50% 55% at 15% 5%, rgba(59,136,168,.5), transparent 70%), radial-gradient(40% 45% at 92% 18%, rgba(59,136,168,.25), transparent 70%), radial-gradient(60% 50% at 50% 112%, rgba(185,122,78,.35), transparent 72%), linear-gradient(180deg, var(--h-tide) 0%, var(--h-deep) 55%, var(--h-ink) 100%); } .app .lbox { border-radius: 26px; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 40px 80px -30px rgba(0,0,0,.7); } .app .lbox h1 { color: var(--text); font-weight: 500; letter-spacing: -.035em; } .app .lbox .crest { background: linear-gradient(180deg, var(--h-tide), var(--h-ink)); } .app .lbox .crest svg[fill]:not([fill="none"]) { fill: #fff; } .app .lbox .crest svg[stroke] { stroke: #fff; } .app .lbox .kick { letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; } .app .lbox .kick::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sky-d); } .app .lbox .demo { background: #EEF4F7; color: var(--text); border-radius: 14px; } .app .lbox :is(input, select) { border-radius: 12px; } /* buttons: pills in the website's ink */ .app .btn { border-radius: 999px; font-family: var(--h-f); font-weight: 500; letter-spacing: -.01em; } .app .btn-ink { background: var(--h-ink); border-color: var(--h-ink); color: #fff; } .app .btn-ink:hover { background: var(--deep); } .app .tabs button { font-family: var(--h-f); font-weight: 500; } .app .tabs button[aria-selected="true"] { background: var(--h-ink); color: #fff; } /* welcome panels: night blue like the website hero */ .app :is(section.greet, section.hero) { position: relative; isolation: isolate; overflow: hidden; color: #fff; border: 0; box-shadow: 0 30px 60px -40px rgba(6,21,33,.8); background: radial-gradient(45% 80% at 12% 0%, rgba(59,136,168,.55), transparent 70%), radial-gradient(35% 70% at 88% 10%, rgba(110,180,205,.3), transparent 70%), radial-gradient(50% 70% at 60% 130%, rgba(185,122,78,.35), transparent 72%), linear-gradient(180deg, #0F3E58, var(--h-ink)); } .app :is(section.greet, section.hero)::before, .app :is(section.greet, section.hero)::after { opacity: .35; } .app :is(section.greet, section.hero) :is(h1, h2) { color: #fff; } .app :is(section.greet, section.hero) :is(small, p) { color: rgba(255,255,255,.7); } .app :is(section.greet, section.hero) small { letter-spacing: 0; text-transform: none; font-weight: 500; } .app :is(section.greet, section.hero) .chips span { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); } .app :is(section.greet, section.hero) .chips span:last-child { background: #fff; color: var(--h-ink); box-shadow: none; } .app :is(section.greet, section.hero) .btn-ink { background: #fff; color: var(--h-ink); border-color: #fff; } @media (max-width: 480px) { .app header.top > div { padding-inline: 14px; gap: 8px; } .app header.top nav { gap: 6px; } .app header.top nav .btn { min-height: 36px; padding: 8px 12px; font-size: 13px; } .app header.top:has(#out:not([hidden])) .brand { font-size: 0; gap: 0; } .app header.top .lang-btn { height: 36px; padding: 0 10px; } .app header.top .brand { font-size: 15px; white-space: nowrap; } .app header.top .brand em { display: none; } } /* ---------- anthem (About page) ---------- */ .site .anthem { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4.5vw, 56px); border-radius: 28px; color: #fff; background: radial-gradient(45% 80% at 10% 0%, rgba(59,136,168,.6), transparent 70%), radial-gradient(40% 70% at 95% 100%, rgba(185,122,78,.4), transparent 72%), linear-gradient(180deg, #0F3E58, var(--h-ink)); } .site .anthem-copy h2 { color: #fff; margin: 10px 0 10px; font-size: clamp(28px, 3.4vw, 40px); } .site .anthem-copy p { color: rgba(255,255,255,.7); margin: 0; } .site .anthem-copy .kicker { color: rgba(255,255,255,.7); } .site .anthem-copy .kicker::before { background: var(--h-sand); } .site .anthem-player { --p: 0%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 22px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .site .anthem-play { display: grid; place-items: center; width: 60px; height: 60px; border: 0; border-radius: 50%; background: #fff; color: var(--h-ink); cursor: pointer; box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); transition: transform .2s var(--h-ease); } .site .anthem-play:hover { transform: scale(1.05); } .site .anthem-play:focus-visible, .site .anthem-dl:focus-visible { outline: 2px solid var(--h-sky); outline-offset: 3px; } .site .anthem-play .i-play { margin-inline-start: 3px; } .site .anthem-play .i-pause, .site .anthem-player.is-playing .anthem-play .i-play { display: none; } .site .anthem-player.is-playing .anthem-play .i-pause { display: block; } .site .anthem-track { position: relative; min-width: 0; } .site .anthem-wave { display: flex; align-items: center; gap: 2px; height: 46px; overflow: hidden; } .site .anthem-wave i { flex: 1; height: var(--h); min-width: 2px; border-radius: 2px; background: rgba(255,255,255,.28); transition: background .15s; } .site .anthem-wave i.on { background: var(--h-sand); } .site .anthem-seek { position: absolute; inset: 0 0 22px 0; width: 100%; height: 46px; margin: 0; opacity: 0; cursor: pointer; } .site .anthem-seek:focus-visible + .anthem-meta { color: #fff; } .site .anthem-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.6); } .site .anthem-dl { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } .site .anthem-dl:hover { background: rgba(255,255,255,.16); } @media (max-width: 820px) { .site .anthem { grid-template-columns: 1fr; } .site .anthem-player { gap: 14px; padding: 14px 16px; } .site .anthem-play { width: 52px; height: 52px; } .site .anthem-player { grid-template-columns: auto 1fr auto; row-gap: 16px; } .site .anthem-track { grid-column: 1 / -1; grid-row: 2; } .site .anthem-dl { grid-column: 3; grid-row: 1; } .site .anthem-wave i { min-width: 0; } } /* anthem words */ .site .anthem-words { grid-column: 1 / -1; margin-top: clamp(8px, 1.5vw, 16px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid rgba(255,255,255,.12); } .site .anthem-words-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .site .anthem-words-head h3 { margin: 0; color: #fff; font-size: 20px; } .site .anthem-mean { padding: 9px 16px; border: 0; border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font: 500 13.5px/1 var(--h-f); cursor: pointer; } .site .anthem-mean:hover, .site .anthem-mean[aria-pressed="true"] { background: rgba(255,255,255,.16); } .site .anthem-mean:focus-visible { outline: 2px solid var(--h-sky); outline-offset: 3px; } .site .anthem-lyrics { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .site .anthem-lyrics li { padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,.1); } .site .anthem-lyrics li:last-child { border-bottom: 0; } .site .lyr-ar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px clamp(24px, 5vw, 72px); margin: 0; font-family: 'Amiri', 'IBM Plex Sans Arabic', serif; font-weight: 400; font-size: clamp(20px, 2.1vw, 25px); line-height: 1.9; color: #fff; text-align: center; } .site .lyr-en { display: none; margin: 6px auto 0; max-width: 680px; text-align: center; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.62); } .site .anthem-lyrics.show-en .lyr-en { display: block; } html[lang="ar"] .site .anthem-mean, html[lang="ar"].site .anthem-mean, html[lang="ar"].site .lyr-en { display: none !important; } @media (max-width: 640px) { .site .lyr-ar { grid-template-columns: 1fr; gap: 0; } .site .lyr-ar span:first-child { text-align: right; } .site .lyr-ar span:last-child { text-align: left; } } /* card payment (enrol step 3) */ .page-enroll .btn-card { width: 100%; margin: 4px 0 14px; } .page-enroll .btn-card:disabled { opacity: .7; cursor: progress; } .page-enroll .card-cancelled { margin: 0 0 18px; } .page-payment-success .ref { margin-top: -4px; font-size: 14.5px; } .page-payment-success .ref[hidden] { display: none; } /* ---------- Skills School portals (share the Academy portal styles) ---------- */ .page-skills-dashboard .pbody { padding: 0 18px 16px; display: grid; gap: 10px; } .page-skills-dashboard .pbody .sub { margin: 0; } .page-skills-dashboard .fb { padding: 12px 14px; border-radius: 14px; background: #EEF4F7; } .page-skills-dashboard .fb b { display: block; font-size: 13px; color: var(--deep); margin-bottom: 4px; } .page-skills-dashboard .fb p { margin: 0; font-size: 14.5px; color: var(--text); } .page-skills-dashboard .pform { display: grid; gap: 10px; } .page-skills-dashboard .pform label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 4px; } .page-skills-dashboard .pform input { width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: inherit; } .page-skills-dashboard .pform .btn { justify-self: start; } .page-skills-dashboard .lnk, .page-skills-tutor .lnk { color: var(--sky-d); font-weight: 500; } .page-skills-tutor .subm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); } .page-skills-tutor .subm:first-child { border-top: 0; padding-top: 0; } .page-skills-tutor .subm b { display: block; color: var(--deep); } .page-skills-tutor .subm small { display: block; color: var(--muted); font-size: 12.5px; margin-bottom: 4px; } .page-skills-tutor .subm .frm { margin: 0; gap: 8px; } .page-skills-tutor textarea.in { resize: vertical; min-height: 96px; } @media (max-width: 720px) { .page-skills-tutor .subm { grid-template-columns: 1fr; } .page-skills-dashboard .pbody { padding: 0 14px 14px; } } /* live chat entry in the green "Chat with us" menu (js/chat.js) */ .wa-menu .wa-live { display: flex; flex-direction: column; align-items: flex-start; padding: 11px 14px; border: 0; border-radius: 10px; background: #EEF6F1; color: #0B5A31; font: 600 14px/1.3 inherit; font-family: inherit; text-align: start; cursor: pointer; } .wa-menu .wa-live span { display: inline-flex; align-items: center; gap: 8px; } .wa-menu .wa-live span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #22A35A; box-shadow: 0 0 0 3px rgba(34,163,90,.18); } .wa-menu .wa-live small { font-weight: 500; color: #3E6B52; font-size: 13px; } .wa-menu .wa-live:hover { background: #E1F0E7; } .wa-menu .wa-live:focus-visible { outline: 2px solid #85CCFF; outline-offset: 3px; } /* Madrasah: Muraajah banner (light, so it reads as open next to the closed one-year track) */ .site.page-madrasah .year.mur { margin-top: 16px; background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); } .site.page-madrasah .year.mur h3 { color: var(--text); } .site.page-madrasah .year.mur p { color: var(--muted); } .site.page-madrasah .year.mur .price, .site.page-madrasah .year.mur .price b { color: var(--text); } .site.page-madrasah .mur-k { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: #fff; background: linear-gradient(180deg, var(--h-tide), var(--h-ink)); } /* ========================================================================== Articles (index and article pages) ========================================================================== */ .site.page-articles .art-hero .hero-copy { max-width: 860px; } .site.page-articles .art-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 14px; color: rgba(255,255,255,.75) !important; } .site.page-articles .art-back::before { content: ''; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } html[dir="rtl"] .site.page-articles .art-back::before, html[dir="rtl"].site.page-articles .art-back::before { transform: rotate(-135deg); } .site.page-articles .art-back:hover { color: #fff !important; } .site.page-articles .art-sub { font-size: clamp(17px, 1.6vw, 20px); max-width: 60ch; } .site.page-articles .art-byline { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.6) !important; } .site.page-articles .art-body { max-width: 720px; margin: 0 auto; padding: clamp(48px, 6vw, 80px) 20px 8px; color: var(--text); } .site.page-articles .art-body p, .site.page-articles .art-body li { font-size: 18px; line-height: 1.75; color: #24323B; } .site.page-articles .art-body p { margin: 0 0 20px; } .site.page-articles .art-body h2 { margin: 44px 0 14px; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; color: var(--text); } .site.page-articles .art-body ul { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 12px; } .site.page-articles .art-body li { position: relative; padding-inline-start: 26px; } .site.page-articles .art-body li::before { content: ''; position: absolute; inset-inline-start: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--sky-d); } .site.page-articles .art-q { margin: 32px 0 36px; padding: clamp(24px, 3vw, 34px); border-radius: 22px; color: #fff; background: radial-gradient(60% 90% at 10% 0%, rgba(59,136,168,.55), transparent 70%), linear-gradient(180deg, #0F3E58, var(--h-ink)); } .site.page-articles .art-q blockquote { margin: 0; } .site.page-articles .art-q .art-q-ar { margin: 0 0 14px; font-family: 'Amiri', 'IBM Plex Sans Arabic', serif; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.9; color: #fff; text-align: right; } .site.page-articles .art-q .art-q-en { margin: 0; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.8); } .site.page-articles .art-q figcaption { margin-top: 14px; font-size: 13.5px; color: var(--h-sand); } html[lang="ar"] .site.page-articles .art-q .art-q-en, html[lang="ar"].site.page-articles .art-q .art-q-en { display: none; } .site.page-articles .art-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .site.page-articles .art-filter button { padding: 9px 16px; border: 0; border-radius: 999px; background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); font: 500 14px/1 var(--h-f); cursor: pointer; } .site.page-articles .art-filter button[aria-pressed="true"] { background: var(--h-ink); color: #fff; box-shadow: none; } .site.page-articles .art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .site.page-articles .art-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 22px; border-radius: 22px; background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); transition: transform .25s var(--h-ease), box-shadow .25s; } .site.page-articles .art-card[hidden] { display: none; } .site.page-articles .art-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px #CFCABF, 0 24px 48px -28px rgba(6,21,33,.45); } .site.page-articles .art-card h3 { margin: 0; font-size: 21px; line-height: 1.25; color: var(--text); } .site.page-articles .art-card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; flex: 1; } .site.page-articles .art-cat { align-self: flex-start; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--h-tide); background: #E4EEF2; } .site.page-articles .art-meta { font-size: 13px; color: var(--muted); } .site.page-articles .art-more .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 900px) { .site.page-articles .art-grid, .site.page-articles .art-more .art-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .site.page-articles .art-body p, .site.page-articles .art-body li { font-size: 17px; } } .site.page-articles header.hero { padding-bottom: clamp(56px, 7vw, 96px); } .site.page-articles .art-back { display: flex; width: max-content; } .site.page-articles .art-hero .kicker { display: flex; width: max-content; } .site.page-madrasah .mur-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .site.page-madrasah .mur-opt { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 18px; background: var(--h-paper); } .site.page-madrasah .mur-opt .btn { justify-self: start; } .site.page-madrasah .mur-l { font-size: 13px; font-weight: 500; color: var(--muted); } @media (max-width: 520px) { .site.page-madrasah .mur-opts { grid-template-columns: 1fr; } } .site.page-madrasah .mur-opt .price b { font-size: 24px; } .site.page-madrasah .mur-opt .price { white-space: nowrap; font-size: 14px; } /* Articles: call-to-action box spacing (the page-specific rules above don't cover this page) */ .site.page-articles .cta-box { padding: clamp(44px, 6vw, 72px) clamp(20px, 4vw, 48px); } .site.page-articles .cta-box h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; max-width: 18em; margin: 0 auto 14px; } .site.page-articles .cta-box p { font-size: 17px; line-height: 1.6; max-width: 46ch; margin: 0 auto 28px; } .site.page-articles .art-body + .sec { padding-top: clamp(32px, 4vw, 56px); } @media (max-width: 600px) { .site.page-articles .cta-box p { font-size: 15px; } } .site.page-articles .art-more .head { margin-bottom: 24px; } .site.page-articles .art-more { padding-top: 0; } /* Articles: in-article call-outs, sources, stronger end call-to-action, featured card */ .site.page-articles .art-aside { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 30px 0 34px; padding: 20px 22px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); border-inline-start: 4px solid var(--sky-d); } .site.page-articles .art-aside b { display: block; margin-bottom: 4px; font-family: var(--h-f); font-weight: 500; font-size: 17px; color: var(--text); } .site.page-articles .art-aside p { margin: 0 !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--muted) !important; } .site.page-articles .art-aside .btn { flex: none; white-space: nowrap; } .site.page-articles .btn-wa-soft { display: inline-flex; align-items: center; gap: 8px; background: #E8F6EE; color: #0B6B3A; box-shadow: inset 0 0 0 1px #BFE5CF; border-radius: 999px; padding: 12px 20px; font: 500 15px/1 var(--h-f); } .site.page-articles .btn-wa-soft:hover { background: #D9F0E3; } .site.page-articles .cta-box .btn-wa-soft { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); } .site.page-articles .cta-box .btn-wa-soft:hover { background: rgba(255,255,255,.18); } .site.page-articles .cta-box .kicker { justify-content: center; margin-bottom: 12px; color: rgba(255,255,255,.7); } .site.page-articles .cta-box .kicker::before { background: var(--h-sand); } .site.page-articles .art-cta-note { margin: 18px auto 0 !important; font-size: 13.5px !important; color: rgba(255,255,255,.55) !important; } .site.page-articles .art-src { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); } .site.page-articles .art-src h2 { margin: 0 0 12px !important; font-size: 18px !important; color: var(--muted) !important; } .site.page-articles .art-src ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; } .site.page-articles .art-src li { padding: 0 !important; font-size: 14px !important; line-height: 1.55 !important; color: var(--muted) !important; } .site.page-articles .art-src li::before { display: none; } .site.page-articles .art-src ol { direction: ltr; text-align: left; } .site.page-articles .art-card-big { grid-column: span 2; background: linear-gradient(180deg, #0F3E58, var(--h-ink)); box-shadow: none; } .site.page-articles .art-card-big h3 { color: #fff; font-size: 26px; } .site.page-articles .art-card-big p { color: rgba(255,255,255,.72); } .site.page-articles .art-card-big .art-cat { background: rgba(255,255,255,.12); color: #fff; } .site.page-articles .art-card-big .art-meta { color: rgba(255,255,255,.6); } .site.page-articles .art-meta { display: flex; justify-content: space-between; align-items: center; } .site.page-articles .art-go { font-size: 16px; transition: transform .2s var(--h-ease); } html[dir="rtl"] .site.page-articles .art-go, html[dir="rtl"].site.page-articles .art-go { transform: scaleX(-1); } .site.page-articles .art-card:hover .art-go { transform: translateX(3px); } .site.page-articles .art-index-cta { margin-top: 28px; } @media (max-width: 900px) { .site.page-articles .art-card-big { grid-column: auto; } } @media (max-width: 640px) { .site.page-articles .art-aside { flex-direction: column; align-items: flex-start; } } .site.page-articles .art-more { padding-top: clamp(40px, 5vw, 64px); } .site.page-articles .art-more .art-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .site.page-articles .art-more .art-grid { grid-template-columns: 1fr; } } /* ========================================================================== Pay fees page (pay.html) ========================================================================== */ .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-sec { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; max-width: 1040px; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) :is(.pf-card, .pf-side) { background: #fff; border-radius: 24px; box-shadow: var(--shadow); padding: clamp(22px, 3.2vw, 36px); } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-side { background: transparent; box-shadow: inset 0 0 0 1px var(--line); } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-side h2 { font-size: 22px; margin: 0 0 10px; color: var(--text); } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-side p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 18px; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-side .btn { width: 100%; justify-content: center; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-small { margin: 16px 0 0 !important; font-size: 14px !important; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-small a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) label { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 8px; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) label small { font-weight: 400; color: var(--muted); } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) :is(input, select) { width: 100%; min-width: 0; font-size: 16px; color: var(--text); background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 15px; transition: border-color .2s, box-shadow .2s; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) :is(input, select):focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(133,204,255,.35); } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) #pfId { font-size: 18px; letter-spacing: .04em; text-transform: uppercase; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) #pfId::placeholder { text-transform: none; letter-spacing: 0; color: #93A4B3; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-row { display: flex; gap: 10px; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-row .btn { flex: none; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-help { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-err { margin: 10px 0 0; font-size: 14px; color: #B42318; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-err:empty { display: none; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 24px; box-shadow: 0 0 0 1px var(--line); } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-sum > div { background: var(--wash, #F4F8FB); padding: 14px 16px; min-width: 0; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-sum span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-sum b { display: block; font-size: 15.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-pill { display: inline-block; vertical-align: 1px; font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; margin-inline-start: 6px; background: #EAF6EF; color: #1B7F4B; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-pill:is(.due) { background: #FFF4E0; color: #9A5B00; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-pill:is(.overdue) { background: #FDECEA; color: #B42318; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-pill:is(.exempt) { background: #EEF1F4; color: var(--muted); } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-pay select { margin-bottom: 18px; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-after { margin: 14px 0 18px; font-size: 14.5px; color: var(--text); } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-after:empty { display: none; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-btn { width: 100%; justify-content: center; font-size: 16px; padding-block: 15px; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-btn:disabled { opacity: .6; cursor: progress; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-note { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-note svg { flex: none; margin-top: 2px; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-warn { background: #FFF4E0; color: #7A4A00; border-radius: 14px; padding: 12px 14px; margin: 0 0 18px; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-result .pf-warn { margin: 0; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-link { margin-top: 20px; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-done { display: flex; gap: 14px; align-items: flex-start; background: #EAF6EF; color: #14532D; border-radius: 16px; padding: 16px 18px; margin-bottom: 22px; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-done b { display: block; margin-bottom: 2px; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-done span:not(.pf-tick) { font-size: 14px; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-tick { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #1B7F4B; color: #fff; display: grid; place-items: center; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-acct { border-radius: 16px; box-shadow: 0 0 0 1px var(--line); margin-bottom: 18px; overflow: hidden; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-acct div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 14.5px; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-acct div + div { border-top: 1px solid var(--line); } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-acct span { color: var(--muted); } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) [hidden] { display: none !important; } @media (max-width: 860px) { .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-wrap { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-row { flex-direction: column; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-row .btn { width: 100%; justify-content: center; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-sum { grid-template-columns: 1fr; } } /* Pay by card buttons on the student dashboards */ .app .pay-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .app .pay-btns .btn { flex: 1 1 auto; } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-timetable, .page-trial) header.hero { padding-bottom: clamp(56px, 7vw, 96px); } .site:is(.page-pay, .page-waitlist, .page-refer, .page-sponsor, .page-timetable, .page-trial) header.hero .hero-copy p { max-width: 62ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; } /* Waitlist page (waitlist.html); shares the Pay fees layout */ .site:is(.page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .wl-f { margin-bottom: 18px; min-width: 0; } .site:is(.page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .wl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .site:is(.page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) textarea { width: 100%; font: inherit; font-size: 16px; color: var(--text); background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 15px; resize: vertical; } .site:is(.page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(133,204,255,.35); } .site:is(.page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .wl-hp { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; clip-path: inset(50%); } .site:is(.page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .wl-p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 16px; } .site:is(.page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .wl-acts { display: flex; flex-wrap: wrap; gap: 10px; } .site:is(.page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .wl-acts .btn { flex: 1 1 auto; justify-content: center; } .site:is(.page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .wl-steps { margin: 0 0 22px; padding: 0; list-style: none; counter-reset: wl; display: grid; gap: 14px; } .site:is(.page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .wl-steps li { counter-increment: wl; position: relative; padding-inline-start: 40px; color: var(--muted); font-size: 15px; line-height: 1.55; } .site:is(.page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .wl-steps li::before { content: counter(wl); position: absolute; inset-inline-start: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--h-ink); color: #fff; font-size: 13px; font-weight: 600; display: grid; place-items: center; } .site:is(.page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .wl-steps b { color: var(--text); font-weight: 600; } @media (max-width: 480px) { .site:is(.page-waitlist, .page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .wl-2 { grid-template-columns: 1fr; } } /* "Join the waitlist" on closed plans (madrasah, admissions, enroll) */ .btn.btn-locked.btn-wl { cursor: pointer; } .btn.btn-locked.btn-wl:hover { background: #fff; color: var(--ink); border-color: var(--ink); } .wl-inline { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } a.wl-shut { cursor: pointer; text-decoration: none; } a.wl-shut:hover { color: var(--ink); border-color: var(--ink); background: #fff; } .plan-opt.closed .plan-opt-shut.wl-shut { cursor: pointer; } /* ========================================================================== Newsletter signup box (articles pages, newsletter.html) ========================================================================== */ .site .nl-wrap { max-width: 920px; margin: 0 auto; } .site.page-articles .nl-wrap { padding-top: clamp(32px, 4vw, 48px); padding-bottom: 8px; } .site.page-articles #artGrid + .nl-box { margin-top: clamp(36px, 4vw, 56px); } .site.page-articles .art-index-cta { margin-top: 20px; } .site .nl-box { background: var(--h-ink); color: #fff; border-radius: 28px; padding: clamp(24px, 3.4vw, 40px); position: relative; overflow: hidden; isolation: isolate; } .site .nl-box::before { content: ''; position: absolute; inset: auto -20% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(59,136,168,.45), transparent); z-index: -1; pointer-events: none; } .site .nl-intro { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; } .site .nl-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); display: grid; place-items: center; color: var(--h-sky); } .site .nl-box h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; margin: 0 0 6px; color: #fff; } .site .nl-box p { margin: 0; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.6; } .site .nl-row { display: flex; gap: 10px; } .site .nl-row input { flex: 1 1 0; min-width: 0; font: inherit; font-size: 16px; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 13px 18px; } .site .nl-row input::placeholder { color: rgba(255,255,255,.5); } .site .nl-row input:focus { outline: none; border-color: var(--h-sky); box-shadow: 0 0 0 3px rgba(133,204,255,.25); } .site .nl-row input[name=email] { flex-grow: 1.6; } .site .nl-box .btn-ink { flex: none; background: #fff; color: var(--h-ink); border-color: #fff; } .site .nl-box .btn-ink:hover { background: var(--h-paper); } .site .nl-box .btn-ink:disabled { opacity: .65; cursor: progress; } .site .nl-ints { border: 0; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .site .nl-ints legend { float: left; margin-inline-end: 6px; font-size: 13.5px; color: rgba(255,255,255,.65); } .site .nl-ints legend small { color: rgba(255,255,255,.45); } .site .nl-chip { position: relative; cursor: pointer; } .site .nl-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .site .nl-chip span { display: inline-block; font-size: 13.5px; padding: 6px 12px; border-radius: 999px; color: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); transition: background .2s, color .2s; } .site .nl-chip input:checked + span { background: var(--h-sky); color: var(--h-ink); box-shadow: none; } .site .nl-chip input:focus-visible + span { outline: 2px solid var(--h-sky); outline-offset: 2px; } .site .nl-hp, .site .nl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .site .nl-msg { margin-top: 14px !important; font-size: 14.5px !important; } .site .nl-msg:empty { display: none; } .site .nl-msg.ok { color: #9BE3B8 !important; } .site .nl-msg.bad { color: #FFB4A8 !important; } .site .nl-page { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); } .site .nl-unsub { background: #FFF4E0; color: #7A4A00; border-radius: 16px; padding: 14px 18px; margin-bottom: 20px; font-size: 15px; } .site .nl-unsub.ok { background: #EAF6EF; color: #14532D; } .site .nl-unsub p { margin: 0; } .site .nl-more { text-align: center; margin-top: 18px; } .site .nl-more a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .site.page-newsletter header.hero { padding-bottom: clamp(56px, 7vw, 96px); } @media (max-width: 640px) { .site .nl-row { flex-direction: column; } .site .nl-row .btn { width: 100%; justify-content: center; } .site .nl-intro { flex-direction: column; gap: 12px; } } /* ========================================================================== Academy portals: tasks, CBT, attendance, leaderboard, reports (acx-*) ========================================================================== */ :root:where(.page-academy-dashboard, .page-academy-tutor, .page-academy-admin) { --sky-l: #E3F2FD; } .app .acx-badge, .app .acx-tabs i { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 6px; border-radius: 999px; background: #F97066; color: #fff; font-style: normal; font-size: 11.5px; font-weight: 700; line-height: 1; } .page-academy-dashboard .acx-tabs { margin: 16px 0 0; } .page-academy-dashboard .acx-solo { margin-top: 16px; } .page-academy-dashboard #view > article.c { display: block; } .app .acx-lnk { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .app .acx-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .app .acx-danger { color: #B42318 !important; box-shadow: inset 0 0 0 1px #F4B8B2 !important; border-color: transparent !important; } .app .acx-scroll { overflow-x: auto; } .app .acx-scroll table { min-width: 620px; } .page-academy-dashboard .acx-perf { margin-bottom: 8px; } .page-academy-dashboard .acx-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; } /* items (tasks) */ .app .acx-item { background: var(--wash); border-radius: 16px; margin-top: 10px; } .app .acx-item[open] { background: #fff; box-shadow: 0 0 0 1.5px var(--ink); } .app .acx-item > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; } .app .acx-item > summary::-webkit-details-marker { display: none; } .app .acx-item > summary b { display: block; color: var(--deep); font-size: 15px; } .app .acx-item > summary small { color: var(--muted); font-size: 13px; } .app .acx-body { padding: 0 18px 18px; } .app .acx-instr { background: var(--wash); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 1.6; color: var(--text); margin-bottom: 12px; overflow-wrap: anywhere; } .app .acx-item[open] .acx-instr { background: #F4F8FB; } .app .acx-fb { background: #EAF6EF; color: #14532D; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 14.5px; } .app .acx-fb p { margin-top: 4px; } .app .acx-mine { border-inline-start: 3px solid var(--sky); padding-inline-start: 12px; margin-bottom: 12px; font-size: 14.5px; overflow-wrap: anywhere; } .app .acx-form { display: grid; gap: 8px; } .app .acx-form label { font-size: 13.5px; font-weight: 600; color: var(--deep); } .app .acx-form label small { font-weight: 400; color: var(--muted); } .app .acx-form :is(textarea, input) { width: 100%; font: inherit; font-size: 15px; padding: 11px 13px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--text); } .app .acx-form :is(textarea, input):focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(62,151,217,.15); } .app .acx-form .btn { justify-self: start; margin-top: 4px; } /* CBT list */ .app .acx-test { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--wash); border-radius: 16px; padding: 14px 18px; margin-top: 10px; } .app .acx-test b { display: block; color: var(--deep); font-size: 15px; } .app .acx-test small { display: block; color: var(--muted); font-size: 13px; } .app .acx-test-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .app .btn-sm { padding: 8px 14px; font-size: 13.5px; } /* CBT player */ .app .acx-run { max-width: 820px; margin: 16px auto 0; } .app .acx-run-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--ink); color: #fff; border-radius: 24px; padding: 22px 26px; } .app .acx-run-top small { color: var(--sky); font-weight: 600; font-size: 13.5px; } .app .acx-run-top h1 { font-family: var(--d); font-size: clamp(22px, 3vw, 30px); line-height: 1.15; margin-top: 4px; color: #fff; } .app .acx-time { text-align: center; background: rgba(255,255,255,.1); border-radius: 16px; padding: 10px 16px; min-width: 96px; } .app .acx-time span { display: block; font-size: 12px; color: rgba(255,255,255,.7); } .app .acx-time b { font-size: 24px; font-variant-numeric: tabular-nums; } .app .acx-time b.low { color: #FDA29B; } .app .acx-q { background: #fff; border-radius: 24px; padding: clamp(20px, 3vw, 30px); margin-top: 14px; } .app .acx-qt { font-size: 18px; line-height: 1.55; color: var(--deep); margin: 6px 0 18px; white-space: pre-wrap; overflow-wrap: anywhere; } .app .acx-opts { display: grid; gap: 10px; } .app .acx-opt { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--wash); cursor: pointer; font-size: 15.5px; line-height: 1.45; color: var(--text); transition: box-shadow .15s, background .15s; } .app .acx-opt:hover { box-shadow: 0 0 0 1.5px #C9D8E4; } .app .acx-opt.on { background: #fff; box-shadow: 0 0 0 2px var(--ink); } .app .acx-opt input { position: absolute; opacity: 0; pointer-events: none; } .app .acx-opt:focus-within { outline: 2px solid var(--sky-d); outline-offset: 2px; } .app .acx-key { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 13.5px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px #C9D8E4; } .app .acx-opt.on .acx-key { background: var(--ink); color: #fff; box-shadow: none; } .app .acx-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; } .app .acx-nav .btn:disabled { opacity: .45; cursor: not-allowed; } .app .acx-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .app .acx-grid button { width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--muted); font-weight: 600; font-size: 13.5px; box-shadow: inset 0 0 0 1px var(--line); } .app .acx-grid button.on { background: var(--sky-l); color: var(--ink); box-shadow: none; } .app .acx-grid button.cur { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); } .app .acx-count { text-align: center; margin: 14px 0 30px; } .app .acx-score { background: #fff; border-radius: 24px; text-align: center; padding: 30px; margin-top: 14px; } .app .acx-score b { display: block; font-family: var(--d); font-size: 56px; color: var(--deep); line-height: 1; } .app .acx-score span { color: var(--muted); } .app .acx-h2 { font-family: var(--d); font-size: 20px; color: var(--deep); margin: 26px 0 4px; } .app .acx-rev { background: #fff; border-radius: 18px; padding: 18px 20px; margin-top: 10px; border-inline-start: 4px solid #D0D5DD; } .app .acx-rev.good { border-inline-start-color: #1B7F4B; } .app .acx-rev.bad { border-inline-start-color: #D92D20; } .app .acx-rev .acx-qt { font-size: 16px; margin-bottom: 10px; } .app .acx-rev ul { list-style: none; display: grid; gap: 6px; padding: 0; margin: 0 0 8px; } .app .acx-rev li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; padding: 8px 10px; border-radius: 10px; color: var(--text); } .app .acx-rev li.ans { background: #EAF6EF; } .app .acx-rev li.mine { background: #FEF3F2; } .app .acx-rev li em { margin-inline-start: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); } /* leaderboard */ .app .acx-board { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .app .acx-board li { display: flex; align-items: center; gap: 14px; background: var(--wash); border-radius: 14px; padding: 12px 16px; } .app .acx-board li.me { background: #fff; box-shadow: 0 0 0 2px var(--ink); } .app .acx-board b { display: block; color: var(--deep); } .app .acx-board small { color: var(--muted); font-size: 13px; } .app .acx-board div { flex: 1; min-width: 0; } .app .acx-rank { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .app .acx-rank.r1 { background: #E4C4A2; color: #3D2A16; box-shadow: none; } .app .acx-rank.r2 { background: #D0D5DD; color: #1D2939; box-shadow: none; } .app .acx-rank.r3 { background: #E6B48A; color: #3D2A16; box-shadow: none; } .app .acx-pts { font-family: var(--d); font-size: 20px; color: var(--deep); font-variant-numeric: tabular-nums; } .app .acx-weights { list-style: none; padding: 0; margin: 6px 0 12px; display: grid; gap: 4px; } .app .acx-weights li { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); padding: 6px 0; border-bottom: 1px dashed var(--line); } .app .acx-weights b { color: var(--deep); } /* view mode (mentor or admin looking at a student's dashboard) */ .acx-viewing header.top, .acx-viewing #chatFab, .acx-viewing .chat-fab { display: none !important; } .app .acx-viewbar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #FFF4E0; color: #7A4A00; border-radius: 14px; padding: 10px 14px; margin: 12px 0 12px; font-size: 14px; font-weight: 600; } .acx-ov { position: fixed; inset: 0; z-index: 200; background: rgba(6,21,33,.55); display: grid; place-items: center; padding: 16px; } .acx-ov-in { width: min(1180px, 100%); height: min(92vh, 1000px); background: #EEF3F7; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); } .acx-ov-in iframe { width: 100%; height: 100%; border: 0; display: block; } body.acx-noscroll { overflow: hidden; } /* mentor portal */ .app .acx-tiles5 { grid-template-columns: repeat(5, 1fr); } .app .acx-tiles6 { grid-template-columns: repeat(6, 1fr); } .app .acx-reg { display: grid; gap: 8px; margin: 8px 0 14px; } .app .acx-reg-r { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--wash); border-radius: 12px; padding: 8px 8px 8px 14px; } .app .acx-reg-r b { display: block; color: var(--deep); font-size: 14.5px; } .app .acx-reg-r small { color: var(--muted); font-size: 12.5px; } .app .acx-seg { display: flex; gap: 4px; background: #fff; border-radius: 10px; padding: 3px; box-shadow: var(--ring); } .app .acx-seg label { position: relative; cursor: pointer; } .app .acx-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .app .acx-seg span { display: block; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); } .app .acx-seg label.on span { background: var(--ink); color: #fff; } .app .acx-seg label:nth-child(3).on span { background: #B42318; } .app .acx-seg label:nth-child(4).on span { background: #667085; } .app .acx-seg label:focus-within span { outline: 2px solid var(--sky-d); outline-offset: 1px; } .app .acx-sub { background: var(--wash); border-radius: 12px; padding: 12px 14px; margin-top: 10px; font-size: 14.5px; overflow-wrap: anywhere; } .app .acx-sub-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .app .acx-sub-h small { color: var(--muted); font-size: 12.5px; flex: 1; } .app .acx-markf { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .app .acx-markf input[name=score] { width: 120px; flex: none; } .app .acx-markf input[name=feedback] { flex: 1 1 200px; } .app .acx-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.5; } .app textarea.in { resize: vertical; min-height: 90px; } .app .c.w5 { grid-column: span 5; } .app .c.w7 { grid-column: span 7; } /* admin portal */ .app .acx-cred { background: #EAF6EF; color: #14532D; border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; } .app .acx-cred-r { display: flex; gap: 10px; align-items: center; margin-top: 8px; } .app .acx-cred-r span { width: 110px; color: #3F6B52; font-size: 13.5px; } .app .acx-cred code { font-size: 17px; font-weight: 700; letter-spacing: .04em; background: #fff; padding: 4px 10px; border-radius: 8px; color: var(--deep); } .app .acx-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); margin: 4px 0; } .app details.acx-add { box-shadow: 0 0 0 1.5px dashed var(--line); border: 1.5px dashed #C9D8E4; } .app .acx-bars { display: flex; align-items: flex-end; gap: 8px; height: 170px; padding-top: 20px; } .app .acx-bars div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; } .app .acx-bars i { width: 100%; max-width: 44px; background: var(--sky-d, #3E97D9); border-radius: 8px 8px 3px 3px; display: block; } .app .acx-bars em { position: absolute; font-style: normal; font-size: 12px; font-weight: 600; color: var(--deep); bottom: calc(var(--h, 0) + 4px); } .app .acx-bars span { font-size: 11.5px; color: var(--muted); margin-top: 6px; white-space: nowrap; } .app .acx-bars div em { position: static; order: -1; margin-bottom: 4px; } @media (max-width: 900px) { .app .acx-tiles5, .app .acx-tiles6 { grid-template-columns: repeat(3, 1fr); } .app .c.w5, .app .c.w7 { grid-column: span 12; } } @media (max-width: 560px) { .app .acx-tiles5, .app .acx-tiles6 { grid-template-columns: repeat(2, 1fr); } .app .acx-run-top { padding: 18px; border-radius: 20px; } .app .acx-qt { font-size: 16.5px; } .app .acx-reg-r { padding: 10px; } .app .acx-seg { width: 100%; justify-content: space-between; } .app .acx-seg label { flex: 1; text-align: center; } .app .acx-seg span { padding: 7px 4px; } .acx-ov { padding: 0; } .acx-ov-in { height: 100vh; border-radius: 0; } .app .acx-bars span { font-size: 10px; } } @media print { .app header.top, .app .tabs, .app .acx-acts, .app .foot, #chatFab, .chat-fab { display: none !important; } .app .c { break-inside: avoid; box-shadow: none !important; } } .app details.box > summary small + small { display: block; } .app .fl small { font-weight: 400; color: var(--muted); } .app .acx-bars div { min-width: 0; } @media (max-width: 560px) { .app .acx-bars { gap: 4px; } .app .acx-bars div:nth-child(odd) span { visibility: hidden; } .app .acx-bars em { font-size: 10.5px; } } .page-academy-dashboard .c.w8 { grid-column: span 8; } .page-academy-dashboard .c.w4 { grid-column: span 4; } @media (max-width: 900px) { .page-academy-dashboard .c.w8, .page-academy-dashboard .c.w4 { grid-column: span 12; } } /* Academy Stage 2: classes timetable and mentorship family boards */ .app .acx-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .app .acx-h h2 { margin-bottom: 14px; } .app .acx-stack { display: grid; gap: 16px; align-content: start; padding: 0 !important; background: none !important; box-shadow: none !important; } .app .acx-stack > .c { grid-column: auto; } .app .acx-warn { background: #FFF4E0; color: #7A4A00; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; } .app .acx-class { display: flex; gap: 14px; background: var(--wash); border-radius: 16px; padding: 14px; margin-top: 10px; } .app .acx-class.today { background: #fff; box-shadow: 0 0 0 2px var(--ink); } .app .acx-class.past { background: #F7F9FB; } .app .acx-day { flex: none; width: 54px; text-align: center; background: #fff; border-radius: 12px; padding: 6px 0; box-shadow: inset 0 0 0 1px var(--line); align-self: flex-start; } .app .acx-class.today .acx-day { background: var(--ink); color: #fff; box-shadow: none; } .app .acx-day b { display: block; font-family: var(--d); font-size: 20px; line-height: 1.1; color: inherit; } .app .acx-day span, .app .acx-day em { display: block; font-size: 11.5px; font-style: normal; color: var(--muted); } .app .acx-class.today .acx-day span, .app .acx-class.today .acx-day em { color: rgba(255,255,255,.75); } .app .acx-class-m { flex: 1; min-width: 0; } .app .acx-class-m b { display: block; color: var(--deep); font-size: 15px; } .app .acx-class-m small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; } .app .acx-class-m p { font-size: 14px; color: var(--text); margin-top: 8px; line-height: 1.55; overflow-wrap: anywhere; } .app .acx-class .acx-acts { margin-top: 10px; } .app .acx-compose { background: var(--wash); border-radius: 16px; padding: 14px; margin-bottom: 6px; } .app .acx-compose .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .app .acx-post { border-radius: 16px; padding: 14px 16px; margin-top: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow-wrap: anywhere; } .app .acx-post.ann { background: #F0F7FD; box-shadow: 0 0 0 1px #CFE6F8; } .app .acx-post.hid, .app .acx-reply.hid { opacity: .55; } .app .acx-post p { font-size: 14.5px; line-height: 1.6; color: var(--text); margin-top: 6px; } .app .acx-post-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .app .acx-post-h b { color: var(--deep); font-size: 14.5px; } .app .acx-post-h small { color: var(--muted); font-size: 12.5px; } .app .acx-role { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: #fff; } .app .acx-pin { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #FFF4E0; color: #7A4A00; } .app .acx-post-f { display: flex; gap: 14px; align-items: center; margin-top: 8px; font-size: 13.5px; } .app .acx-del { color: #B42318 !important; margin-inline-start: auto; } .app .acx-post-f .acx-del { margin-inline-start: 0; } .app .acx-replies { border-inline-start: 2px solid var(--line); margin-top: 10px; padding-inline-start: 12px; display: grid; gap: 8px; } .app .acx-reply p { margin-top: 3px; } .app .acx-replyf { margin-top: 10px; } .app .acx-res { display: block; background: var(--wash); border-radius: 12px; padding: 10px 12px; margin-top: 8px; text-decoration: none; } .app .acx-res b { display: block; color: var(--ink); } .app .acx-res span { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app .acx-members { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .app .acx-members li { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--wash); border-radius: 10px; padding: 9px 12px; font-size: 14px; color: var(--text); } .app .acx-members li.me { background: #fff; box-shadow: 0 0 0 1.5px var(--ink); } .app .acx-members b { color: var(--deep); font-variant-numeric: tabular-nums; } .app .acx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .app .acx-chips button { padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: var(--ring, 0 0 0 1px var(--line)); font-weight: 600; font-size: 13.5px; color: var(--muted); } .app .acx-chips button[aria-selected=true] { background: var(--ink); color: #fff; box-shadow: none; } .app .acx-tips { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--muted); } @media (max-width: 900px) { .app .acx-stack { grid-column: span 12 !important; } } @media (max-width: 560px) { .app .acx-compose .row2 { grid-template-columns: 1fr; } .app .acx-class { padding: 12px; gap: 10px; } .app .acx-day { width: 46px; } } /* text written by students and mentors keeps its own direction (English inside the Arabic layout, and the reverse) */ .app :is(.acx-post p, .acx-reply p, .acx-instr, .acx-mine p, .acx-fb p, .acx-class-m p, .acx-class-m b, .acx-qt, .acx-opt span:last-child, .acx-res b, .acx-sub p, .acx-test b, .acx-item > summary b, .acx-h + .sub i) { unicode-bidi: plaintext; } /* Refer and earn (refer.html); shares the Pay fees and waitlist layout */ .site.page-refer .rf-steps { list-style: none; margin: 0 auto clamp(28px, 4vw, 44px); padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: rf; } .site.page-refer .rf-steps li { counter-increment: rf; background: #fff; border-radius: 20px; box-shadow: var(--shadow); padding: 20px 18px; min-width: 0; } .site.page-refer .rf-steps li::before { content: counter(rf); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--h-ink); color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 12px; } .site.page-refer .rf-steps b { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; } .site.page-refer .rf-steps span { color: var(--muted); font-size: 14px; line-height: 1.5; } .site.page-refer .rf-h { font-size: 22px; margin: 0 0 18px; color: var(--text); } .site:is(.page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .rf-sub { font-size: 14px; font-weight: 600; color: var(--text); margin: 22px 0 12px; } .site:is(.page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) label.rf-agree { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--muted); margin: 4px 0 18px; } .site:is(.page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) label.rf-agree input { width: 18px; height: 18px; flex: none; margin-top: 2px; padding: 0; accent-color: var(--h-ink); } .site.page-refer label.rf-agree a, .site.page-refer .rf-forgot summary { color: var(--ink); } .site.page-refer .rf-forgot { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; } .site.page-refer .rf-forgot summary { cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .site.page-refer .rf-forgot form { margin-top: 14px; } .site.page-refer .pf-side .rf-forgot .btn { width: auto; } .site.page-refer .rf-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); max-width: 1040px; margin: 0 auto clamp(20px, 3vw, 36px); align-items: stretch; } .site.page-refer .rf-linkbox { display: flex; gap: 10px; align-items: stretch; } .site.page-refer .rf-linkbox code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: var(--wash, #F4F8FB); border: 1.5px dashed var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; color: var(--text); } .site.page-refer .rf-linkbox .btn { flex: none; } .site.page-refer .rf-share { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .site:is(.page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .btn-wa-soft { display: inline-flex; align-items: center; gap: 8px; background: #E8F6EE; color: #0B6B3A; box-shadow: inset 0 0 0 1px #BFE5CF; border-radius: 999px; padding: 12px 20px; font: 500 15px/1 var(--h-f); text-decoration: none; } .site:is(.page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .btn-wa-soft:hover { background: #D9F0E3; } .site.page-refer .rf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .site.page-refer .rf-tiles div { background: #fff; border-radius: 20px; box-shadow: var(--shadow); padding: 18px; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .site.page-refer .rf-tiles b { font-size: clamp(20px, 2.4vw, 26px); color: var(--text); font-weight: 600; overflow-wrap: anywhere; } .site.page-refer .rf-tiles span { color: var(--muted); font-size: 13.5px; margin-top: 2px; } .site.page-refer .rf-lower { margin: 0 auto; } .site.page-refer .rf-scroll { overflow-x: auto; margin: 0 -4px; } .site.page-refer .rf-table { width: 100%; border-collapse: collapse; font-size: 14px; } .site.page-refer .rf-table th { text-align: start; font-weight: 600; color: var(--muted); font-size: 12.5px; padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; } .site.page-refer .rf-table td { padding: 11px 6px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: top; } .site.page-refer .rf-table td:nth-child(n+4) { white-space: nowrap; } .site.page-refer .rf-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #FFF4E0; color: #9A5B00; } .site.page-refer .rf-pill.paid { background: #EAF6EF; color: #1B7F4B; } .site.page-refer .rf-pending { list-style: none; margin: 0; padding: 0; } .site.page-refer .rf-pending li { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); } .site.page-refer .rf-pending li span:first-child { color: var(--text); font-weight: 600; flex: 1 1 140px; } .site.page-refer .rf-terms-wrap { max-width: 1040px; margin-top: clamp(28px, 4vw, 44px); } .site.page-refer .rf-terms { border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line); padding: clamp(22px, 3.2vw, 36px); } .site.page-refer .rf-terms h2 { font-size: 20px; margin: 0 0 12px; color: var(--text); } .site.page-refer .rf-terms ul { margin: 0; padding-inline-start: 20px; color: var(--muted); font-size: 15px; line-height: 1.65; display: grid; gap: 6px; } @media (max-width: 860px) { .site.page-refer .rf-steps { grid-template-columns: 1fr 1fr; } .site.page-refer .rf-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .site.page-refer .rf-steps { grid-template-columns: 1fr; } .site.page-refer .rf-linkbox { flex-direction: column; } .site.page-refer .rf-share > * { flex: 1 1 auto; justify-content: center; } } /* Referral field on enroll.html */ .ref-ok { margin: 8px 0 0; font-size: 13.5px; color: #1B7F4B; } .ref-ok.bad { color: #B42318; } .ref-ok:empty { display: none; } .site:is(.page-refer, .page-sponsor, .page-success-stories, .page-timetable, .page-trial) .pf-done { max-width: 1040px; margin-inline: auto; } .site.page-refer .rf-pill { margin-top: 4px; white-space: nowrap; } .site.page-refer .rf-list { list-style: none; margin: 0; padding: 0; } .site.page-refer .rf-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); } .site.page-refer .rf-list li:first-child { padding-top: 0; } .site.page-refer .rf-l1 { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .site.page-refer .rf-l1 b { color: var(--text); font-size: 15.5px; font-weight: 600; } .site.page-refer .rf-l1 > span { color: var(--text); font-size: 14px; } .site.page-refer .rf-l1 small { color: var(--muted); font-size: 13px; } .site.page-refer .rf-l2 { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: end; } .site.page-refer .rf-l2 b { color: var(--text); font-size: 17px; font-weight: 600; } /* Sponsor a student (sponsor.html); shares the Pay fees, waitlist and refer layout */ .site.page-sponsor .sp-stats { max-width: 1040px; margin: 0 auto clamp(20px, 3vw, 32px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .site.page-sponsor .sp-stats div { background: #fff; border-radius: 20px; box-shadow: var(--shadow); padding: 18px 20px; min-width: 0; } .site.page-sponsor .sp-stats b { display: block; font-size: clamp(20px, 2.6vw, 28px); color: var(--text); font-weight: 600; overflow-wrap: anywhere; } .site.page-sponsor .sp-stats span { color: var(--muted); font-size: 13.5px; } .site.page-sponsor .sp-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--wash, #F4F8FB); border-radius: 999px; padding: 4px; margin-bottom: 20px; box-shadow: inset 0 0 0 1px var(--line); } .site.page-sponsor .sp-switch button { border: 0; background: transparent; border-radius: 999px; padding: 11px 12px; font: 600 14.5px/1.2 inherit; font-family: inherit; color: var(--muted); cursor: pointer; } .site.page-sponsor .sp-switch button[aria-selected="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(9,69,112,.14); } .site.page-sponsor .sp-p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 16px; } .site.page-sponsor .sp-amounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .site.page-sponsor .sp-amounts button { text-align: start; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; cursor: pointer; font: inherit; min-width: 0; transition: border-color .2s, box-shadow .2s; } .site.page-sponsor .sp-amounts button b { display: block; font-size: 18px; color: var(--text); } .site.page-sponsor .sp-amounts button span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; } .site.page-sponsor .sp-amounts button[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(133,204,255,.35); } .site.page-sponsor .sp-list { display: grid; gap: 10px; margin-bottom: 16px; } .site.page-sponsor .sp-kid { display: flex; flex-direction: column; gap: 8px; text-align: start; width: 100%; background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 16px; cursor: pointer; font: inherit; color: var(--text); transition: border-color .2s, box-shadow .2s; } .site.page-sponsor .sp-kid.on { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(133,204,255,.35); } .site.page-sponsor .sp-kid-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; } .site.page-sponsor .sp-kid-top b { font-size: 17px; } .site.page-sponsor .sp-kid-top em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink); background: #EEF6FC; padding: 3px 10px; border-radius: 999px; } .site.page-sponsor .sp-kid-blurb { color: var(--muted); font-size: 14.5px; line-height: 1.55; } .site.page-sponsor .sp-bar { display: block; height: 6px; background: #E8EEF3; border-radius: 999px; overflow: hidden; } .site.page-sponsor .sp-bar i { display: block; height: 100%; background: #1B7F4B; border-radius: inherit; } .site.page-sponsor .sp-kid-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); } .site.page-sponsor .sp-empty { background: var(--wash, #F4F8FB); border-radius: 16px; padding: 16px; color: var(--muted); font-size: 14.5px; margin: 0; } .site.page-sponsor .sp-donor { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 4px; } .site:is(.page-sponsor, .page-trial) .sp-where { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; } .site:is(.page-sponsor, .page-trial) .sp-where li { color: var(--muted); font-size: 14.5px; line-height: 1.55; } .site:is(.page-sponsor, .page-trial) .sp-where b { color: var(--text); display: block; } .site:is(.page-sponsor, .page-trial) .pf-side .btn-wa-soft { width: 100%; justify-content: center; } .site.page-sponsor .sp-wall { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; } .site.page-sponsor .sp-wall h3 { font-size: 16px; margin: 0 0 10px; color: var(--text); } .site.page-sponsor .sp-wall ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .site.page-sponsor .sp-wall li { font-size: 14px; color: var(--muted); } .site.page-sponsor .sp-wall li b { color: var(--text); display: block; } .site.page-sponsor .sp-apply-wrap { max-width: 1040px; margin-top: clamp(24px, 3vw, 36px); } .site.page-sponsor .sp-apply { background: #fff; border-radius: 24px; box-shadow: var(--shadow); padding: clamp(18px, 2.6vw, 28px) clamp(22px, 3.2vw, 36px); } .site.page-sponsor .sp-apply summary { cursor: pointer; font-size: 17px; color: var(--text); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .site.page-sponsor .sp-apply summary::-webkit-details-marker { display: none; } .site.page-sponsor .sp-apply summary::after { content: '+'; font-size: 24px; line-height: 1; color: var(--ink); } .site.page-sponsor .sp-apply[open] summary::after { content: '\2212'; } .site.page-sponsor .sp-apply[open] summary { margin-bottom: 16px; } .site.page-sponsor .sp-apply .btn { min-width: 200px; justify-content: center; } @media (max-width: 640px) { .site.page-sponsor .sp-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .site.page-sponsor .sp-stats div { padding: 14px; border-radius: 16px; } } @media (max-width: 420px) { .site.page-sponsor .sp-amounts { grid-template-columns: 1fr; } .site.page-sponsor .sp-apply .btn { width: 100%; } } /* Owner dashboard (owner.html) */ .app.page-owner .c.w7 { grid-column: span 7; } .app.page-owner .c.w5 { grid-column: span 5; } .app.page-owner .greet { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .app.page-owner .tile { min-width: 0; } .app.page-owner .tile b { overflow-wrap: anywhere; } .app.page-owner .ow-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; } .app.page-owner .ow-list { list-style: none; margin: 0; padding: 0; } .app.page-owner .ow-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--text, #0B1F2E); } .app.page-owner .ow-list li:first-child { border-top: 0; padding-top: 0; } .app.page-owner .ow-h { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .app.page-owner .ow-h li { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 10px; font-size: 13.5px; } .app.page-owner .ow-h li span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app.page-owner .ow-h li i { display: block; height: 10px; border-radius: 999px; background: var(--sky-d, #3E97D9); } .app.page-owner .ow-h li b { font-weight: 600; color: var(--deep); white-space: nowrap; } .app.page-owner .ow-pay { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 10px; } .app.page-owner .ow-pay-l { min-width: 0; flex: 1 1 280px; } .app.page-owner .ow-pay-l b { display: block; color: var(--deep); } .app.page-owner .ow-pay-l small { color: var(--muted); font-size: 13px; } .app.page-owner .ow-bank { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; font-size: 14px; } .app.page-owner .ow-bank code { font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--deep); background: var(--wash); padding: 3px 8px; border-radius: 8px; } .app.page-owner .ow-pay-r { display: flex; align-items: flex-end; gap: 10px; flex: 0 1 360px; margin: 0; } .app.page-owner .ow-pay-r > div { flex: 1; min-width: 0; } .app.page-owner .ow-reason { white-space: pre-line; background: var(--wash); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 0 0 10px; } @media (max-width: 900px) { .app.page-owner .c.w7, .app.page-owner .c.w5 { grid-column: span 12; } } @media (max-width: 560px) { .app.page-owner .ow-pay-r { flex-direction: column; align-items: stretch; flex-basis: 100%; } .app.page-owner .ow-h li { grid-template-columns: minmax(80px, 38%) 1fr auto; } } /* Success stories: live stories and the Share your story form */ .site.page-success-stories .ss-more .voice-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 380px)); justify-content: center; } .site.page-success-stories .ss-share-sec .pf-wrap { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; } .site.page-success-stories .ss-h { font-size: clamp(24px, 3vw, 32px); margin: 8px 0 10px; color: var(--text); } .site.page-success-stories .sp-p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 20px; } .site.page-success-stories .ss-lab { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 8px; } .site.page-success-stories .ss-rate { display: flex; gap: 6px; } .site.page-success-stories .ss-rate button { background: none; border: 0; padding: 2px; cursor: pointer; line-height: 0; } .site.page-success-stories .ss-rate svg { width: 30px; height: 30px; fill: #DCE3E9; transition: fill .15s, transform .15s; } .site.page-success-stories .ss-rate button.on svg { fill: #F2B33D; } .site.page-success-stories .ss-rate button:hover svg { transform: scale(1.1); } .site.page-success-stories .ss-rate button:focus-visible { outline: 2px solid var(--ink); border-radius: 6px; } .app.page-owner .ow-chk { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--deep); margin: 4px 0 12px; } .app.page-owner .ow-chk input { width: 18px; height: 18px; accent-color: var(--ink); } .app.page-owner textarea.in { width: 100%; resize: vertical; font: inherit; } /* Class timetable (timetable.html) */ .site.page-timetable .tt-wrap { max-width: 1040px; } .site.page-timetable .tt-pick { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; margin-bottom: 22px; } .site.page-timetable .tt-progs { display: flex; flex-wrap: wrap; gap: 6px; background: #fff; border-radius: 999px; padding: 5px; box-shadow: var(--shadow); } .site.page-timetable .tt-progs button { border: 0; background: transparent; border-radius: 999px; padding: 9px 16px; font: 600 14px/1.2 inherit; font-family: inherit; color: var(--muted); cursor: pointer; } .site.page-timetable .tt-progs button[aria-selected="true"] { background: var(--h-ink, #0B1F2E); color: #fff; } .site.page-timetable .tt-group { margin: 0; min-width: min(100%, 280px); } .site.page-timetable .tt-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 16px; color: var(--text); } .site.page-timetable .tt-title small { font-size: 14px; font-weight: 600; color: var(--ink); background: #EEF6FC; padding: 3px 10px; border-radius: 999px; } .site.page-timetable .tt-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; } .site.page-timetable .tt-day { background: #fff; border-radius: 20px; box-shadow: var(--shadow); padding: 18px 18px 8px; } .site.page-timetable .tt-day.today { box-shadow: 0 0 0 2px var(--ink), var(--shadow); } .site.page-timetable .tt-day h3 { display: flex; justify-content: space-between; align-items: center; font-size: 16px; margin: 0 0 10px; color: var(--text); } .site.page-timetable .tt-day h3 em { font-style: normal; font-size: 12px; font-weight: 600; color: #fff; background: var(--ink); padding: 2px 9px; border-radius: 999px; } .site.page-timetable .tt-day ul { list-style: none; margin: 0; padding: 0; } .site.page-timetable .tt-day li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 12px; border-top: 1px solid var(--line); } .site.page-timetable .tt-day li:first-child { border-top: 0; padding-top: 0; } .site.page-timetable .tt-time { font-size: 13px; font-weight: 600; color: var(--ink); } .site.page-timetable .tt-day li b { font-size: 16px; color: var(--text); } .site.page-timetable .tt-day li small { font-size: 13px; color: var(--muted); } .site.page-timetable .tt-add { font-size: 13px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; margin-top: 4px; align-self: flex-start; } .site.page-timetable .tt-acts { margin-top: 22px; } .site.page-timetable .tt-acts .pf-small { margin-top: 8px !important; } .site.page-timetable .tt-note { margin-top: 28px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); padding: 18px 20px; color: var(--muted); font-size: 15px; line-height: 1.6; } .site.page-timetable .tt-note p { margin: 0; } .site.page-timetable .tt-note p + p { margin-top: 6px; } .site.page-timetable .tt-note a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .site:is(.page-timetable, .page-trial) .sp-empty { background: #fff; border-radius: 16px; padding: 18px; color: var(--muted); font-size: 15px; margin: 0; box-shadow: var(--shadow); } .site:is(.page-timetable, .page-trial) header.hero { padding-bottom: clamp(56px, 7vw, 96px); } .site:is(.page-timetable, .page-trial) header.hero .hero-copy p { max-width: 62ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; } /* Weekly timetable card on the Madrasah dashboard */ .app .tt-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; margin-top: 6px; } .app .tt-week > div { background: var(--wash); border-radius: 16px; padding: 12px 14px; } .app .tt-week > div.today { box-shadow: 0 0 0 2px var(--ink); background: #fff; } .app .tt-week h3 { font-size: 13px; font-weight: 700; color: var(--sky-d); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; } .app .tt-week p { margin: 0; padding: 5px 0; font-size: 14px; color: var(--deep); display: flex; justify-content: space-between; gap: 8px; } .app .tt-week p span { color: var(--muted); font-size: 13px; white-space: nowrap; } .app .tt-week a { color: var(--ink); font-weight: 600; font-size: 13px; } .when .when-acts { margin-top: 18px; } /* Book a free class (trial.html) */ .site.page-trial .tr-step { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; } .site.page-trial .tr-step span { width: 26px; height: 26px; border-radius: 50%; background: var(--h-ink, #0B1F2E); color: #fff; font-size: 13px; display: grid; place-items: center; flex: none; } .site.page-trial .tr-step small { font-weight: 400; color: var(--muted); } .site.page-trial #trWhen, .site.page-trial #trDetails { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .site.page-trial .tr-progs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .site.page-trial .tr-progs button, .site.page-trial .tr-slot { text-align: start; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 13px 15px; cursor: pointer; font: inherit; min-width: 0; transition: border-color .2s, box-shadow .2s; } .site.page-trial .tr-progs b { display: block; font-size: 16px; color: var(--text); } .site.page-trial .tr-progs span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; } .site.page-trial .tr-progs button[aria-checked="true"], .site.page-trial .tr-slot.on { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(133,204,255,.35); } .site.page-trial .tr-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .site.page-trial .tr-day h3 { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 8px; } .site.page-trial .tr-day > div { display: flex; flex-wrap: wrap; gap: 8px; } .site.page-trial .tr-slot { padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 120px; } .site.page-trial .tr-slot b { font-size: 16px; color: var(--text); } .site.page-trial .tr-slot span { font-size: 12.5px; color: var(--muted); } .site.page-trial .tr-none { background: var(--wash, #F4F8FB); border-radius: 16px; padding: 14px 16px; color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0 0 14px; } .site.page-trial .tr-other { margin: 14px 0 10px; } .site.page-trial #trPrefBox { margin-top: 6px; } .site.page-trial #trDone .btn { margin-top: 14px; } @media (max-width: 420px) { .site.page-trial .tr-progs { grid-template-columns: 1fr; } } .site.page-timetable .tt-day li { align-items: flex-start; } .site.page-trial .tr-slot { align-items: flex-start; } .app .tt-week p span[dir] { unicode-bidi: isolate; } /* Free guides (resources.html) and the guide strips on programme pages */ .site.page-resources header.hero { padding-bottom: clamp(56px, 7vw, 96px); } .site.page-resources header.hero .hero-copy p { max-width: 62ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; } .site.page-resources .res-sec { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); } .site.page-resources .res-wrap { max-width: 1040px; display: grid; gap: clamp(20px, 3vw, 32px); } .site .res-card { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 40px); align-items: center; background: #fff; border-radius: 28px; box-shadow: var(--shadow); padding: clamp(18px, 3vw, 32px); } .site .res-cover { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(6,47,77,.45); transition: transform .3s; } .site .res-cover:hover { transform: translateY(-4px) rotate(-1deg); } .site .res-cover img { display: block; width: 100%; height: auto; } .site .res-tag { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--ink); background: #EEF6FC; padding: 4px 12px; border-radius: 999px; } .site .res-body h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.1; margin: 12px 0 8px; color: var(--text); } .site .res-sub { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0 0 16px; } .site .res-pts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; } .site .res-pts li { position: relative; padding-inline-start: 26px; font-size: 15px; line-height: 1.5; color: var(--text); } .site .res-pts li::before { content: ''; position: absolute; inset-inline-start: 2px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--sky-d, #3E97D9); } .site .res-meta { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; } .site .res-acts { display: flex; flex-wrap: wrap; gap: 10px; } .site .res-acts .btn { gap: 8px; } .site.page-resources .res-note { text-align: center; color: var(--muted); font-size: 15px; margin: 8px 0 0; } .site.page-resources .res-note a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* small strip on madrasah.html / academy.html */ .site .res-strip { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 32px); align-items: center; background: #fff; border-radius: 24px; box-shadow: var(--shadow); padding: clamp(16px, 2.6vw, 24px) clamp(18px, 3vw, 32px); } .site .res-strip img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 12px 26px -14px rgba(6,47,77,.5); display: block; } .site .res-strip h3 { font-size: clamp(19px, 2.2vw, 24px); margin: 6px 0 6px; color: var(--text); } .site .res-strip p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; } .site .res-strip .btn { gap: 8px; white-space: nowrap; } @media (max-width: 720px) { .site .res-card { grid-template-columns: 1fr; } .site .res-cover { max-width: 240px; margin: 0 auto; } .site .res-strip { grid-template-columns: 84px minmax(0, 1fr); } .site .res-strip .btn { grid-column: 1 / -1; justify-content: center; } } /* Prospectus download links (home, admissions) */ .site .h-hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; } .site .h-btn-dl { gap: 8px; } .site .hero-actions .btn-dl { gap: 8px; }