84 lines
2.7 KiB
CSS
84 lines
2.7 KiB
CSS
/* Self-hosted fonts (R14) — @fontsource ships the .woff2 locally; Vite bundles
|
|
them and serves them from our own origin. No Google Fonts / CDN request. */
|
|
@import '@fontsource/ibm-plex-sans/400.css';
|
|
@import '@fontsource/ibm-plex-sans/500.css';
|
|
@import '@fontsource/ibm-plex-sans/600.css';
|
|
@import '@fontsource/ibm-plex-sans/700.css';
|
|
@import '@fontsource/ibm-plex-mono/400.css';
|
|
@import '@fontsource/ibm-plex-mono/500.css';
|
|
@import '@fontsource/ibm-plex-mono/600.css';
|
|
/* No serif: a serif headline made every page read as a document, which is
|
|
exactly the impression the redesign removes. One family, used assertively. */
|
|
|
|
/* Design tokens, then Tailwind v3 layers. */
|
|
@import './portal-tokens.css';
|
|
@import './admin-tokens.css';
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
/* Stops iOS inflating body text when the phone is turned to landscape. */
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-size: var(--text-base);
|
|
line-height: var(--lh-normal);
|
|
}
|
|
|
|
/* Uniform, visible focus for every interactive element (a11y §6.4/§9). */
|
|
:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* Data/IDs/IPs use tabular figures. */
|
|
.font-mono {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Alpine: hide elements until initialised. */
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* iOS zooms the whole page when a field smaller than 16px takes focus, and
|
|
* then leaves the page zoomed — every tap into a form throws the layout about.
|
|
*
|
|
* There is no way to decline it: the meta-viewport switch that used to suppress
|
|
* it also kills pinch-zoom, which takes a genuine accessibility feature away
|
|
* from everyone to fix a cosmetic problem for some. Making the fields 16px on
|
|
* touch devices removes the reason instead.
|
|
*
|
|
* !important, and deliberately: this has to beat every text-size utility on
|
|
* every field in the application, and a rule that loses to `text-sm` on one
|
|
* form is worth nothing. Checkboxes and radios are excluded — they have no text
|
|
* to inflate and sizing them here would break their box.
|
|
*/
|
|
@media (pointer: coarse) {
|
|
input:not([type='checkbox']):not([type='radio']),
|
|
select,
|
|
textarea {
|
|
font-size: 16px !important;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.001ms !important;
|
|
transition-duration: 0.001ms !important;
|
|
}
|
|
}
|