/* --------------------------------------------------------------------------- app.css — layered on top of carbon.css (ported verbatim from the client prototype). This file holds only what the prototype could not: real embedded fonts, the three-language font stacks, and the accessibility corrections recorded in docs/design/03-ui-spec.md §4. Fonts are served from the binary at /fonts/*. No Google Fonts link: it fails on an air-gapped state IT network and adds a third-party privacy dependency (CLAUDE.md §15.3). --------------------------------------------------------------------------- */ @font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/IBMPlexSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/IBMPlexSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Sans Gujarati'; src: url('/fonts/NotoSansGujarati-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Sans Gujarati'; src: url('/fonts/NotoSansGujarati-Bold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Sans Devanagari'; src: url('/fonts/NotoSansDevanagari-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Sans Devanagari'; src: url('/fonts/NotoSansDevanagari-Bold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } /* The font stack follows , so a Gujarati page shapes correctly without a single per-element override. Latin glyphs still come from Plex because the Noto face is listed first only for the script it owns. */ html[lang='gu'] body, html[lang='gu'] button, html[lang='gu'] input, html[lang='gu'] select, html[lang='gu'] textarea { font-family: 'Noto Sans Gujarati', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; } html[lang='hi'] body, html[lang='hi'] button, html[lang='hi'] input, html[lang='hi'] select, html[lang='hi'] textarea { font-family: 'Noto Sans Devanagari', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; } /* Gujarati and Devanagari have taller ascenders and descenders than Latin; at the prototype's 1.5 line-height they collide. */ html[lang='gu'] body, html[lang='hi'] body { line-height: 1.65; } html[lang='gu'] th, html[lang='hi'] th { white-space: normal; } /* --------------------------------------------------------------------------- Accessibility corrections (G8 exit criterion: Lighthouse ≥ 90). --------------------------------------------------------------------------- */ /* The prototype uses --g50 (#8d8d8d) for 11px secondary text. That is 2.9:1 on white — it fails WCAG AA. --g70 (#525252) is 7.4:1 and visually near identical at this size. */ .kpi-f, .chart-s, .tile-s, .bar-t small, .foot-m { color: var(--g70); } /* Every interactive element gets a visible focus ring. The prototype only styled .tile:focus-visible. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--blue60); outline-offset: 2px; } .hdr a:focus-visible, .hdr button:focus-visible { outline-color: var(--blue40); } /* Skip link — first tab stop on every page. */ .skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--blue60); color: #fff; padding: 11px 18px; font-size: 13px; font-weight: 600; } .skip:focus { left: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Wide content scrolls inside its own container; the page body never scrolls horizontally. */ .tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* --------------------------------------------------------------------------- Language switcher — persistent in the header, three taps to any language from any page (CLAUDE.md §15.3). --------------------------------------------------------------------------- */ .lang { display: inline-flex; align-items: stretch; margin-right: 4px; } .lang form { display: inline-flex; } .lang button { font-size: 11.5px; font-weight: 600; color: var(--g30); padding: 6px 10px; border-left: 1px solid var(--g80); background: transparent; transition: background .14s, color .14s; } .lang button:first-child { border-left: none; } .lang button:hover { background: var(--g90); color: #fff; } .lang button[aria-current='true'] { background: var(--blue60); color: #fff; } /* --------------------------------------------------------------------------- Admin console. Desktop-only (CLAUDE.md §15.2) — below 672px it says so rather than rendering a broken grid. --------------------------------------------------------------------------- */ .adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .adm-only { display: none; } @media (max-width: 671px) { .adm-body { display: none; } .adm-only { display: block; } } .perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; background: var(--g20); border: 1px solid var(--g20); } .perm-mod { background: #fff; padding: 14px 16px; } .perm-mod h4 { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--g70); margin-bottom: 10px; } .perm-mod label { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; padding: 4px 0; cursor: pointer; } /* Destructive actions must not look like ordinary ones. */ .b-danger { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--red70); border: 1px solid var(--red); padding: 10px 16px; font-size: 13.5px; font-weight: 600; } .b-danger:hover { background: var(--red); color: #fff; } /* Audit before/after diff. */ .diff { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--g20); border: 1px solid var(--g20); font-family: var(--mono); font-size: 11.5px; } .diff-c { background: #fff; padding: 11px 13px; overflow-x: auto; } .diff-c.before { background: var(--red10); } .diff-c.after { background: var(--green10); } @media (max-width: 700px) { .diff { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- Offline state. The pending-sync badge has to be visible without being alarming — a venue on 2G is normal, not an error. --------------------------------------------------------------------------- */ .off-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--amber10); color: var(--amber70); border: 1px solid var(--amber); padding: 4px 10px; font-size: 11.5px; font-weight: 600; } .off-badge[hidden] { display: none; } /* Staleness note under dashboards fed by 60s aggregates (ADR-003). Saying "as of 09:41" is honest; implying live data is not. */ .stale { font-size: 11px; color: var(--g70); margin-top: 8px; display: flex; align-items: center; gap: 6px; } /* Print: certificates and result sheets get printed at venues. */ @media print { .hdr, .nav, .foot, .lang, .b-pri, .b-sec, .b-sm { display: none !important; } .body { display: block; } .main { padding: 0; } .cert { border: none; } } /* --------------------------------------------------------------------------- The header brand is a link to "/", and an with no colour of its own inherits the browser's :visited purple -- which turned the masthead magenta as soon as anyone had been to the home page. Pin it. --------------------------------------------------------------------------- */ .hdr-brand, .hdr-brand:visited, .hdr-brand:hover, .hdr-name, .hdr-brand .hdr-name { color: #fff; text-decoration: none; } .hdr-brand:hover .hdr-name { color: var(--g30); }