/* ============================================================ Plumline — design tokens The single home for every colour, size and shape on the site. Nothing else should carry a raw hex value or a one-off radius. Naming: every colour family is a set of three. --name mid tone — borders, dots, rules. Never text. --name-text dark tone — labels, links. 4.5:1 or better. --name-soft pale tint — backgrounds, pills, current items. Linked by the public pages and by /styleguide.html. The plumliners' pages are moving over one at a time: a page that has moved links this file, site.css and plumliners.css, and the rest still wear the older chrome in styles.css. The typeface comes with it: the @font-face rules below are part of this file, so a page that links it needs nothing else. Written up in full in docs/style-guide.md. ============================================================ */ /* ---- the typeface -------------------------------------- FiraGO, served from public/fonts. Declared here so that linking this one file is all a page needs: no second stylesheet, and no request to a third party when someone opens the site. Upright and italic, each cut from bBox Type's release into three ranges, as Google Fonts cuts its faces: Latin, Latin-Extended, and Vietnamese, since Plum Village names are often Vietnamese and a name should not change typeface halfway through. A browser only fetches a range when the page holds a letter from it. FiraGO also covers Cyrillic, Greek, Georgian, Arabic, Hebrew, Thai and Devanagari; we do not carry those, so they fall back to the system sans. Licence: public/fonts/OFL.txt. ------------------------------------------------------- */ /* Light, at 300, for the public side's page titles, and Bold, at 700, for its other headings (Alipasha, 11 Oct 2026). Cut the same way as the rest. */ @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/firago-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/firago-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/firago-300-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/firago-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/firago-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/firago-700-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/firago-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/firago-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/firago-400-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/firago-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/firago-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/firago-500-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/firago-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/firago-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'FiraGO'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/firago-600-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'FiraGO'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/firago-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'FiraGO'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/firago-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'FiraGO'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/firago-400-italic-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'FiraGO'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/firago-500-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'FiraGO'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/firago-500-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'FiraGO'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/firago-500-italic-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'FiraGO'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/firago-600-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'FiraGO'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/firago-600-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'FiraGO'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/firago-600-italic-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } :root { color-scheme: light; /* ---- ground, surface and text -------------------------- */ --ground: #fcf7f9; /* the page — plum blossom: white with a breath of plum */ --ground-2: #f5edf1; /* alternating bands, input fills */ --ground-blur: rgba(252, 247, 249, 0.92); /* sticky header over blurred content */ --card: #fffdfe; /* card and panel surface */ --frame: #fff; /* the white mat round every picture */ --ink: #2e2a26; /* body text — 13.4:1 on ground */ --muted: #6f685e; /* secondary text — 5.2:1 on ground */ --rule: #e1dade; /* hairlines, borders, dividers */ --charcoal: #2b2723; /* the tint in shadows, and any dark band */ /* ---- action ------------------------------------------- A deep plum is the ONLY filled colour on the public side, and it always means act. Nothing else gets a filled button. */ --accent: #8e5bab; /* shapes: focus rings, rules. 4.7:1 */ --accent-strong: #6a3985; /* the fill behind white text — 8.3:1 */ --accent-strong-hover: #572b6f; --accent-soft: #ede1f6; /* the glow behind a focused input */ --on-accent: #fff; /* text on a plum fill */ /* ---- highlight ---------------------------------------- One highlight for each side of the site, so nobody has to wonder which side they are on: plum where the public reads, indigo where plumliners work. A highlight appears as a card's top border, a kicker, a link, or a pale pill. Plum is the fruit in the site's icon, a little towards blue; indigo is the blue at the wordmark's waists. */ --plum: #8c6aa1; --plum-text: #6e4188; --plum-soft: #efe5f7; /* public pages */ --indigo: #6b7ba0; --indigo-text: #495777; --indigo-soft: #e5e9f2; /* plumliners' pages */ /* ---- links -------------------------------------------- A link among words wears a fine underline in its own colour, faded, so it can be told from the words around it by more than colour alone. Under the pointer the line comes up full. */ --link-underline: underline 1px color-mix(in srgb, currentColor 45%, transparent); --link-offset: 0.18em; /* ---- the plumliners' ground ---------------------------- The pages where plumliners work stand on a cooler paper than the public ones, so the two sides can be told apart at a glance. Same ink, same corners, same depth; only the ground, the hairline, the muted text and the highlight change. plumliners.css reads these into the shared names on body.plumliners, so a rule written for the public side draws the plumliners' colours there without knowing which side it is on. On this side indigo carries both roles: the highlight, and the fill behind the one button that acts. */ --plumliners-ground: #f3f5f9; /* the page — cool paper */ --plumliners-ground-2: #e9edf4; /* bands, table heads, input fills */ --plumliners-ground-blur: rgba(243, 245, 249, 0.92); --plumliners-card: #fcfdfe; /* card and panel surface */ --plumliners-rule: #d9dee8; /* hairlines */ --plumliners-muted: #5f6672; /* secondary text — 5.3:1 on the plumliners' ground */ --plumliners-fill-hover: #3b4761; /* the indigo button under the pointer */ /* Charcoal on this side is a blue-black, so shadows go cool too. */ --plumliners-charcoal: #262a33; /* The rail down a plumliner's working pages, after a notes app's dark sidebar: this side's charcoal, a touch lighter, with light words, each mixed from the guide's own colours. On it: words 10.5:1, the muted address 5.6:1; on the place the page is in, a raised face running down from 0.2 lighter to 0.1 lighter, with three times the colour, words 5.4:1 at its top (Alipasha, 16 Oct 2026). */ --rail: color-mix(in srgb, var(--plumliners-charcoal) 95%, white); --rail-hover: oklch(from color-mix(in srgb, var(--plumliners-charcoal) 90%, white) l calc(c + 0.02) h); /* a place under the pointer */ --rail-current: linear-gradient(oklch(from var(--rail) calc(l + 0.2) calc(c * 3) h), oklch(from var(--rail) calc(l + 0.1) calc(c * 3) h)); /* the place the page is in */ --rail-current-lines: inset 0 1px oklch(from var(--rail) calc(l + 0.3) calc(c * 5) h), 0 1px 2px oklch(from var(--rail) calc(l - 0.1) c h); --rail-line: color-mix(in srgb, var(--plumliners-charcoal) 82%, white); --rail-text: var(--plumliners-ground-2); --rail-bright: var(--plumliners-card); --rail-muted: color-mix(in srgb, var(--plumliners-ground-2) 68%, var(--plumliners-charcoal)); /* The band behind each working page's head, and its footer: the rail's colour raised to a lightness of 0.5, with the rail's light words on it (5.1:1); a line a little darker under the head. The section names in the rail: lighter still, with a little more colour (about 4.8:1 on the rail). */ --band: oklch(from var(--rail) 0.5 c h); --band-line: oklch(from var(--rail) 0.42 c h); --rail-section: oklch(from var(--rail) 0.72 calc(c + 0.04) h); /* A button on a dark ground, such as Add a Sangha in a page's head, Cancel and Save in a box's head, or Sign Out on the rail, drawn as the Sangha Finder's bar draws its buttons (Alipasha, 16 Oct 2026): running down from a touch lighter than the band, with twice its colour, to a little darker than it, edged in black, with a light line along its top and another under it, and a black shadow under its light words. A little lighter again under the pointer. Kept this dark so its words read clearly everywhere on it: 5.4:1 at its top, 4.8:1 under the pointer (16 Oct 2026). */ --dark-button: linear-gradient(oklch(from var(--band) calc(l + 0.02) calc(c * 2) h), oklch(from var(--band) calc(l - 0.08) c h)); --dark-button-hover: linear-gradient(oklch(from var(--band) calc(l + 0.05) calc(c * 2) h), oklch(from var(--band) calc(l - 0.04) c h)); --dark-button-lines: inset 0 1px oklch(from var(--band) calc(l + 0.3) calc(c * 3) h), 0 1px oklch(from var(--band) calc(l + 0.15) calc(c * 2) h); /* ---- also in the palette ------------------------------- Three more families, cut the same way: mid, text, soft. They belong to no page. They are here for when something on a page needs telling apart from its neighbour — one kind of pin from another, say — and plum alone cannot. Clay was the public highlight until October 2026; the drawings still use it. */ --clay: #b07a56; --clay-text: #8a5b3c; --clay-soft: #f1e4d8; --sage: #7c8a6b; --sage-text: #4e5b3f; --sage-soft: #e8ebdf; --rose: #b25c88; --rose-text: #7e4257; --rose-soft: #f4e3e8; /* ---- status ------------------------------------------- Until the plumliners' pages move over, indigo also does duty as the neutral/informational status on the public side. The red was cut in August beside clay, and so faint and orange that it read as clay itself: on Delete Sangha and Throw Away as Spam most of all. It is now a true red, at the hue of the red Alipasha chose for the marks below: oklch 55%, 47% and 93% at 23°. White words on it 5.3:1, its words on white 7.4:1 (28 Oct 2026). */ --whole: #5f8a5a; --whole-text: #3f5f3b; --whole-soft: #e3eedd; /* confirmed, active */ --unwhole: #bd4143; --unwhole-text: #9e2b30; --unwhole-soft: #fce1df; /* needs attention */ --amber-text: #8a5a00; /* growing old, as a date confirmed over a year ago; 5.8:1 on a card */ /* The marks beside a sangha on Manage Sanghas: the red and the green Alipasha chose, brought to one lightness and one strength of colour in OKLCH so neither stands out more than the other. At 65% each stands at least 3:1 against white, as a mark must, and so does the white "!" or tick on it (red 3.5:1, green 3.1:1). The amber between them, for a sangha we are waiting to hear back from, is at the same lightness with as much colour as the screen can show at its hue (3.3:1). */ --mark-needs: oklch(65% 0.16 23); --mark-fine: oklch(65% 0.16 129); --mark-on: #fff; --mark-waiting: oklch(65% 0.14 70); /* ---- type ---------------------------------------------- */ --font: 'FiraGO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* How tall the small letters stand, as a share of the type size. Every size on the site was chosen in Poppins, whose small letters stand 0.548 of it; FiraGO's stand 0.527. font-size-adjust, set beside every font-family that reads --font, brings FiraGO and any fallback up to 0.548, so each size keeps the look it was chosen for. */ --x-height: 0.548; /* Two amounts of room in the words of the public pages, the same on every page (Alipasha, 12 Oct 2026): under a page's title, or a section's heading, before its words; and between one paragraph and the next, or between words and what follows them, a button, a list, a form, a row of events. */ --space-title: clamp(1.2rem, 3vw, 1.8rem); --space-text: 1em; /* The room above a page's first words, under the bar, and half of it inside the footer, above and below its words (Alipasha, 16 and 18 Oct 2026). */ --space-page: clamp(2.4rem, 7vw, 4rem); /* Small type is set a little apart. Below about 14px the letters of a sans close up, and a count or a note under a list ("12 of 14 Sanghas Match") reads more easily with a touch of air between them. Each sheet lists its small sizes at its foot. Capitals set small have their own, wider spacing. */ --tracking-small: 0.02em; /* ---- widths -------------------------------------------- The widths at which a page changes its layout. A media query cannot read a token, so they are kept here as words, and a test holds every sheet to them: 480 a small phone; 620 a phone, where the public bar's links fold under Menu; 700 a large phone, where the finder and the forms go to one column; 760, where the plumliners' rail moves to the top; 900 a tablet; 1040, where the finder's list and map share the room; 1100 a small laptop. A rule for wider than one of them starts a pixel above it (701px). */ /* ---- layout and shape ---------------------------------- */ --maxw: 1000px; /* content width: 1000 on the public side, 1200 on the plumliners' (plumliners.css) (Alipasha, 12 Oct 2026) */ --radius: 14px; /* cards, photographs, panels — taller than a row */ --radius-xs: 4px; /* every control, the box holding a view, and anything the height of a row, pressed or read. Focus rings, dots and small chips too. */ --radius-pill: 999px; --shadow: 0 1px 2px rgba(46, 42, 38, 0.05), 0 8px 24px rgba(46, 42, 38, 0.06); /* ---- depth --------------------------------------------- How far a control stands out of the page, or sinks into it. A thing you press takes --lift; a thing you put words into takes --sink (both on body, below, so they take the side's own charcoal). There is no third amount: --shadow is for panels, which are not controls. */ /* ---- controls ------------------------------------------ One size for everything you press or type into: a button and the field beside it are the same height, with their words set the same way in from the edge. 16px type, too, because an iPhone zooms the page into any field set smaller, and does not zoom back. A little less room above and below the words than there was: 34px tall, where 38 read as heavy beside the text around it. The small buttons keep their own size. */ --control-font: 1rem; --control-line: 1.2; --control-pad-y: 0.375rem; --control-pad-x: 1.1rem; --control-border: 1.5px; --control-height: calc(var(--control-font) * var(--control-line) + 2 * var(--control-pad-y) + 2 * var(--control-border)); } /* A screen with one pixel to a point draws a 1.5px line as 1px, so the height worked out above says the same as what is drawn. */ @media (max-resolution: 1.4dppx) { :root { --control-border: 1px; } } /* Worked out from other tokens on body rather than :root, where the plumliners' pages re-point the colours they come from (plumliners.css), so they follow the side the page is on. The edge of a box to write in: the quiet text colour softened with the hairline, 3:1 and over on the card and the ground on both sides, so where to write can be seen. */ body { --field-edge: color-mix(in srgb, var(--muted) 70%, var(--rule)); --lift: 0 1px 2px color-mix(in srgb, var(--charcoal) 11%, transparent); --sink: inset 0 2px 3px color-mix(in srgb, var(--charcoal) 11%, transparent); /* The faces things are drawn with, each named once. The white face of a button (site.css .btn-ghost): white at its top, running down to the ground's own colour, with a line a little darker than the ground along its foot, and a soft shadow in place of a line round it; its edge is kept but clear. A little darker under the pointer (Alipasha, 12 and 16 Oct 2026). */ --white-face: linear-gradient(to top, oklch(from var(--ground) calc(l - 0.05) c h) 1px, transparent 1px) border-box, linear-gradient(oklch(from var(--ground) calc(l + 0.1) calc(c * 0.5) h), oklch(from var(--ground) l calc(c * 0.5) h)) border-box; --white-face-hover: linear-gradient(to top, oklch(from var(--ground) calc(l - 0.05) c h) 1px, transparent 1px) border-box, linear-gradient(oklch(from var(--ground) calc(l + 0.04) calc(c * 0.5) h), oklch(from var(--ground) calc(l - 0.03) calc(c * 0.5) h)) border-box; --white-face-edge: transparent; --white-face-lines: 0 1px 3px oklch(from var(--ground) 0.7 calc(c * 3) h), 0 0 1px oklch(from var(--ground) 0.5 calc(c * 3) h); /* The same face on a round knob, such as the disc beside a card's name or a meeting's chevron: no line along its foot. */ --white-knob: linear-gradient(oklch(from var(--ground) calc(l + 0.1) calc(c * 0.5) h), oklch(from var(--ground) l calc(c * 0.5) h)); /* The small arrow at the right of a menu, in the quiet text colour, laid over the white face: two halves of a square make its point. */ --menu-arrow: linear-gradient(45deg, transparent calc(50% - 0.5px), var(--muted) 50%) right 1.05rem center / 0.3rem 0.3rem no-repeat, linear-gradient(-45deg, transparent calc(50% - 0.5px), var(--muted) 50%) right 0.75rem center / 0.3rem 0.3rem no-repeat; /* Sunk into a band, as the page you are on is into the public bar. */ --sunk-face: oklch(from var(--ground-2) calc(l - 0.05) calc(c * 2) h); --sunk-face-lines: oklch(from var(--ground-2) calc(l - 0.2) calc(c * 2) h) 0px 1px 2px inset, rgba(255, 255, 255, 0.2) 0px 1px 1px; /* The ring round whatever the keyboard is on. */ --focus-ring: 2.5px solid var(--accent); /* The shade over a page while a box is open on it: the page's own dark, so it dims cool on the plumliners' pages and warm on the public side, rather than the brown of the old cream pages. A ::backdrop takes it from its box in browsers since early 2024; older ones fall back to the public side's dark, written beside each use (Alipasha, 21 Oct 2026). */ --backdrop: color-mix(in srgb, var(--charcoal) 45%, transparent); } /* Safari before 18 cannot work one colour out from another, as the oklch(from …) lines do, and leaves such a colour out altogether. Where light words sit on one, they would be left on a light ground, and a white button would lose its face and its edge. So for those browsers alone, the colours that matter are written out plainly: here, and beside the Sangha Finder link in site.css and the finder's bar in styles.css. The test asks for the newer way of working colours out, which Safari 16.4 to 17 know only in part, so they take these too. The values are what the lines above work out to (Alipasha, 20 Oct 2026). */ @supports not (color: oklch(from red calc(l + 0.1) c calc(h + 1))) { :root { --band: #5f636d; --band-line: #494d56; --dark-button: linear-gradient(#60697c, #494d56); --dark-button-hover: linear-gradient(#697185, #545861); --rail-current: linear-gradient(#5e6b88, #434f6a); } body { --white-face: var(--card); --white-face-hover: var(--card); --white-face-edge: var(--field-edge); --white-knob: var(--card); --sunk-face: var(--ground-2); } }