/* ===================================================================== School of Leadership — स्कूल ऑफ लीडरशिप Design tokens lifted from the DataNova template (slate + teal, DM Sans / Work Sans, dashed-border cards, floating labels), extended with Devanagari faces and a guilloche security texture. ===================================================================== */ /* ------------------------------- tokens ---------------------------- */ :root { /* slate — structure and text */ --slate-50: oklch(0.984 0.003 247.858); --slate-100: oklch(0.968 0.007 247.896); --slate-200: oklch(0.929 0.013 255.508); --slate-300: oklch(0.869 0.022 252.894); --slate-400: oklch(0.704 0.040 256.788); --slate-500: oklch(0.554 0.046 257.417); --slate-600: oklch(0.446 0.043 257.281); --slate-700: oklch(0.372 0.044 257.287); --slate-800: oklch(0.279 0.041 260.031); --slate-900: oklch(0.208 0.042 265.755); --slate-950: oklch(0.129 0.042 264.695); /* teal — accent and action */ --teal-50: oklch(99.48% 0.0032 197.11); --teal-100: oklch(98.28% 0.0074 197.04); --teal-200: oklch(96.36% 0.0179 196.86); --teal-300: oklch(93.55% 0.0283 196.68); --teal-400: oklch(89.79% 0.0396 196.47); --teal-500: oklch(84.99% 0.0526 196.20); --teal-600: oklch(78.05% 0.0652 195.90); --teal-700: oklch(69.85% 0.0817 195.44); --teal-800: oklch(59.53% 0.1000 194.80); --teal-900: oklch(54.08% 0.0908 194.80); --teal-950: oklch(32.68% 0.0470 195.10); --white: #fff; --off-white: oklch(0.997 0 0); --danger: oklch(0.55 0.20 27); --danger-bg: oklch(0.97 0.02 27); --success: oklch(0.52 0.13 155); /* Source Sans 3 carries Latin (variable, 200–900). Tiro Devanagari Hindi carries Devanagari — it only ships at 400, so weight is never used to create hierarchy in Hindi text. Latin sits first in the stack so it wins for Latin glyphs. */ --font-display: 'Source Sans 3', 'Tiro Devanagari Hindi', serif; --font-body: 'Source Sans 3', 'Tiro Devanagari Hindi', serif; --radius: 0.5rem; --shell: 64rem; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* --------------------------- base + reset -------------------------- */ *, *::before, *::after { box-sizing: border-box; border-color: var(--slate-200); } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--slate-600); background: var(--white); -webkit-font-smoothing: antialiased; /* Tiro has no bold cut. Without this, every 500/600/700 rule below would render Devanagari as smeared faux-bold while Latin got the real weight. Latin (variable) still bolds properly. */ font-synthesis-weight: none; font-synthesis: none; } h1, h2, h3, h4, .display { font-family: var(--font-display); color: var(--slate-800); font-weight: 600; line-height: 1.3; margin: 0; text-wrap: balance; } p { margin: 0; } button:not(:disabled) { cursor: pointer; } :focus-visible { outline: 2px solid var(--teal-800); outline-offset: 2px; } .shell { max-width: var(--shell); margin-inline: auto; padding-inline: 1.25rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------ bilingual pairing ------------------------- Two patterns live side by side. 1. Toggle-only text — any [data-hi]/[data-en] that is NOT a direct child of .bi. Only the active language is shown; script.js sets the `hidden` attribute. 2. Paired text — a .bi container holding one [data-hi] and one [data-en]. BOTH stay visible: the active language reads large, the other drops to a small sub-label beneath it. This is how Indian government forms actually work, and it means a Hindi reader never loses the English term (and the reverse). `lang-hi` / `lang-en` on decides which is which. */ [hidden] { display: none !important; } /* Devanagari is not letterspaced — tracking pulls conjuncts and matras away from their base characters. The uppercase eyebrow, brand sub-line and section dividers all track their Latin text, so scope that to Latin only. */ html [lang='hi'] { letter-spacing: normal; } .bi { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.25rem; } html.lang-hi .bi > [data-en], html.lang-en .bi > [data-hi] { order: 9; flex-basis: 100%; font-size: var(--sub-size, 0.75rem); font-weight: 400; font-style: normal; letter-spacing: normal; line-height: 1.45; color: var(--sub-color, var(--slate-400)); margin-top: var(--sub-gap, 0.1875rem); } /* ------------------------- guilloche texture ------------------------ 32×32 tile from the template's public/guilloche.svg, restroked in teal and used at low opacity — the security-print look that reads as "official form" without shouting. */ .guilloche::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.38; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%230d9298' stroke-miterlimit='10' stroke-width='0.6'%3E%3Cpath d='M13.5 0a5.988 5.988 0 01-1.753 4.243L8 8l-3.747 3.757A5.988 5.988 0 002.5 16v0a5.988 5.988 0 001.753 4.243L8 24l3.747 3.757A5.989 5.989 0 0113.5 32m5-32a5.988 5.988 0 001.753 4.243L24 8l3.747 3.757A5.989 5.989 0 0129.5 16v0a5.988 5.988 0 01-1.753 4.243L24 24l-3.747 3.757A5.989 5.989 0 0018.5 32'/%3E%3Cpath d='M32 2.5a5.988 5.988 0 00-4.243 1.753L24 8l-3.757 3.747A5.989 5.989 0 0116 13.5v0a5.988 5.988 0 01-4.243-1.753L8 8 4.243 4.253A5.988 5.988 0 000 2.5m32 27a5.988 5.988 0 01-4.243-1.753L24 24l-3.757-3.747A5.989 5.989 0 0016 18.5v0a5.988 5.988 0 00-4.243 1.753L8 24l-3.757 3.747A5.989 5.989 0 010 29.5'/%3E%3C/g%3E%3C/svg%3E"); background-size: 44px 44px; mask-image: linear-gradient(to bottom, #000 0%, transparent 75%); } /* ----------------------------- topbar ------------------------------ */ .topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--white) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--slate-200); } .topbar__inner { display: flex; align-items: center; gap: 0.875rem; min-height: 4rem; } .brand { display: flex; align-items: center; gap: 0.75rem; margin-right: auto; min-width: 0; text-decoration: none; } .brand img { width: 2.125rem; height: 2.125rem; flex-shrink: 0; } .brand__text { min-width: 0; } .brand__name { display: block; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: var(--slate-800); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand__sub { display: block; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-400); line-height: 1.3; } /* language toggle */ .langswitch { display: flex; padding: 0.1875rem; background: var(--slate-100); border-radius: 999px; flex-shrink: 0; } .langswitch button { appearance: none; border: 0; background: transparent; border-radius: 999px; padding: 0.3125rem 0.8125rem; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; color: var(--slate-500); transition: background-color 0.25s var(--ease), color 0.25s var(--ease); } .langswitch button[aria-pressed='true'] { background: var(--white); color: var(--slate-800); box-shadow: 0 1px 2px rgb(15 23 42 / 0.10); } /* ------------------------------- hero ------------------------------ */ .hero { position: relative; overflow: hidden; background: linear-gradient(to bottom, var(--teal-200), transparent 55%, var(--white)); } .hero__inner { position: relative; z-index: 1; padding-block: 3.5rem 3rem; } .hero__emblem { display: block; width: 3.5rem; height: 3.5rem; margin-bottom: 1.5rem; } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-950); background: color-mix(in oklch, var(--white) 70%, transparent); border: 1px dashed var(--teal-700); border-radius: 999px; padding: 0.3125rem 0.875rem; margin-bottom: 1.25rem; } .hero h1 { font-size: clamp(2rem, 6.5vw, 3.75rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--slate-900); } .hero h1 { --sub-size: 0.52em; --sub-color: var(--slate-600); --sub-gap: 0.4rem; } .hero__lede { margin-top: 1.125rem; max-width: 34rem; font-size: 1.0625rem; color: var(--slate-700); } .hero__lede { --sub-size: 0.9375rem; --sub-color: var(--slate-500); --sub-gap: 0.25rem; } /* the two qualifying questions — the actual hook of the programme */ .asks { display: grid; gap: 0.75rem; margin-top: 2rem; max-width: 38rem; } .ask { display: flex; gap: 0.875rem; align-items: flex-start; background: color-mix(in oklch, var(--white) 78%, transparent); border: 1px dashed var(--slate-300); border-radius: var(--radius); padding: 0.9375rem 1.0625rem; } .ask__mark { flex-shrink: 0; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 0.25rem; background: var(--teal-800); color: var(--white); font-size: 0.875rem; font-weight: 700; line-height: 1; } .ask__text { font-size: 1rem; color: var(--slate-800); font-weight: 500; --sub-size: 0.8125rem; --sub-color: var(--slate-500); } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; margin-top: 2rem; } .hero__note { font-size: 0.8125rem; color: var(--slate-500); } /* ----------------------------- buttons ----------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid transparent; border-radius: var(--radius); padding: 0.6875rem 1.5rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; text-align: center; text-decoration: none; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .btn--primary { background: var(--teal-800); color: var(--white); } .btn--primary:hover, .btn--primary:focus-visible { background: color-mix(in oklch, var(--teal-800) 82%, var(--white)); } .btn--secondary { border: 2px solid var(--teal-800); color: var(--slate-800); background: transparent; padding-block: calc(0.6875rem - 1px); } .btn--secondary:hover, .btn--secondary:focus-visible { background: var(--teal-700); color: var(--white); border-color: var(--teal-700); } .btn--ghost { background: var(--teal-50); color: var(--slate-700); } .btn--ghost:hover, .btn--ghost:focus-visible { background: var(--teal-100); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } /* ---------------------------- form shell --------------------------- */ .formwrap { padding-block: 1rem 4.5rem; } /* a form column reads better narrower than the hero */ .formwrap .shell { max-width: 54rem; } .formcard { position: relative; background: var(--white); border: 1px dashed var(--slate-300); border-radius: 0.875rem; padding: 0; overflow: hidden; } /* progress rail */ .progress { border-bottom: 1px dashed var(--slate-300); background: var(--slate-50); padding: 1rem 1.25rem 0.875rem; } .progress__bar { height: 4px; border-radius: 999px; background: var(--slate-200); overflow: hidden; margin-bottom: 0.875rem; } .progress__fill { height: 100%; width: 25%; background: var(--teal-800); border-radius: 999px; transition: width 0.45s var(--ease); } .progress__steps { display: flex; gap: 0.375rem; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; } .progress__steps::-webkit-scrollbar { display: none; } .progress__steps li { flex: 1 1 0; min-width: 6.5rem; } .progress__step { display: flex; align-items: center; gap: 0.5rem; width: 100%; background: transparent; border: 0; padding: 0.25rem; text-align: left; font-family: var(--font-body); color: var(--slate-400); border-radius: 0.375rem; } .progress__num { flex-shrink: 0; width: 1.375rem; height: 1.375rem; display: grid; place-items: center; border-radius: 0.25rem; background: var(--slate-200); color: var(--slate-500); font-size: 0.75rem; font-weight: 700; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); } .progress__label { font-size: 0.75rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .progress__step[aria-current='step'] { color: var(--slate-800); } .progress__step[aria-current='step'] .progress__num { background: var(--teal-800); color: var(--white); } .progress__step[data-done='true'] { color: var(--slate-600); } .progress__step[data-done='true'] .progress__num { background: var(--teal-300); color: var(--teal-950); } /* ------------------------------ steps ------------------------------ */ .step { display: none; padding: 1.75rem 1.25rem 1.5rem; border: 0; margin: 0; min-width: 0; } .step[data-active='true'] { display: block; animation: stepin 0.28s var(--ease); } @keyframes stepin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .step__head { display: flex; gap: 0.875rem; align-items: flex-start; padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px dashed var(--slate-200); } .step__num { flex-shrink: 0; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 0.375rem; background: var(--teal-100); border: 1px solid var(--teal-500); color: var(--teal-950); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; } .step__title { font-size: 1.25rem; --sub-size: 0.8125rem; --sub-color: var(--slate-500); } /* ------------------------------ fields ----------------------------- */ .grid { display: grid; gap: 1.125rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .span-2 { grid-column: span 2; } } .field { min-width: 0; } .field__label { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.25rem; font-size: 0.9375rem; font-weight: 600; color: var(--slate-800); margin-bottom: 0.4375rem; line-height: 1.45; } .req { color: var(--danger); margin-left: 0.125rem; } .opt { font-size: 0.6875rem; font-weight: 400; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.06em; margin-left: 0.25rem; } .control { display: block; width: 100%; font-family: var(--font-body); font-size: 0.9375rem; color: var(--slate-800); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 0.6875rem 0.875rem; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease); } .control::placeholder { color: var(--slate-400); } .control:hover { border-color: var(--slate-300); } .control:focus { outline: none; background: var(--white); border-color: var(--teal-700); box-shadow: 0 0 0 3px color-mix(in oklch, var(--teal-500) 55%, transparent); } .control:disabled { background: var(--slate-100); color: var(--slate-400); } select.control { appearance: none; padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8125rem center; } textarea.control { resize: vertical; min-height: 7rem; line-height: 1.55; } .control[aria-invalid='true'] { border-color: var(--danger); background: var(--danger-bg); } .field__hint { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.75rem; color: var(--slate-400); margin-top: 0.3125rem; } .field__error { display: none; font-size: 0.75rem; color: var(--danger); margin-top: 0.3125rem; } .field--invalid .field__error { display: block; } .counter[data-ok='true'] { color: var(--success); } /* choice chips — radio groups rendered as tappable cards */ .choices { display: flex; flex-wrap: wrap; gap: 0.5rem; } .choice { position: relative; } .choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .choice span { display: block; border: 1px solid var(--slate-200); background: var(--slate-50); border-radius: var(--radius); padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--slate-700); transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease); } .choice input:hover + span { border-color: var(--slate-300); } .choice input:focus-visible + span { outline: 2px solid var(--teal-800); outline-offset: 2px; } .choice input:checked + span { background: var(--teal-100); border-color: var(--teal-800); color: var(--teal-950); font-weight: 500; } /* checkbox rows */ .check { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.875rem; color: var(--slate-700); cursor: pointer; } .check input { flex-shrink: 0; appearance: none; width: 1.125rem; height: 1.125rem; margin: 0.1875rem 0 0; border: 1px solid var(--slate-300); border-radius: 0.25rem; background: var(--white); transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); } .check input:checked { background: var(--teal-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.5 3.5L13 5'/%3E%3C/svg%3E") center/0.875rem no-repeat; border-color: var(--teal-800); } .check .sub { display: block; font-size: 0.75rem; color: var(--slate-400); } /* conditional blocks */ .reveal { display: none; } .reveal[data-show='true'] { display: block; animation: stepin 0.25s var(--ease); } .subpanel { background: var(--teal-50); border: 1px dashed var(--teal-600); border-radius: var(--radius); padding: 1.125rem; } .subpanel__title { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--teal-950); margin-bottom: 0.875rem; } /* optional-section divider */ .divider { display: flex; align-items: center; gap: 0.875rem; margin: 2rem 0 1.25rem; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-400); white-space: nowrap; } .divider::after { content: ''; flex: 1; height: 1px; border-top: 1px dashed var(--slate-300); } /* declaration block */ .declaration { background: var(--slate-50); border: 1px dashed var(--slate-300); border-radius: var(--radius); padding: 1.125rem; margin-top: 1.75rem; } /* ------------------------------ nav -------------------------------- */ .stepnav { display: flex; align-items: center; gap: 0.75rem; padding: 1.125rem 1.25rem; border-top: 1px dashed var(--slate-300); background: var(--slate-50); } .stepnav__spacer { margin-left: auto; } .stepnav__count { font-size: 0.75rem; color: var(--slate-400); white-space: nowrap; } /* form-level error summary */ .formerror { display: none; gap: 0.625rem; align-items: flex-start; margin: 0 1.25rem 0; padding: 0.8125rem 1rem; background: var(--danger-bg); border: 1px solid color-mix(in oklch, var(--danger) 35%, var(--white)); border-radius: var(--radius); font-size: 0.8125rem; color: var(--danger); } .formerror[data-show='true'] { display: flex; } /* ----------------------------- success ----------------------------- */ .success { display: none; text-align: center; padding: 3rem 1.5rem; } .success[data-show='true'] { display: block; animation: stepin 0.4s var(--ease); } .success__mark { width: 4rem; height: 4rem; margin: 0 auto 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--teal-100); border: 1px dashed var(--teal-700); font-size: 1.75rem; } .success h2 { font-size: 1.5rem; --sub-size: 0.9375rem; --sub-color: var(--slate-500); justify-content: center; text-align: center; } .appid { display: inline-block; margin: 1.5rem 0 0.5rem; padding: 0.875rem 1.75rem; background: var(--slate-900); color: var(--white); border-radius: var(--radius); font-family: ui-monospace, 'Cascadia Code', Menlo, monospace; font-size: 1.375rem; letter-spacing: 0.06em; } .appid__label { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 0.5rem; } .success__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; } /* ----------------------------- footer ------------------------------ */ .footer { background: var(--slate-900); color: var(--slate-300); padding-block: 3rem 2.25rem; } .footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 44rem) { .footer__grid { grid-template-columns: 1.4fr 1fr; align-items: start; } } .footer h3 { color: var(--white); font-size: 1rem; margin-bottom: 0.75rem; } .footer__brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .footer__brand img { width: 2.5rem; height: 2.5rem; } .footer__brand strong { color: var(--white); font-family: var(--font-display); font-weight: 600; } .footer__brand .sub { display: block; font-size: 0.75rem; color: var(--slate-400); font-weight: 400; } .footer p { font-size: 0.875rem; color: var(--slate-400); max-width: 30rem; } .contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; } .contact a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--white); text-decoration: none; font-size: 0.9375rem; border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease); } .contact a:hover { border-bottom-color: var(--teal-700); } .contact .sub { display: block; font-size: 0.75rem; color: var(--slate-400); } .footer__base { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--slate-700); font-size: 0.75rem; color: var(--slate-500); } /* ---------------------------- responsive --------------------------- */ @media (min-width: 48rem) { .hero__inner { padding-block: 5rem 4rem; } .step { padding: 2.25rem 2.25rem 2rem; } .step__head { margin-bottom: 1.75rem; } .progress { padding: 1.25rem 2.25rem 1rem; } .stepnav { padding: 1.25rem 2.25rem; } .formerror { margin-inline: 2.25rem; } .formwrap { padding-block: 1.5rem 5rem; } } @media (max-width: 30rem) { .brand__sub { display: none; } .stepnav .btn { flex: 1; padding-inline: 0.875rem; } .stepnav__count { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ------------------------------ print ------------------------------ */ @media print { .topbar, .hero, .footer, .stepnav, .progress { display: none !important; } .step { display: block !important; page-break-inside: avoid; } .formcard { border: 1px solid #000; } body { color: #000; } .appid { background: none; color: #000; border: 1px solid #000; } }