/* ============================================================================= * Kanya Daan Project - beneficiary registration (/kanyadaan-register) * ----------------------------------------------------------------------------- * A SELF-CONTAINED, PAGE-SCOPED stylesheet. It loads beside tailwind.css for * the site header, footer and the .container gutter, and borrows nothing else. * It deliberately does NOT extend career-apply.css (.cap-*), * coordinator-apply.css (.coa-*) or kanyadaan-apply.css (.kd-*), and those * three files must not be loaded on this page. * * WHY IT IS SELF-CONTAINED - two production failures, neither of which this * file is allowed to repeat: * * 1. The .cap-* card is 74% transparent with backdrop-filter over animated * decorative blobs. On a short career form that reads as glass; on a * long registration it turned every label into a pale watermark. Here * every reading surface is an OPAQUE hex colour, there is no * backdrop-filter anywhere in this file, and there is no decorative * background behind the form at all. * 2. That kit also ships a scroll-reveal that parks elements at zero * opacity until an IntersectionObserver fires. On a tall form the * observer never resolved for the lower sections and people reported a * blank white page. So: NOTHING in this file rests below opacity 1, and * the phrase does not appear in it at all. * * ONE PAGE, NOT A WIZARD. This file used to collapse the form into nine steps * once assets/js/kanyadaan-register.js added .kdr-is-wizard to the root. The * form is now a single page of seventeen fields, so every rule that existed * only for that machinery is gone: the nine-segment progress meter, the step * rail and its dots, the step panels, the Back/Next footer, the review step * and the conditional blocks. .kdr-is-wizard appears nowhere in this file, and * nothing here hides a question from anybody. The eight kdr_sections() survive * as headed fieldsets in section 11; they are grouping, not gating. * * WHO HIDES A MESSAGE SLOT. The stylesheet does, keyed on `:empty` - see the * rule beside .kdr-field__error. Neither the page nor the script may write the * `hidden` attribute on a slot the script writes text into, because * `.kdr [hidden] { display:none !important }` below outranks everything and * the script only ever sets textContent. That mismatch is why no validation * message was ever visible on the previous build. * * SCOPE. Every custom property is declared on .kdr and nowhere else. The site * runs the EDUSKILL navy/green Theme Engine palette from :root; this page's * maroon, gold and cream must not leak into the header, the footer, the * megamenu or any other page, so :root is never touched and no global theme * variant is answered. * * THE PAGE LOADS THE TWO FACES this file asks for, in one request in its head * (kanyadaan-register.php already does it; fonts.googleapis.com is already in * use site-wide, so the CSP allowlist needs no change): * * * * * Without Noto Sans Devanagari the Hindi still renders - the stack falls * through to Nirmala UI on Windows and the platform face elsewhere - but the * head-line and the conjuncts are noticeably worse. * ========================================================================== */ /* ============================================================================= * 1. TOKENS * Declared once, on .kdr. Each ratio quoted below is the measured WCAG * contrast of that colour against the surface it is actually used on; they * are recorded so a later edit can see what it is about to break. * ========================================================================== */ .kdr { /* ---- brand: deep maroon ------------------------------------------- */ --kdr-maroon: #6E1420; /* the working maroon: headings, fills, borders */ --kdr-maroon-deep: #5A0F1A; /* pressed states, the masthead band */ --kdr-maroon-soft: #8C2430; /* hover on maroon surfaces */ --kdr-maroon-tint: #FAF2F2; /* selected choice card, terms card head */ /* ---- brand: navy ---------------------------------------------------- */ --kdr-navy: #12304F; /* secondary headings, focus ring, links */ --kdr-navy-tint: #EEF2F7; /* informational notice background */ /* ---- brand: gold ---------------------------------------------------- */ --kdr-gold: #C9A227; /* DECORATIVE ONLY - never text, never a border that has to be seen. Rules, ticks on maroon. */ --kdr-gold-strong: #A8811A; /* gold where a 3:1 edge is required */ --kdr-gold-ink: #7F6210; /* gold AS TEXT - the only gold allowed on type */ --kdr-gold-tint: #FDF6E3; /* the eligibility / warning notice background */ --kdr-gold-on-dark: #E8C66A; /* gold text on a maroon or navy band */ /* ---- surfaces: cream and white -------------------------------------- */ --kdr-page: #FBF8F3; /* the section background (cream) */ --kdr-surface: #FFFFFF; /* the form card, the terms card */ --kdr-surface-2: #F5EFE4; /* review rows, doc rows, quiet sub-panels */ --kdr-field: #FFFFFF; /* every input, select, textarea */ --kdr-field-disabled: #F2EEE7; /* ---- ink ------------------------------------------------------------ */ --kdr-ink: #1E1714; /* warm near-black, all body copy */ --kdr-muted: #6A5C54; /* hints, secondary lines, meta */ --kdr-placeholder: #7E7168; --kdr-on-maroon: #FBF8F3; /* cream text on a maroon surface */ /* ---- lines ----------------------------------------------------------- */ --kdr-hairline: #E6DDCE; /* decorative dividers only */ --kdr-card-line: #C6BAAB; /* card edges */ --kdr-field-line: #9A8B78; /* control boundary on white/cream - 3.31:1 */ --kdr-field-line-strong: #8B7C68; /* control boundary on a TINTED surface */ /* ---- state ----------------------------------------------------------- */ --kdr-success: #1B6B45; --kdr-success-tint: #ECF6F0; --kdr-danger: #B3261E; --kdr-danger-ink: #8E1D17; --kdr-danger-tint: #FDECEA; --kdr-focus: #12304F; /* navy, deliberately NOT red - see section 14 */ /* ---- progress --------------------------------------------------------- */ --kdr-track: #E2D5BF; /* ---- geometry ---------------------------------------------------------- */ --kdr-r-xs: 6px; --kdr-r-sm: 8px; --kdr-r: 12px; --kdr-r-lg: 18px; --kdr-r-pill: 999px; /* ---- elevation: two steps only, warm-tinted, never a glow -------------- */ --kdr-shadow-1: 0 1px 2px rgba(60, 30, 20, .05); --kdr-shadow-2: 0 10px 30px -14px rgba(60, 25, 20, .18); /* ---- motion ------------------------------------------------------------ */ --kdr-ease: cubic-bezier(.22, 1, .36, 1); --kdr-dur: .22s; /* ---- type -------------------------------------------------------------- */ /* Body / UI inherits the site's admin-chosen body face, so the page still sounds like the site and costs no extra request. */ --kdr-font-ui: inherit; /* A dignified text serif for headings. Source Serif 4 has a true optical size axis and reads institutional rather than decorative. */ --kdr-font-head: "Source Serif 4", Georgia, "Times New Roman", serif; /* Devanagari. Noto Sans Devanagari first - it is the reference face and covers every conjunct these forms will hit - then the platform faces so Hindi is shaped correctly before the webfont lands. There is deliberately no Devanagari serif: a sans/serif pair across scripts is standard in Indian bilingual documents and costs one family less to load. */ --kdr-font-deva: "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", "Devanagari Sangam MN", "Mukta", "Shobhika", sans-serif; /* The card gutter. One value drives the card, the panels and the mobile bar at each breakpoint, and it is the only token restated per breakpoint - always on .kdr, never on :root. */ --kdr-pad: 32px; } /* ============================================================================= * 2. THE ROOT SECTION * ========================================================================== */ .kdr { background: var(--kdr-page); color: var(--kdr-ink); font-family: var(--kdr-font-ui); padding-block: clamp(2rem, 5vw, 4rem); /* The site ships a global light/inverted theme toggle. This page is one palette, fully contrast-checked, and must not be repainted by it - so no token is ever redefined, and color-scheme pins the UA layer (the native date picker, the select popup, scrollbars, autofill and the validation bubbles) to the light rendering the palette was measured against. */ color-scheme: light; /* A diagnostic backstop, not a licence to overflow. `clip` and not `hidden`: `hidden` would turn this section into a scroll container. */ overflow-x: clip; } /* The one structural rule that prevents the 390px clipping bug the coordinator form shipped with. A
defaults to min-inline-size: min-content and refuses to shrink, so one wide child pushed every section past the card edge with no scrollbar to reveal it. .kdr-f is on EVERY field wrapper whatever its tag, which is exactly why the page emits it alongside the BEM name. */ .kdr fieldset, .kdr .kdr-f, .kdr .kdr-sec, .kdr .kdr-grid > *, .kdr .kdr-doc__meta { min-width: 0; } .kdr fieldset { border: 0; margin: 0; padding: 0; } .kdr *, .kdr *::before, .kdr *::after { box-sizing: border-box; } .kdr [hidden] { display: none !important; } /* Every error-summary link points at a field WRAPPER id (#kdr-w-) and the site header is sticky, so each landing point needs room above it. */ .kdr [id^="kdr-w-"], .kdr [id^="kdr-sec-"], .kdr-card, .kdr-success { scroll-margin-top: 96px; } /* ============================================================================= * 3. THE BILINGUAL SWAP * * kdr_bi() emits both languages on every render: * * ...... * * and the whole toggle is the two rules below - one attribute flip on one * element repaints several hundred labels with no reload and nothing typed * lost. ?lang=hi therefore works with scripting switched off, because the * server already wrote data-lang into the markup. * * display:none IS THE REQUIRED TECHNIQUE, not a style preference. The hidden * copy has to be invisible to three consumers at once - the eye, the screen * reader, and find-in-page / selection / copy - and only display:none * satisfies all three: * * .sr-only / .visually-hidden exists specifically to KEEP text in the * accessibility tree; here it would make every * screen-reader user hear each label twice. * visibility:hidden stays in the layout tree and breaks * scrollIntoView on the visible sibling. * a zero opacity, height:0, * font-size:0, off-screen all leave the text findable with Ctrl+F and * copyable into the clipboard. * aria-hidden="true" hides it from AT but leaves it painted, and * would have to be flipped on ~400 nodes on * every toggle instead of one attribute here. * * Do NOT add aria-hidden to .kdr-en / .kdr-hi. display:none already does the * job, and a stale aria-hidden left on the VISIBLE copy after a toggle * silences the label completely. * * .kdr-l and .kdr-p ride on the wrapper to say whether a pair is a label or a * run of prose. They get no rules of their own - the swap is identical for * both - and are left unstyled on purpose, so the distinction stays available * to a later change instead of being spent now. * ========================================================================== */ .kdr[data-lang="en"] .kdr-hi { display: none; } .kdr[data-lang="hi"] .kdr-en { display: none; } /* The wrapper takes no display of its own: kdr_bi() picks the tag and the caller passes a class onto it, so forcing one here would either break a heading or, with display:contents, throw the class away. It leaves no stray gap because the two inner spans are emitted with no whitespace between. */ /* Devanagari needs vertical room the Latin equivalent does not: a lower effective x-height at the same font-size, a head-line above and below-base conjuncts under. Sized in em so it tracks whatever it sits inside, never in fixed px. Tracking is zeroed and re-zeroed on descendants because it breaks conjuncts, and this page has uppercase, letter-spaced Latin eyebrows that would otherwise inherit down into a Hindi run. Devanagari has no case, so text-transform on it is a bug rather than a style. */ .kdr [lang="hi"] { font-family: var(--kdr-font-deva); font-size: 1.04em; line-height: 1.75; letter-spacing: 0; font-feature-settings: normal; text-transform: none; } .kdr [lang="hi"] * { letter-spacing: 0; text-transform: none; } /* ============================================================================= * 4. UTILITIES * Defined locally. Do not reach for a global .sr-only from tailwind.css - this * page must keep working if that file is ever scoped or renamed. * ========================================================================== */ .kdr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .kdr-print-only, .kdr-print-head { display: none; } /* ============================================================================= * 5. MASTHEAD * ========================================================================== */ .kdr-masthead { max-width: 880px; margin: 0 auto 24px; } /* ---------------------------------------------------------- breadcrumb ---- This page sets no $page_hero, so the green hero band that normally carries the breadcrumb is not rendered (see the note beside $page_hero in kanyadaan-register.php - it printed the title and subtitle a second time, in a colour language that fought this one). The site's own breadcrumb rules are all scoped .page-hero .breadcrumb, so without these the trail would fall back to a bare numbered
    with markers down the left. ------------------------------------------------------------------------- */ .kdr .breadcrumb { margin: 0 0 14px; } .kdr .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: 0; list-style: none; /* kills the inherited markers */ font-size: .82rem; line-height: 1.5; } .kdr .breadcrumb li { display: inline-flex; align-items: center; gap: .4rem; color: var(--kdr-muted); } .kdr .breadcrumb li:not(:first-child)::before { content: "/"; color: var(--kdr-card-line); font-weight: 600; } .kdr .breadcrumb a { color: var(--kdr-navy); text-decoration: none; border-bottom: 1px solid transparent; } .kdr .breadcrumb a:hover { border-bottom-color: currentColor; } .kdr .breadcrumb a:focus-visible { outline: 2px solid var(--kdr-focus); outline-offset: 2px; border-radius: 2px; } .kdr .breadcrumb [aria-current="page"] { color: var(--kdr-ink); font-weight: 600; } .kdr-masthead__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .75rem; font-weight: 700; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--kdr-navy); /* 12.70:1 on the cream page */ } .kdr-masthead__eyebrow svg { width: 16px; height: 16px; flex: 0 0 auto; } .kdr-masthead__title { margin: 0 0 10px; font-family: var(--kdr-font-head); font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--kdr-maroon-deep); /* 13.06:1 */ text-wrap: balance; } /* Balancing is Latin-only: Devanagari line-breaking support is uneven across engines and balancing it produces odd one-word last lines. */ .kdr-masthead__title [lang="hi"] { text-wrap: wrap; } .kdr-masthead__subtitle { margin: 0; max-width: 62ch; font-size: 1.0625rem; line-height: 1.65; color: var(--kdr-muted); /* 6.06:1 */ } .kdr-masthead__langhint { margin: 8px 0 0; font-size: .8125rem; line-height: 1.55; color: var(--kdr-muted); } .kdr-masthead__intro { margin: 12px 0 0; max-width: 68ch; font-size: .9375rem; line-height: 1.7; color: var(--kdr-ink); } .kdr-masthead__notes { display: grid; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; font-size: .875rem; line-height: 1.6; } .kdr-masthead__notes li { display: flex; align-items: flex-start; gap: 10px; } .kdr-masthead__noteico { flex: 0 0 auto; color: var(--kdr-maroon); margin-top: 2px; } .kdr-masthead__noteico svg { width: 17px; height: 17px; display: block; } .kdr-legend { margin: 16px 0 0; font-size: .8125rem; line-height: 1.55; color: var(--kdr-muted); } /* The glyph is decorative; the machine-readable signal is the `required` attribute, and the words are in this legend and in every field's aria-describedby hint. */ .kdr-req { color: var(--kdr-danger); font-weight: 700; } /* ============================================================================= * 6. LANGUAGE TOGGLE * Real anchors with real hrefs built by kdr_lang_href(), so a click without * scripting is an ordinary navigation and the server re-renders. The script * cancels the navigation and flips data-lang on the root instead. * ========================================================================== */ .kdr-lang { display: inline-flex; gap: 3px; padding: 3px; margin-top: 16px; border: 1.5px solid var(--kdr-field-line); border-radius: var(--kdr-r-pill); background: var(--kdr-surface); } .kdr-lang__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--kdr-r-pill); background: transparent; color: var(--kdr-muted); font: inherit; font-size: .9375rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color var(--kdr-dur) var(--kdr-ease), color var(--kdr-dur) var(--kdr-ease); } .kdr-lang__btn:hover { color: var(--kdr-ink); background: var(--kdr-maroon-tint); } /* The page sets .is-active and .is-on together, so either spelling works and neither can go stale against the other. */ .kdr-lang__btn.is-active, .kdr-lang__btn.is-on { background: var(--kdr-maroon); color: var(--kdr-on-maroon); /* 11.11:1 */ } /* A tick before the chosen language, so "which one am I reading" is not carried by the maroon fill alone. It hangs off .is-on and NOT off aria-current, even though aria-current is what the page now renders and what actually states the fact to a screen reader on a LINK (aria-pressed is a button's word and is ignored on an anchor, which is why it is gone). The reason is ownership: .is-on is the class assets/js/kanyadaan-register.js re-points on every client-side toggle, so the tick always follows the real state. aria-current is correct on the server render and on the no-script path; when the script learns to move it, this selector can take it as well. A mask, not a character, because the anchor's text is its accessible name. */ .kdr-lang__btn.is-on::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-right: 7px; 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='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%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='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center / contain no-repeat; } .kdr-lang--sticky { margin-top: 0; } /* ============================================================================= * 7. ELIGIBILITY BLOCK AND THE TWO AGE TRACKS * ========================================================================== */ .kdr-elig { max-width: 880px; margin: 0 auto 24px; padding: 22px 24px; background: var(--kdr-surface); /* opaque */ border: 1px solid var(--kdr-card-line); border-radius: var(--kdr-r-lg); box-shadow: var(--kdr-shadow-1); } .kdr-elig__title { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-family: var(--kdr-font-head); font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--kdr-maroon); /* 11.77:1 */ } .kdr-elig__title svg { width: 20px; height: 20px; flex: 0 0 auto; } .kdr-elig__intro { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--kdr-ink); } .kdr-elig__points { display: grid; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; font-size: .9375rem; line-height: 1.65; } .kdr-elig__points li { display: flex; align-items: flex-start; gap: 10px; } .kdr-elig__tick { flex: 0 0 auto; color: var(--kdr-success); margin-top: 2px; } .kdr-elig__tick svg { width: 17px; height: 17px; display: block; } .kdr-elig__subtitle { margin: 22px 0 10px; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--kdr-navy); /* 13.45:1 */ } /* The age rule as a picture. The applicant never chooses between these two - the date of birth decides, which is what elig.auto_note says underneath. */ .kdr-tracks { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .kdr-track { padding: 16px 18px; border: 1.5px solid var(--kdr-card-line); border-radius: var(--kdr-r); background: var(--kdr-surface-2); } /* 10-17 is not a lesser outcome and must not be painted as a warning. It is navy - informational - because a Future Support Registration is the correct and complete resting state for a girl below the legally permitted age of marriage. */ .kdr-track--future { border-color: var(--kdr-navy); background: var(--kdr-navy-tint); } .kdr-track--eligible { border-color: var(--kdr-success); background: var(--kdr-success-tint); } .kdr-track__range { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: var(--kdr-r-pill); background: var(--kdr-surface); font-size: .75rem; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--kdr-maroon); } .kdr-track__title { margin: 0 0 6px; font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--kdr-ink); } .kdr-track--future .kdr-track__title { color: var(--kdr-navy); } .kdr-track--eligible .kdr-track__title { color: var(--kdr-success); } .kdr-track__note { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--kdr-ink); } .kdr-track__note + .kdr-track__note { margin-top: 6px; } .kdr-track__note--soft { color: var(--kdr-muted); } .kdr-elig__auto, .kdr-elig__policy { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; font-size: .8125rem; line-height: 1.65; color: var(--kdr-muted); } .kdr-elig__auto svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; } .kdr-elig__notice { margin-top: 18px; } /* ============================================================================= * 8. NOTICES * ========================================================================== */ .kdr-notice { display: flex; gap: 12px; padding: 16px 18px; border: 1px solid var(--kdr-card-line); border-left-width: 5px; border-radius: var(--kdr-r-lg); background: var(--kdr-surface); color: var(--kdr-ink); } .kdr-notice--gold { background: var(--kdr-gold-tint); border-color: var(--kdr-gold-strong); } .kdr-notice--navy { background: var(--kdr-navy-tint); border-color: var(--kdr-navy); } .kdr-notice--error { background: var(--kdr-danger-tint); border-color: var(--kdr-danger); } .kdr-notice__icon { flex: 0 0 auto; margin-top: 2px; color: var(--kdr-gold-ink); } .kdr-notice__icon svg { width: 20px; height: 20px; display: block; } .kdr-notice--navy .kdr-notice__icon { color: var(--kdr-navy); } .kdr-notice--error .kdr-notice__icon { color: var(--kdr-danger); } .kdr-notice__main { min-width: 0; } .kdr-notice__title { margin: 0 0 4px; font-size: .9375rem; font-weight: 700; line-height: 1.4; color: var(--kdr-maroon); /* 10.91:1 on the gold tint */ } .kdr-notice--navy .kdr-notice__title { color: var(--kdr-navy); } .kdr-notice--error .kdr-notice__title { color: var(--kdr-danger-ink); } .kdr-notice__body { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--kdr-ink); } .kdr-notice__body + .kdr-notice__body { margin-top: 6px; } /* ============================================================================= * 9. THE FORM CARD * ========================================================================== */ .kdr-shell { max-width: 880px; margin-inline: auto; } /* 880px keeps a two-column field row at about 400px a column - a comfortable 45-55 character measure - and stops the form sprawling on a 1440px monitor. */ .kdr-card { background: var(--kdr-surface); /* opaque. always. */ border: 1px solid var(--kdr-card-line); border-radius: var(--kdr-r-lg); box-shadow: var(--kdr-shadow-2); padding: var(--kdr-pad); } .kdr-card__head { position: relative; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--kdr-hairline); } /* One gold hairline under the card header, plus the maroon step numerals, is the entire decorative budget of this page. Gold is safe here because it is a rule standing alone - not type, and not an edge that carries meaning. */ .kdr-card__head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 48px; height: 3px; background: var(--kdr-gold-strong); border-radius: var(--kdr-r-pill); } .kdr-card__title { display: flex; align-items: center; gap: 9px; margin: 0; font-family: var(--kdr-font-head); font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--kdr-maroon); } .kdr-card__title svg { width: 20px; height: 20px; flex: 0 0 auto; } .kdr-card__autosave { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--kdr-muted); } .kdr-card__autosave svg { width: 15px; height: 15px; flex: 0 0 auto; } /* On success the script puts .kdr-is-done on the root: everything that invites a second registration goes, and the confirmation is what is left. */ .kdr-is-done .kdr-card, .kdr-is-done .kdr-elig, .kdr-is-done .kdr-sticky { display: none; } /* ============================================================================= * 10. THE SAVED DRAFT * ========================================================================== */ .kdr-draft { display: grid; gap: 12px; margin-bottom: 20px; padding: 14px 16px; border: 1px solid var(--kdr-navy); border-left-width: 5px; border-radius: var(--kdr-r); background: var(--kdr-navy-tint); /* 15.73:1 with ink */ } .kdr-draft__text { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--kdr-ink); } .kdr-draft__actions { display: flex; flex-wrap: wrap; gap: 10px; } .kdr-draft__actions .kdr-btn { min-height: 44px; padding: 10px 18px; font-size: .9375rem; } /* ============================================================================= * 11. THE EIGHT GROUPS * * What is left of the nine-step wizard. kdr_sections() still returns eight * named groups, and the page renders each as a
    with a numbered * - but they are GROUPING, NOT GATING. Every field is on screen at * once, nothing collapses, and there is one Submit at the bottom. A form with * no visible structure is harder to fill than one with eight short labelled * blocks; that is the whole of the reason these exist. * * The rule that matters here is the legend's `display`. A is laid out * by the UA inside the fieldset's border, and for years only `display: block` * was honoured; `display: flex` is now accepted everywhere this site supports. * If it is ever not, the number, the icon and the title simply stack - longer, * never broken - which is why this is safe to rely on. * ========================================================================== */ .kdr-sec { display: block; } .kdr-sec + .kdr-sec { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--kdr-hairline); } .kdr .kdr-sec__legend { display: flex; align-items: center; gap: 12px; float: none; /* UA sheets float it in places */ width: 100%; padding: 0; margin-bottom: 4px; } .kdr-sec__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--kdr-r-sm); background: var(--kdr-maroon); /* flat fill - no gradient */ color: var(--kdr-on-maroon); font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; } .kdr-sec__ico { flex: 0 0 auto; display: inline-flex; color: var(--kdr-maroon); } .kdr-sec__ico svg { width: 18px; height: 18px; display: block; } .kdr-sec__title { min-width: 0; font-family: var(--kdr-font-head); font-size: clamp(1.15rem, 1.02rem + .6vw, 1.4rem); font-weight: 600; line-height: 1.3; color: var(--kdr-maroon); /* 11.77:1 on white */ } .kdr-sec__hint { margin: 0 0 16px; max-width: 64ch; font-size: .8125rem; line-height: 1.55; color: var(--kdr-muted); } /* ============================================================================= * 12. FIELDS * * Labels are ALWAYS above the control and never float. A bilingual label * cannot fit on one line inside a 52px input at 360px - on the previous build * the previous build seven labels wrapped and sat on top of the value typed. * ========================================================================== */ .kdr-grid { display: grid; gap: 16px; } .kdr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kdr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kdr-grid__full { grid-column: 1 / -1; } .kdr-field { display: grid; gap: 6px; align-content: start; } .kdr-field__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; padding: 0; font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--kdr-ink); } .kdr-field__ico { flex: 0 0 auto; align-self: center; color: var(--kdr-maroon); } .kdr-field__ico svg { width: 16px; height: 16px; display: block; } .kdr-field__hint { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--kdr-muted); /* 6.42:1 on white */ } /* ------------------------------------------------------------------------- THE MESSAGE SLOT, AND WHO HIDES IT. This rule is the contract; the page and the script both defer to it. Every slot the script writes text into - a field error, a document error, the chosen-filename line, the upload budget - is rendered PRESENT AND EMPTY and is hidden here, by :empty. Text in it means it shows. Nothing else is involved: the page never writes `hidden` on one of these, and neither does the script, which only ever sets textContent. That is not tidiness, it is the fix for the bug that made this form's validation silent. The page used to ship each empty slot with the HTML `hidden` attribute; `.kdr [hidden] { display:none !important }` in section 2 outranks every author rule; and the script had no code path that removed the attribute. Every message the form ever produced was written into a paragraph nobody could see. The age gate is the deliberate exception and is marked as such in section 15: the script switches between three PRE-RENDERED variants there, setting `hidden` and an inline display on each, so those do ship `hidden`. ------------------------------------------------------------------------- */ .kdr-field__error:empty, .kdr-doc__file:empty, .kdr-doc__err:empty, .kdr-docs__budget:empty { display: none; } /* An error paragraph reserving space under every field is a row of visual debt for nothing, which is why the slot collapses rather than merely emptying. */ .kdr-field__error { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: .8125rem; font-weight: 600; line-height: 1.45; color: var(--kdr-danger); /* 6.54:1 on white */ } /* The alert glyph is a mask rather than markup, because the script writes plain text into this element and would otherwise wipe out an inline . As a mask it also inherits the danger colour instead of hard-coding it twice. */ .kdr-field__error::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; 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='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 17h.01'/%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='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat; } /* There is no conditional-block rule any more. No field in kdr_fields() carries a req_if, so nothing on this form is asked for only when another answer says so, and nothing is hidden from anybody. The one [data-kdr-if] left in the markup is the minor note beside primary_need, which is the age gate's doing and is styled with the age gate in section 15. */ /* ============================================================================= * 13. CONTROLS * ========================================================================== */ /* .kdr- PREFIXED WITH .kdr ON PURPOSE - DO NOT SIMPLIFY THESE SELECTORS. assets/css/design-system.css styles fields site-wide with a selector list that includes input[type="text"], input[type="tel"], select, textarea … A type-plus-attribute selector scores 0-1-1; a bare .kdr-input scores 0-1-0, so the site rule WINS no matter which file loads last. The visible result was this form's fields wearing the site's green-grey #C1CCB3 border instead of the warm --kdr-field-line, and - worse - focus painting the site's green ring instead of the navy one this palette is built around. Scoping with .kdr takes these to 0-2-0 and puts the page back in charge of its own controls. */ .kdr .kdr-input, .kdr .kdr-select, .kdr .kdr-textarea { width: 100%; /* 52px at every width. The brief asks for a generous touch target, and this form is filled on a phone in a village far more often than at a desk. */ min-height: 52px; padding: 13px 14px; font: inherit; /* HARD FLOOR: 16px. Below it iOS Safari zooms the viewport on focus and the applicant must pinch back out for every field on the page. There is no width at which this drops. */ font-size: 1rem; line-height: 1.4; color: var(--kdr-ink); background: var(--kdr-field); /* opaque */ border: 1.5px solid var(--kdr-field-line); /* 3.31:1 on white */ border-radius: var(--kdr-r); -webkit-appearance: none; appearance: none; transition: border-color var(--kdr-dur) var(--kdr-ease); } .kdr .kdr-input::placeholder, .kdr .kdr-textarea::placeholder { color: var(--kdr-placeholder); opacity: 1; } .kdr .kdr-textarea { min-height: 112px; resize: vertical; line-height: 1.6; } .kdr .kdr-select { padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239A8B78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; } /* The empty first option is a real, re-selectable choice rather than a disabled placeholder, so it has to READ as unanswered. .has-value is the script's marker for "something is chosen". */ .kdr .kdr-select:not(.has-value) { color: var(--kdr-placeholder); } /* iOS collapses a date input to the height of its text otherwise, leaving a 30px tap target in a row of 52px siblings. */ .kdr .kdr-input[type="date"] { min-height: 52px; } /* The age is computed from the date of birth and shown back, never typed. It is readonly rather than disabled so it stays in the accessibility tree and still posts - and the handler recomputes it regardless. */ .kdr .kdr-input--derived { background: var(--kdr-field-disabled); color: var(--kdr-muted); /* 5.55:1 */ font-weight: 600; cursor: default; } /* Numbers somebody reads back down a telephone: Aadhaar, mobile, PIN code, income, dates. */ .kdr .kdr-input[type="tel"], .kdr .kdr-input[type="number"], .kdr .kdr-input[type="date"], .kdr .kdr-input[inputmode="numeric"] { font-variant-numeric: tabular-nums; } /* A real outline, not a box-shadow, so Windows High Contrast Mode keeps it. Text controls use :focus because a typing user expects the ring; buttons and cards use :focus-visible so a mouse click does not leave one behind. */ .kdr .kdr-input:focus, .kdr .kdr-select:focus, .kdr .kdr-textarea:focus { outline: 3px solid var(--kdr-focus); outline-offset: 2px; border-color: var(--kdr-navy); /* design-system.css pairs its `outline: none` on input:focus with a 3px green glow. The outline is restored on the line above; this is what removes the glow, which would otherwise sit underneath the navy ring in the site's brand colour and read as two focus indicators at once. It has to be declared, not merely out-specified - an undeclared property is simply inherited from whichever rule did declare it. */ box-shadow: none; } .kdr-btn:focus-visible, .kdr-lang__btn:focus-visible, .kdr-doc__clear:focus-visible, .kdr-success__copy:focus-visible, .kdr-declare__box:focus-within, .kdr-doc__btn:focus-within { outline: 3px solid var(--kdr-focus); outline-offset: 2px; } .kdr .kdr-input:disabled, .kdr .kdr-select:disabled, .kdr .kdr-textarea:disabled { background: var(--kdr-field-disabled); color: var(--kdr-muted); cursor: not-allowed; } /* Chrome paints its own pale-yellow autofill wash, which would put a translucent tint over a field this file promised would be opaque. */ .kdr .kdr-input:-webkit-autofill, .kdr .kdr-select:-webkit-autofill, .kdr .kdr-textarea:-webkit-autofill { -webkit-text-fill-color: var(--kdr-ink); box-shadow: inset 0 0 0 100px var(--kdr-field); caret-color: var(--kdr-ink); } /* ============================================================================= * 14. VALIDATION STATE * * The focus ring is NAVY, never red. A red ring on a red border is ambiguous, * and the ring has to stay distinguishable from the error state it sits * inside. Both the server's refusal and the script's paint .has-error on the * wrapper (the page adds .is-invalid beside it), so a no-script submission * comes back looking identical to a client-side one. * ========================================================================== */ .kdr-field.has-error .kdr-input, .kdr-field.has-error .kdr-select, .kdr-field.has-error .kdr-textarea, .kdr-field.is-invalid .kdr-input, .kdr-field.is-invalid .kdr-select, .kdr-field.is-invalid .kdr-textarea { border-color: var(--kdr-danger); } /* .is-ok is for the fields with real format rules only - Aadhaar, mobile, PIN code, date of birth. A wall of green ticks down every field is noise that teaches an applicant to ignore the one that matters. */ .kdr-field.is-ok .kdr-input, .kdr-field.is-ok .kdr-select, .kdr-field.is-ok .kdr-textarea { border-color: var(--kdr-success); } /* The step-level summary. The server renders it above the form on a refused post and the script reuses the same classes, so the two paths look alike. */ .kdr-alert { margin-bottom: 20px; } .kdr-alert:focus-visible { outline: 3px solid var(--kdr-focus); outline-offset: 2px; } .kdr-alert__list { margin: 8px 0 0; padding-left: 20px; font-size: .875rem; line-height: 1.75; } .kdr-alert__list a { color: var(--kdr-danger-ink); } /* 7.85:1 on the tint */ /* ============================================================================= * 15. THE AGE GATE * * kdr_age_band() made visible. All three outcomes ship in the HTML with their * wording already in them and only one is ever painted, so the script picks a * variant instead of writing a sentence the language toggle could not * translate. With no script data-band stays empty, none is shown, and the * handler decides - as it always does, from the date of birth, ignoring * whatever the hidden age_band input was posted with. * ========================================================================== */ .kdr-agegate__variant { display: none; } [data-kdr-band][data-band="future"] > [data-kdr-band-variant="future"], [data-kdr-band][data-band="eligible"] > [data-kdr-band-variant="eligible"], [data-kdr-band][data-band="invalid"] > [data-kdr-band-variant="invalid"] { display: flex; } /* Clause 7 said plainly, right beside the checkbox it applies to. Revealed by the script for a girl under 18. */ .kdr-minor-note { display: none; } .kdr-minor-note.is-on { display: flex; } /* ============================================================================= * 16. DOCUMENTS * * Five rows, matching the brief, and deliberately no sixth. Anything further * is asked for during verification - a family without a scanner must not be * turned away before it starts. * ========================================================================== */ .kdr-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .kdr-doc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--kdr-field-line); border-radius: var(--kdr-r); background: var(--kdr-surface); /* opaque */ transition: border-color var(--kdr-dur) var(--kdr-ease); } .kdr-doc__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--kdr-r-sm); background: var(--kdr-surface-2); color: var(--kdr-maroon); } .kdr-doc__icon svg { width: 18px; height: 18px; display: block; } .kdr-doc__meta { flex: 1 1 auto; display: grid; gap: 2px; } .kdr-doc__name { font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--kdr-ink); } .kdr-doc__spec { font-size: .75rem; line-height: 1.5; color: var(--kdr-muted); } .kdr-doc__spec--limits { font-variant-numeric: tabular-nums; } /* The ONE line in the row that ellipsises. A filename from a phone camera is forty characters of nothing and must never be allowed to widen the row. */ .kdr-doc__file { font-size: .8125rem; font-weight: 600; line-height: 1.5; color: var(--kdr-success); /* 6.49:1 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kdr-doc__err { font-size: .8125rem; font-weight: 600; line-height: 1.5; color: var(--kdr-danger); } .kdr-doc__req { flex: 0 0 auto; font-size: .75rem; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--kdr-danger); } /* Income proof is the one optional slot, because the households this project exists for are the least likely to hold a certificate for their poverty. */ .kdr-doc__req--optional { color: var(--kdr-gold-ink); } /* 5.74:1 */ /* A