/* ========================================================================== 03-BASE — @font-face, element defaults, type scale application ========================================================================== */ /* -------------------------------------------------------------------------- FONTS — self-hosted, subset, font-display: swap. Zodiak / Switzer / Supreme are Indian Type Foundry faces (see PLAN.md 2A.2). Mukta carries Devanagari and is sliced by unicode-range so English visitors never download it. Files are dropped into /assets/fonts/ per README; the stack degrades to a sane system fallback until they are. -------------------------------------------------------------------------- */ @font-face { font-family: "Zodiak"; src: url("../fonts/Zodiak-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+20B9, U+2018-201F, U+2013-2014, U+2026; } @font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+20B9, U+2018-201F, U+2013-2014, U+2026; } @font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+20B9, U+2018-201F, U+2013-2014, U+2026; } @font-face { font-family: "Supreme"; src: url("../fonts/Supreme-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+20B9; } /* Devanagari — loaded ONLY when Hindi glyphs are actually present in the page. */ @font-face { font-family: "Mukta"; src: url("../fonts/Mukta-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+200C-200D, U+20B9; } @font-face { font-family: "Mukta"; src: url("../fonts/Mukta-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+200C-200D, U+20B9; } /* -------------------------------------------------------------------------- DOCUMENT -------------------------------------------------------------------------- */ /* Lime-plaster grain over the page ground. Tiled at --texture-opacity (3.5%) it is invisible as texture but stops large areas of flat colour reading as digital emptiness — the chuna ground is a mineral surface, not a swatch. Fixed attachment would repaint on every scroll frame, so it is not used. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--texture-opacity); background-image: url("../images/textures/plaster.webp"); background-size: 512px; background-repeat: repeat; } body { font-family: var(--ff-body); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-normal); letter-spacing: var(--tr-normal); color: var(--c-text); background-color: var(--surface-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; overflow-x: hidden; } /* Hindi swaps the body stack. Set on by i18n.js. */ :lang(hi) body, [lang="hi"] { font-family: var(--ff-deva); } /* -------------------------------------------------------------------------- HEADINGS — visual size is a class decision, not a tag decision, so heading levels can follow document semantics. These are the sensible defaults. -------------------------------------------------------------------------- */ h1, .t-h1 { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tr-display); color: var(--c-ink); } h2, .t-h2 { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-3xl); line-height: var(--lh-snug); letter-spacing: var(--tr-display); color: var(--c-ink); } h3, .t-h3 { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--c-ink); } /* Zodiak is a high-contrast serif: beautiful large, fragile small. Below --fs-xl the display face is banned. h4 and down use the body face. */ h4, .t-h4 { font-family: var(--ff-body); font-weight: var(--fw-medium); font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--c-ink); } h5, .t-h5 { font-family: var(--ff-body); font-weight: var(--fw-medium); font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--c-ink); } h6, .t-h6 { font-family: var(--ff-utility); font-weight: var(--fw-medium); font-size: var(--fs-xs); line-height: var(--lh-snug); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-text-muted); } /* Hero scale — reserved for the one h1 above the fold on Home. */ .t-hero { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: var(--tr-display); } /* Impact numerals — the display face doing what it was chosen for. */ .t-num { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-num); line-height: 0.94; letter-spacing: var(--tr-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Utility face — labels, tags, figures, table data. Always has tabular nums. */ .t-util { font-family: var(--ff-utility); font-weight: var(--fw-medium); font-size: var(--fs-xs); letter-spacing: var(--tr-wide); text-transform: uppercase; font-variant-numeric: tabular-nums; } .t-lead { font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--c-text-muted); max-width: var(--measure-tight); } .t-caption { font-family: var(--ff-utility); font-size: var(--fs-2xs); line-height: var(--lh-snug); color: var(--c-text-muted); } /* Any element carrying money or counts gets tabular figures, always. */ [data-inr], [data-count], .t-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* -------------------------------------------------------------------------- PROSE -------------------------------------------------------------------------- */ .prose { max-width: var(--measure); line-height: var(--lh-loose); } .prose > * + * { margin-block-start: var(--sp-5); } .prose h2 { margin-block-start: var(--sp-8); } .prose h3 { margin-block-start: var(--sp-7); } .prose h2 + p, .prose h3 + p { margin-block-start: var(--sp-4); } .prose ul, .prose ol { padding-inline-start: var(--sp-5); display: grid; gap: var(--sp-2); } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose strong { font-weight: var(--fw-medium); } .prose blockquote { border-inline-start: 2px solid var(--c-verdigris); padding-inline-start: var(--sp-5); font-size: var(--fs-lg); color: var(--c-indigo); } /* -------------------------------------------------------------------------- LINKS — underlined in prose (never colour alone as the affordance), and the underline thickens rather than the colour changing. -------------------------------------------------------------------------- */ .prose a, .link { color: var(--c-verdigris-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-thickness var(--d-fast) var(--e-out); } .prose a:hover, .link:hover { text-decoration-thickness: 3px; } /* -------------------------------------------------------------------------- INVERTED CONTEXT — one class flips an entire section onto the ink ground. -------------------------------------------------------------------------- */ .is-inverted { background-color: var(--surface-invert); color: var(--c-text-inv); --c-text: var(--c-text-inv); --c-text-muted: var(--c-text-muted-inv); --c-line: rgb(255 255 255 / 0.14); --surface-raised: var(--c-indigo); --c-verdigris-ink: var(--c-verdigris-lt); } .is-inverted h1, .is-inverted h2, .is-inverted h3, .is-inverted h4, .is-inverted h5 { color: var(--c-text-inv); } /* -------------------------------------------------------------------------- TODO_CLIENT MARKER — unverified figures render visibly as placeholders. Never a plausible-looking invented number. See PLAN.md 2C.5. -------------------------------------------------------------------------- */ .todo-client { font-family: var(--ff-utility); font-size: var(--fs-3xs); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-warning); background: var(--c-warning-bg); padding: 0.15em 0.5em; border-radius: var(--r-sm); /* Was `white-space: nowrap`, which pushed the long placeholders straight off the side of the page — "TODO_CLIENT: confirm kit contents against current procurement" overflowed a 390px viewport by 105px on every appeal page. Short badges still sit on one line because they fit; only the long ones wrap, and a wrapped placeholder is a great deal better than a page that scrolls sideways. */ overflow-wrap: anywhere; } .is-inverted .todo-client { color: var(--c-marigold); background: rgb(245 165 36 / 0.12); }