co-op agent
1c863ddb95
Light: warm neutrals (#e4e0d8 borders, #f4f2ec code, #6b7a62 muted) instead of near-blacks; links use the dashboard's #4e7a4d (4.7:1 on cream). Dark: replace Material's cold blue-grey slate (#1e2129 page) with the chat overlay's deep-pine palette (#22271f page, #e8f5e8 text, #7ab87a accent), so a dark screen reads as the co-op's green identity rather than stock Material.
77 lines
2.6 KiB
CSS
77 lines
2.6 KiB
CSS
/* Typography for the co-op documentation site.
|
|
*
|
|
* Loaded after publishing/brand.css on purpose: the font has to be declared on the
|
|
* elements themselves. Material renders body and headings with
|
|
* var(--md-text-font-family), which it defines on <body>, so a :root-level value
|
|
* loses to it by DOM proximity no matter how the cascade is ordered.
|
|
*
|
|
* Figtree is self-hosted -- see the @font-face rules in brand.css. No CDN, no
|
|
* third-party font service.
|
|
*/
|
|
|
|
body,
|
|
.md-typeset,
|
|
.md-nav,
|
|
.md-header,
|
|
.md-tabs,
|
|
.md-footer {
|
|
font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
.md-typeset h1,
|
|
.md-typeset h2,
|
|
.md-typeset h3,
|
|
.md-typeset h4,
|
|
.md-typeset h5,
|
|
.md-typeset h6,
|
|
.md-header__title,
|
|
.md-nav__title {
|
|
font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.md-typeset h1,
|
|
.md-typeset h2,
|
|
.md-typeset h3,
|
|
.md-typeset h4,
|
|
.md-header__title {
|
|
/* Never break a word mid-way; wrap at the space, and let the browser balance the
|
|
two lines rather than leaving one word on its own. */
|
|
overflow-wrap: break-word;
|
|
word-break: normal;
|
|
hyphens: none;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
/* Fluid scale. Fixed rem sizes do not shrink on a phone -- Material keeps a 20px root
|
|
* even at 360px wide -- so a 2.6rem h1 stays 52px and "Cooperative" (297px at that
|
|
* size) runs out of room on anything narrower than ~370px and breaks mid-word.
|
|
* These track the viewport instead and land at the same desktop size.
|
|
*/
|
|
.md-typeset h1 { font-size: clamp(1.6rem, 1.5rem + 3.2vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; }
|
|
.md-typeset h2 { font-size: clamp(1.3rem, 1.1rem + 1.6vw, 1.7rem); font-weight: 600; }
|
|
.md-typeset h3 { font-size: clamp(1.1rem, 1rem + 0.7vw, 1.25rem); font-weight: 600; }
|
|
.md-header__title { font-size: clamp(0.85rem, 0.7rem + 0.8vw, 0.95rem); font-weight: 600; }
|
|
|
|
/* Long prose stays readable; measured in characters rather than pixels. */
|
|
.md-typeset { line-height: 1.65; }
|
|
|
|
/* Colour is scheme-specific, so it stays out of the rules above.
|
|
* Light: the co-op's warm ink (#2d3327), never a neutral near-black.
|
|
* Dark: the chat overlay's light warm text (#e8f5e8) on the deep-pine page. */
|
|
[data-md-color-scheme="default"] .md-typeset h1,
|
|
[data-md-color-scheme="default"] .md-typeset h2,
|
|
[data-md-color-scheme="default"] .md-typeset h3,
|
|
[data-md-color-scheme="default"] .md-typeset h4 {
|
|
color: #2d3327;
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset h1,
|
|
[data-md-color-scheme="slate"] .md-typeset h2,
|
|
[data-md-color-scheme="slate"] .md-typeset h3,
|
|
[data-md-color-scheme="slate"] .md-typeset h4 {
|
|
color: #e8f5e8;
|
|
}
|