/* ========================================================================== OBSCURA OS - UNIFIED THEME SYSTEM & COLORWAYS Supports: 1. Cobalt (Default; still stored as "botanical" so saved choices keep working) 2. Deep & Royal Purple 3. Monochrome Slate Supports both Light and Dark modes with instant client-side switching. Zero server calls. Zero flicker. ========================================================================== */ /* -------------------------------------------------------------------------- 0. THE SYSTEM Type, space, corners and motion, each as one short scale. A value on this site comes from here or it is a mistake: design-lint.mjs and motion-lint.mjs count the literals that are left and fail when there are more of them than there were. -------------------------------------------------------------------------- */ /* Two faces from one superfamily, served from /fonts on this origin, so a page load asks no third party for anything. Source Sans 3 is the face of everything a person reads or works in; Source Serif 4 is for the H1 and H2 of a page that is read rather than used. Both are Latin subsets made with fontTools from the Adobe releases, with the layout features the site does not use taken out. The hinting stays in: without it Chrome set a t or an o a pixel apart from its neighbours at 13 to 16px. source-sans-3-latin.woff2 23.2 KB weight 200 to 900 source-sans-3-latin-italic.woff2 22.9 KB fetched only for italics source-serif-4-latin.woff2 33.6 KB weight 400 to 700, optical size fixed at 32 The serif was one 120 KB file with a live optical-size axis. Headings are 22 to 48px, and the cut for 32px serves all of them, so the axis was fixed there and three quarters of the file went with it. A first visit now costs 57 KB of type, preloaded from _headers, where it cost 120 KB. The system faces follow each name, so a missing file costs a flash of the fallback and nothing else. Licensed under the SIL Open Font License; the text is in /fonts/OFL.txt. */ @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/source-sans-3-latin.woff2) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215; } @font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url(/fonts/source-sans-3-latin-italic.woff2) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/source-serif-4-latin.woff2) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215; } /* The readable face, for somebody who finds the letters easier to tell apart in it: Atkinson Hyperlegible, drawn by the Braille Institute for low vision, where b, d, p and q, I, l and 1, and O and 0 are each shaped unlike the others, which is also what helps many readers with dyslexia. Chosen in Settings (theme.js, data-font). Nothing below names it but the rule under data-font, so a browser never fetches it for anybody who has not chosen it. Latin, in regular and bold and their italics, from the Braille Institute's release as packaged by Fontsource; licensed under the SIL Open Font License, the text of which is in /fonts/OFL-atkinson-hyperlegible.txt. atkinson-hyperlegible-latin-400-normal.woff2 16.8 KB atkinson-hyperlegible-latin-700-normal.woff2 17.1 KB atkinson-hyperlegible-latin-400-italic.woff2 17.9 KB atkinson-hyperlegible-latin-700-italic.woff2 18.1 KB */ @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2"); } @font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap; src: url(/fonts/atkinson-hyperlegible-latin-700-italic.woff2) format("woff2"); } /* What the text is set in for the moment before the webfonts arrive: a face every system has, scaled to take the same room as Source Sans 3 and Source Serif 4, so the swap changes the letters and moves nothing. The figures are the webfonts' own at weight 400, the body's (Source Sans 3's file defaults to 200, which is far narrower), against Arial's and Times's metrics: their average advance over a line of English and figures, and their ascent and descent, worked out with fontTools from the files in /fonts. Before this, every line on a slow first visit reflowed when the face arrived. */ @font-face { font-family: "Source Sans 3 Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 91.4%; ascent-override: 112.1%; descent-override: 43.8%; line-gap-override: 0%; } @font-face { font-family: "Source Serif 4 Fallback"; src: local("Times New Roman"), local("Times"), local("Liberation Serif"); size-adjust: 104.9%; ascent-override: 98.7%; descent-override: 31.9%; line-gap-override: 0%; } :root { /* Faces. --font-ui is the one face of the interface, headings included; --font-display is the serif, kept for what is a document rather than the interface: a letter, a manuscript, a printed book. Headings were set in it on some pages and in the sans on others, so moving from /apps to an application changed the face of its title (the owner, 21 October 2026: "messy"). --font-headline is the heading face, and it is the sans. The other names are kept because 298 pages name --font-sans and 113 name --font-serif in their own styles, and every one of them now lands on one of these two rather than on whatever the system has: --font-serif used to point at Iowan, Palatino or Georgia while the headlines were in Source Serif 4, so a page could show two serifs. */ --font-ui: "Source Sans 3", "Source Sans 3 Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Source Serif 4", "Source Serif 4 Fallback", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --font-sans: var(--font-ui); --font-serif: var(--font-display); --font-headline: var(--font-ui); /* The system monospace, for figures, codes and keys only. */ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* The type scale. Nine sizes and no others. Settings' text size multiplies them (Comfort, below); a page that sizes its own text in pixels multiplies by var(--text-scale, 1) to follow it. */ --text-2xs: 12px; --text-xs: 13px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 48px; --leading-ui: 1.35; --leading-prose: 1.6; --measure: 68ch; /* Space, on a 4px grid. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Corners: a control, a card or field, a dialog, a pill. --radius-xl is the dialog's corner under an older name, kept for the pages that use it. A page that declares its own radii in its own :root still wins. */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 12px; --radius-pill: 999px; /* One stroke for every line icon, on a 24px grid. */ --icon-stroke: 1.5; /* Motion. Five durations and four curves, and nothing else anywhere. --dur-1 90ms a press, a toggle, a checkbox --dur-2 150ms hover, colour, the focus ring, a theme change --dur-3 220ms menus, popovers, dialogs and notices coming in --dur-4 300ms panels, a page arriving, an application opening --dur-5 450ms the one entrance on the front door, once a visit Leaving takes two thirds of arriving (the -out values), because what goes away no longer needs looking at. --ease-standard is for anything that arrives or moves, --ease-exit for anything leaving, --ease-emph only for large entrances, and --ease-spring only for something small landing - a notice, a tick, an icon arriving in its tile - where a hair of overshoot reads as weight. --stagger is the step between the items of a list, which never runs to more than eight. --dur-turn and --dur-orbit are the two durations that are not entrances: a whole turn of the mark (motion.js) while it is pointed at, and a whole turn of the slow turn every copy of the mark is always in. Both are loops, not something anybody waits for. */ --dur-1: 90ms; --dur-2: 150ms; --dur-3: 220ms; --dur-4: 300ms; --dur-5: 450ms; --dur-2-out: 100ms; --dur-3-out: 150ms; --dur-4-out: 200ms; --stagger: 35ms; /* The same step, kept for a gentle fade where --stagger is nought. */ --dur-gentle-step: 35ms; --dur-turn: 1400ms; --dur-orbit: 10000ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-emph: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.32, 1.22, 0.52, 1); /* Counting a figure up (OBSCURA.countUp): long enough to be read as a count, and in figures that do not change width as they turn over. */ --count-dur: 600ms; --count-ease: var(--ease-emph); /* A loading placeholder (.os-skel) waits this long before it shows, and its light crosses it once in --dur-sweep, for as long as it is there. */ --dur-wait: 300ms; --dur-sweep: 1200ms; /* The names the site used before these, for the pages and scripts that still say them. Nothing new should. */ --ease-out: var(--ease-emph); --ease-in-out: var(--ease-standard); --ease-surface: var(--ease-standard); --motion-fast: var(--dur-1); --motion-base: var(--dur-2); --motion-slow: var(--dur-4); --dur-fast: var(--dur-2); } /* -------------------------------------------------------------------------- 1. COLORWAY: Cobalt (Default) -------------------------------------------------------------------------- */ :root, :root[data-color-theme="botanical"] { --paper: #F8F7F4; --paper-raised: #FFFFFF; --paper-inset: #F1EFEA; --rule: #E5E2DB; --rule-strong: #CBC7BE; --ink: #17171B; --ink-soft: #4A4A54; --ink-mid: #4A4A54; --ink-faint: #6B6B73; --accent: #2E54C8; --accent-strong: #1F3FA6; --accent-soft: #E4EAF8; --accent-border: rgba(46, 84, 200, 0.35); --good: #3A7149; --good-soft: #D9EADD; --danger: #A6432F; --danger-soft: #F0DAD3; /* Warning amber. Unlike the accent it does not follow the colourway, because a warning that changes colour with the decoration stops reading as a warning. Several pages had it hard coded for a dark background, which left them at 2.25 against a light one. */ --warn: #7E5812; --warn-soft: #F6EBD5; /* The focus ring, and the border of anything drawn in the accent. Both were a gold left over from the Botanical colourway, so a blue site had a gold ring and gold outlines; every other colourway already used its own accent here. The ring is the accent itself, which is 6.1:1 on this paper and 7.9:1 on the dark one, well over the 3:1 a focus indicator needs, and it is the same colour as the ring command-palette.js draws on every page, so a page that styles its own ring with this token no longer draws a second colour. */ --focus: #2E54C8; --card-bg: var(--paper-raised); } :root[data-theme="dark"], :root[data-color-theme="botanical"][data-theme="dark"] { --paper: #121215; --paper-raised: #19191E; --paper-inset: #0E0E11; --rule: #2A2A31; --rule-strong: #3B3B45; --ink: #ECECF1; --ink-soft: #B8B8C3; --ink-mid: #B8B8C3; --ink-faint: #878792; --accent: #8AA4FF; --accent-strong: #A9BCFF; --accent-soft: #1B2340; --accent-border: rgba(138, 164, 255, 0.35); --good: #7FCB93; --good-soft: #1E3324; --danger: #E08669; --danger-soft: #3A2420; --warn: #E0B05F; --warn-soft: #332710; --focus: #8AA4FF; --card-bg: var(--paper-raised); } /* -------------------------------------------------------------------------- 2. COLORWAY: Royal Purple & Royal Purple -------------------------------------------------------------------------- */ :root[data-color-theme="purple"] { --paper: #F3F1F7 !important; --paper-raised: #FAF9FD !important; --paper-inset: #E8E4F0 !important; --rule: #D1CADE !important; --rule-strong: #B4A9C9 !important; --ink: #1D172A !important; --ink-soft: #52476A !important; --ink-mid: #52476A !important; --ink-faint: #6B6180 !important; --accent: #7839D6 !important; --accent-strong: #5924A8 !important; --accent-soft: #E8DCFC !important; --accent-border: rgba(120, 57, 214, 0.35) !important; --good: #2B7442 !important; --good-soft: #D7EDE0 !important; --danger: #B33927 !important; --danger-soft: #F4DFDB !important; --focus: #7839D6 !important; --card-bg: var(--paper-raised) !important; } :root[data-color-theme="purple"][data-theme="dark"] { --paper: #110D1A !important; --paper-raised: #191424 !important; --paper-inset: #0C0913 !important; --rule: #2F2542 !important; --rule-strong: #493B63 !important; --ink: #ECE6F6 !important; --ink-soft: #B6ABCE !important; --ink-mid: #B6ABCE !important; --ink-faint: #8D80A6 !important; --accent: #A86CF8 !important; --accent-strong: #C497FA !important; --accent-soft: #2B1842 !important; --accent-border: rgba(168, 108, 248, 0.4) !important; --good: #5ED995 !important; --good-soft: #153424 !important; --danger: #E68875 !important; --danger-soft: #381E19 !important; --focus: #A86CF8 !important; --card-bg: var(--paper-raised) !important; } /* -------------------------------------------------------------------------- 3. COLORWAY: Monochrome Slate -------------------------------------------------------------------------- */ :root[data-color-theme="monochrome"] { --paper: #F5F5F5 !important; --paper-raised: #FFFFFF !important; --paper-inset: #EAEAEA !important; --rule: #D2D2D2 !important; --rule-strong: #B0B0B0 !important; --ink: #151515 !important; --ink-soft: #484848 !important; --ink-mid: #484848 !important; --ink-faint: #686868 !important; --accent: #262626 !important; --accent-strong: #000000 !important; --accent-soft: #E5E5E5 !important; --accent-border: rgba(40, 40, 40, 0.35) !important; --good: #3A6E4F !important; --good-soft: #DDEEE3 !important; --danger: #A8382B !important; --danger-soft: #F2DCD9 !important; --focus: #262626 !important; --card-bg: var(--paper-raised) !important; } :root[data-color-theme="monochrome"][data-theme="dark"] { --paper: #121212 !important; --paper-raised: #1C1C1C !important; --paper-inset: #0A0A0A !important; --rule: #2C2C2C !important; --rule-strong: #444444 !important; --ink: #EFEFEF !important; --ink-soft: #B2B2B2 !important; --ink-mid: #B2B2B2 !important; --ink-faint: #8E8E8E !important; --accent: #E0E0E0 !important; --accent-strong: #FFFFFF !important; --accent-soft: #282828 !important; --accent-border: rgba(224, 224, 224, 0.35) !important; --good: #68D391 !important; --good-soft: #1B3324 !important; --danger: #E28578 !important; --danger-soft: #381F1C !important; --focus: #E0E0E0 !important; --card-bg: var(--paper-raised) !important; } /* -------------------------------------------------------------------------- 4. COLORWAY: Atlas Blue Cool slate paper with a deep steel-blue accent. Reads as calm and technical without going cold — pairs well with dense tool UIs. -------------------------------------------------------------------------- */ :root[data-color-theme="atlas"] { --paper: #ECEFF4 !important; --paper-raised: #F6F8FB !important; --paper-inset: #E1E7F0 !important; --rule: #C4D0E0 !important; --rule-strong: #9CAEC6 !important; --ink: #16222F !important; --ink-soft: #42566C !important; --ink-mid: #42566C !important; --ink-faint: #596776 !important; --accent: #2C5D96 !important; --accent-strong: #1E4676 !important; --accent-soft: #D2E0F1 !important; --accent-border: rgba(44, 93, 150, 0.35) !important; --good: #2F7358 !important; --good-soft: #D6EAE1 !important; --danger: #A63F3F !important; --danger-soft: #F2DBDB !important; --focus: #2C5D96 !important; --card-bg: var(--paper-raised) !important; } :root[data-color-theme="atlas"][data-theme="dark"] { --paper: #0E151E !important; --paper-raised: #161F2B !important; --paper-inset: #090F16 !important; --rule: #26364A !important; --rule-strong: #3B5170 !important; --ink: #E4EBF3 !important; --ink-soft: #B0BFD1 !important; --ink-mid: #B0BFD1 !important; --ink-faint: #8798AC !important; --accent: #6BA6E8 !important; --accent-strong: #93C2F5 !important; --accent-soft: #1B2C42 !important; --accent-border: rgba(107, 166, 232, 0.35) !important; --good: #6FC7A2 !important; --good-soft: #16302A !important; --danger: #E58A8A !important; --danger-soft: #3A2224 !important; --focus: #6BA6E8 !important; --card-bg: var(--paper-raised) !important; } /* -------------------------------------------------------------------------- 5. COLORWAY: Verdant A cooler, more saturated green than Botanical — emerald accent on a crisp mint-tinted paper, rather than Botanical's warm sage and gold. -------------------------------------------------------------------------- */ :root[data-color-theme="verdant"] { --paper: #EAF1EC !important; --paper-raised: #F4F9F5 !important; --paper-inset: #DEEAE1 !important; --rule: #BDD4C5 !important; --rule-strong: #95B4A0 !important; --ink: #12241A !important; --ink-soft: #3C5847 !important; --ink-mid: #3C5847 !important; --ink-faint: #556B5E !important; --accent: #146B50 !important; --accent-strong: #0C4E39 !important; --accent-soft: #CCE7DA !important; --accent-border: rgba(23, 121, 90, 0.35) !important; --good: #29714A !important; --good-soft: #D5EBDD !important; --danger: #A8442F !important; --danger-soft: #F1DCD6 !important; --focus: #17795A !important; --card-bg: var(--paper-raised) !important; } :root[data-color-theme="verdant"][data-theme="dark"] { --paper: #0B1710 !important; --paper-raised: #12211A !important; --paper-inset: #071009 !important; --rule: #21382B !important; --rule-strong: #35543F !important; --ink: #E2EFE7 !important; --ink-soft: #ABC5B5 !important; --ink-mid: #ABC5B5 !important; --ink-faint: #829C8C !important; --accent: #45C48D !important; --accent-strong: #6FDCA9 !important; --accent-soft: #12301F !important; --accent-border: rgba(69, 196, 141, 0.35) !important; --good: #64D69C !important; --good-soft: #133024 !important; --danger: #E2896F !important; --danger-soft: #35211C !important; --focus: #45C48D !important; --card-bg: var(--paper-raised) !important; } /* -------------------------------------------------------------------------- 9. COLORWAY: Tide Sea glass and deep teal: a cool blue-green that is neither Atlas's navy nor Verdant's leaf. -------------------------------------------------------------------------- */ :root[data-color-theme="tide"] { --paper: #EDF3F3 !important; --paper-raised: #F7FBFB !important; --paper-inset: #DFEBEB !important; --rule: #C2D6D6 !important; --rule-strong: #98B5B5 !important; --ink: #122223 !important; --ink-soft: #3C5657 !important; --ink-mid: #3C5657 !important; --ink-faint: #546C6D !important; --accent: #127179 !important; --accent-strong: #0B585F !important; --accent-soft: #CDE6E7 !important; --accent-border: rgba(18, 113, 121, 0.35) !important; --good: #2F7358 !important; --good-soft: #D6EAE1 !important; --danger: #A6423A !important; --danger-soft: #F2DEDB !important; --focus: #127179 !important; --card-bg: var(--paper-raised) !important; } :root[data-color-theme="tide"][data-theme="dark"] { --paper: #0A1617 !important; --paper-raised: #122021 !important; --paper-inset: #060F10 !important; --rule: #22373A !important; --rule-strong: #375457 !important; --ink: #E2EFEF !important; --ink-soft: #ABC4C5 !important; --ink-mid: #ABC4C5 !important; --ink-faint: #7A9496 !important; --accent: #4FC5CE !important; --accent-strong: #7FDCE2 !important; --accent-soft: #0F3034 !important; --accent-border: rgba(79, 197, 206, 0.35) !important; --good: #6FC7A2 !important; --good-soft: #16302A !important; --danger: #E9897F !important; --danger-soft: #37211E !important; --focus: #4FC5CE !important; --card-bg: var(--paper-raised) !important; } /* -------------------------------------------------------------------------- 10. COLORWAY: Ember Warm orange on a pale clay paper. The accent is deep enough to read as text on white, which a bright orange is not. -------------------------------------------------------------------------- */ :root[data-color-theme="ember"] { --paper: #FBF2EC !important; --paper-raised: #FEF9F5 !important; --paper-inset: #F3E5DA !important; --rule: #E2CDBD !important; --rule-strong: #C4A48C !important; --ink: #2A1A10 !important; --ink-soft: #5C4436 !important; --ink-mid: #5C4436 !important; --ink-faint: #75594A !important; --accent: #9E4310 !important; --accent-strong: #7E340B !important; --accent-soft: #F7DECB !important; --accent-border: rgba(158, 67, 16, 0.35) !important; --good: #3D6F49 !important; --good-soft: #DBEADD !important; --danger: #A33526 !important; --danger-soft: #F5DCD7 !important; --focus: #9E4310 !important; --card-bg: var(--paper-raised) !important; } :root[data-color-theme="ember"][data-theme="dark"] { --paper: #17100B !important; --paper-raised: #211812 !important; --paper-inset: #0F0A06 !important; --rule: #3A2A1F !important; --rule-strong: #57402F !important; --ink: #F5E7DB !important; --ink-soft: #CBB2A0 !important; --ink-mid: #CBB2A0 !important; --ink-faint: #A38C7C !important; --accent: #F08A4B !important; --accent-strong: #FBA76D !important; --accent-soft: #3A2413 !important; --accent-border: rgba(240, 138, 75, 0.35) !important; --good: #7FCB93 !important; --good-soft: #1E3324 !important; --danger: #EC8A7A !important; --danger-soft: #38211D !important; --focus: #F08A4B !important; --card-bg: var(--paper-raised) !important; } /* -------------------------------------------------------------------------- 11. COLORWAY: Ink Near-black indigo with a cool grey paper. The quietest of the coloured ways, for reading. -------------------------------------------------------------------------- */ :root[data-color-theme="ink"] { --paper: #F2F3F7 !important; --paper-raised: #FAFBFD !important; --paper-inset: #E6E8EF !important; --rule: #CFD2DE !important; --rule-strong: #A6ABBD !important; --ink: #14161F !important; --ink-soft: #3F4457 !important; --ink-mid: #3F4457 !important; --ink-faint: #585E73 !important; --accent: #333C66 !important; --accent-strong: #242B4D !important; --accent-soft: #DCDFEE !important; --accent-border: rgba(51, 60, 102, 0.35) !important; --good: #2F7358 !important; --good-soft: #D6EAE1 !important; --danger: #A33B44 !important; --danger-soft: #F2DADD !important; --focus: #333C66 !important; --card-bg: var(--paper-raised) !important; } :root[data-color-theme="ink"][data-theme="dark"] { --paper: #0C0D14 !important; --paper-raised: #14161F !important; --paper-inset: #07080D !important; --rule: #242838 !important; --rule-strong: #3A4056 !important; --ink: #E7E9F2 !important; --ink-soft: #B3B8CC !important; --ink-mid: #B3B8CC !important; --ink-faint: #838AA3 !important; --accent: #8D97D8 !important; --accent-strong: #AAB3E8 !important; --accent-soft: #1C2036 !important; --accent-border: rgba(141, 151, 216, 0.35) !important; --good: #7FCB93 !important; --good-soft: #1E3324 !important; --danger: #E58A93 !important; --danger-soft: #341F24 !important; --focus: #8D97D8 !important; --card-bg: var(--paper-raised) !important; } /* -------------------------------------------------------------------------- 12. COLORWAY: Sepia Old paper and brown ink. Warm, low-contrast-looking and still well above the contrast floor. -------------------------------------------------------------------------- */ :root[data-color-theme="sepia"] { --paper: #F6EFE2 !important; --paper-raised: #FCF7ED !important; --paper-inset: #EBE1CF !important; --rule: #DACBB2 !important; --rule-strong: #BCA684 !important; --ink: #241C10 !important; --ink-soft: #544733 !important; --ink-mid: #544733 !important; --ink-faint: #6B5C45 !important; --accent: #7A5417 !important; --accent-strong: #5E4010 !important; --accent-soft: #EEDCBE !important; --accent-border: rgba(122, 84, 23, 0.35) !important; --good: #3D6F49 !important; --good-soft: #DDEADC !important; --danger: #9E3F2C !important; --danger-soft: #F1DCD5 !important; --focus: #7A5417 !important; --card-bg: var(--paper-raised) !important; } :root[data-color-theme="sepia"][data-theme="dark"] { --paper: #16120B !important; --paper-raised: #1F1A11 !important; --paper-inset: #0E0B06 !important; --rule: #362C1E !important; --rule-strong: #51432E !important; --ink: #F2E8D6 !important; --ink-soft: #C8B99E !important; --ink-mid: #C8B99E !important; --ink-faint: #968871 !important; --accent: #D8AC5E !important; --accent-strong: #E9C684 !important; --accent-soft: #372A14 !important; --accent-border: rgba(216, 172, 94, 0.35) !important; --good: #8AC998 !important; --good-soft: #20321F !important; --danger: #E3907B !important; --danger-soft: #37221B !important; --focus: #D8AC5E !important; --card-bg: var(--paper-raised) !important; } /* -------------------------------------------------------------------------- 13. COLORWAY: High contrast For eyes that need the most difference between the words and the paper: black on white, and white on black, with every rule, edge and field border drawn dark enough to see (4.5:1 or more, where the other colourways keep a rule at a quiet 1.3:1). The accent is a deep blue in light and a yellow in dark, the two colours that stay furthest from the paper for the most kinds of colour vision. The faint ink, the one the other colourways keep for captions, is still 10:1 here. The focus ring is drawn wider (below, after the ring itself). -------------------------------------------------------------------------- */ :root[data-color-theme="contrast"] { --paper: #FFFFFF !important; --paper-raised: #FFFFFF !important; --paper-inset: #EFEFEF !important; --rule: #767676 !important; --rule-strong: #000000 !important; --ink: #000000 !important; --ink-soft: #1F1F1F !important; --ink-mid: #1F1F1F !important; --ink-faint: #383838 !important; --accent: #0036A8 !important; --accent-strong: #00267A !important; --accent-soft: #DCE5FA !important; --accent-border: rgba(0, 54, 168, 0.7) !important; --good: #155A27 !important; --good-soft: #DCEFE1 !important; --danger: #9C1A08 !important; --danger-soft: #FBE0DB !important; --warn: #5A3C00 !important; --warn-soft: #FFF0D0 !important; --focus: #0036A8 !important; --card-bg: var(--paper-raised) !important; } :root[data-color-theme="contrast"][data-theme="dark"] { --paper: #000000 !important; --paper-raised: #0D0D0D !important; --paper-inset: #000000 !important; --rule: #8F8F8F !important; --rule-strong: #FFFFFF !important; --ink: #FFFFFF !important; --ink-soft: #EBEBEB !important; --ink-mid: #EBEBEB !important; --ink-faint: #CCCCCC !important; --accent: #FFD60A !important; --accent-strong: #FFE45C !important; --accent-soft: #2E2600 !important; --accent-border: rgba(255, 214, 10, 0.7) !important; --good: #7EE0A0 !important; --good-soft: #0E2A18 !important; --danger: #FF8A7A !important; --danger-soft: #3A0F0A !important; --warn: #FFC66B !important; --warn-soft: #2E1F00 !important; --focus: #FFD60A !important; --card-bg: var(--paper-raised) !important; } /* -------------------------------------------------------------------------- TEXT THAT SITS ON AN ACCENT BACKGROUND A number of buttons carry an inline style of the shape background:var(--accent-strong); color:#fff. That is fine while the accent is dark, and invisible the moment it is not - which is every dark mode, and Monochrome Slate worst of all, where the accent is nearly white. The button was still there; it just had white text on a white pill. --on-accent carries the readable colour for whichever theme is in play, and the attribute selectors below reach the inline styles, which nothing in a stylesheet can otherwise override. -------------------------------------------------------------------------- */ /* Six pages (LOCKBOX, REDLINE, SCRUB, SEAL, X-RAY and the security page) ask for --paper-2, a name from an earlier palette that no colourway defines, and fell back to the fixed dark tone they carry inline: a near-black card on a light page. It resolves to the raised paper tone here, so it follows every colourway and mode like the rest. */ :root { --paper-2: var(--paper-raised); } :root { --on-accent: #FFFFFF; } :root[data-theme="dark"] { --on-accent: var(--paper); } /* The same problem for a filled danger button. In dark mode --danger is a pale salmon, so white text on it came out at 2.7 to 1. Text on a danger fill takes this instead, and it flips with the mode like --on-accent. */ :root { --on-danger: #FFFFFF; } :root[data-theme="dark"] { --on-danger: var(--paper); } /* The same swap when the dark values come from the device setting rather than the attribute. Choosing "System" in Settings removes data-theme so the prefers-color-scheme rules further down take over, and every token went dark except this one: it stayed white, so a Save or Join button on a pale dark-mode accent had white text on it. Light opts out, as below. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --on-accent: var(--paper); --on-danger: var(--paper); } } /* Five colours for the series of a chart, in this order and never cycled: blue, rust, teal, ochre, violet. Each mode's set was checked against its paper for lightness, chroma, contrast and the separation of neighbours under the three common kinds of colour blindness (first drawn by OBSCURA Research's charts). */ :root { --chart-1: #2f6db5; --chart-2: #c0562f; --chart-3: #1f8ea8; --chart-4: #a8841f; --chart-5: #8a4fb5; } :root[data-theme="dark"] { --chart-1: #4f86d0; --chart-2: #d0684a; --chart-3: #2f99b5; --chart-4: #ad8728; --chart-5: #9d70cc; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chart-1: #4f86d0; --chart-2: #d0684a; --chart-3: #2f99b5; --chart-4: #ad8728; --chart-5: #9d70cc; } } /* A sheet of paper: the colours of a page in a document, which stay those of paper in dark mode as Word's and Google Docs' do, so what is on the screen is what prints and a colour is judged against white. Docs uses them for its pages unless View, Dark page, is ticked. They are the light colourway's own values and do not change with the mode. */ :root { --print-paper: #FFFFFF; --print-ink: #17171B; --print-ink-soft: #4A4A54; --print-ink-faint: #6B6B73; --print-rule: #E5E2DB; --print-rule-strong: #CBC7BE; --print-inset: #F1EFEA; --print-accent: #2E54C8; --print-accent-strong: #1F3FA6; --print-accent-soft: #E4EAF8; } /* The product marks' colour (the tiles on the front door, /workspace and /other-suites). A mark brings only a hue, --ico-h, an OKLCH angle; these make the rest of it, one set for light and one for dark: --ico-l, --ico-c the line: OKLCH lightness and chroma. One lightness for every hue gives every mark the same contrast, which is what OKLCH is for. --ico-tint how much of the line is mixed into the tile's paper for the square behind it, at its foot; --ico-tint-top at its head, so the square is lit from above. --ico-plane the strength of the plane inside the line. The line clears 4.1:1 against its tint in light and 6.1:1 in dark on every colourway; contrast.mjs measures it and wants 3:1. Monochrome takes the chroma to nought, below, so every mark there is grey. */ :root { --ico-l: 0.5; --ico-c: 0.13; --ico-tint: 13%; --ico-tint-top: 7%; --ico-plane: 0.2; } :root[data-theme="dark"] { --ico-l: 0.83; --ico-c: 0.1; --ico-tint: 19%; --ico-tint-top: 26%; --ico-plane: 0.24; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ico-l: 0.83; --ico-c: 0.1; --ico-tint: 19%; --ico-tint-top: 26%; --ico-plane: 0.24; } } :root[data-color-theme="monochrome"] { --ico-c: 0; } [style*="var(--accent"][style*="color:#fff" i], [style*="var(--accent"][style*="color: #fff" i] { color: var(--on-accent) !important; } /* The same trap in the page stylesheets: a button filled with the accent colour and given white text. Every one of these goes white on white in a dark theme, and invisibly so, because the button is still there. .vs-btn.primary is the Choose Folder button vault-settings.js writes into the Settings page, with the same white text baked into its stylesheet. */ .btn-primary, button.btn-primary, .action-btn.primary, button.action-btn.primary, a.action-btn.primary, .tab-btn.active, .vs-btn.primary { color: var(--on-accent) !important; } /* -------------------------------------------------------------------------- 6. COLORWAY: Signal Yellow Bright paper, deep gold accents. Yellow on white has almost no contrast, so the accent is a dark gold and the bright yellow is kept for fills. -------------------------------------------------------------------------- */ :root[data-color-theme="yellow"] { --paper: #FBF6E4 !important; --paper-raised: #FFFCF0 !important; --paper-inset: #F3ECD6 !important; --rule: #E2D5AB !important; --rule-strong: #C4B172 !important; --ink: #2A2308 !important; --ink-soft: #5A4E22 !important; --ink-mid: #5A4E22 !important; --ink-faint: #76693B !important; --accent: #7E6106 !important; --accent-strong: #6B5200 !important; --accent-soft: #FAE9A6 !important; --accent-border: rgba(138, 107, 0, 0.35) !important; --good: #48761D !important; --good-soft: #E7F1CF !important; --danger: #A8442F !important; --danger-soft: #F3DDD7 !important; --focus: #8A6B00 !important; --card-bg: var(--paper-raised) !important; } :root[data-color-theme="yellow"][data-theme="dark"] { --paper: #16130A !important; --paper-raised: #1F1A0D !important; --paper-inset: #0F0D06 !important; --rule: #3A3116 !important; --rule-strong: #5A4C25 !important; --ink: #F4EDD6 !important; --ink-soft: #C9BC92 !important; --ink-mid: #C9BC92 !important; --ink-faint: #948861 !important; --accent: #F0C24B !important; --accent-strong: #FFD976 !important; --accent-soft: #30260E !important; --accent-border: rgba(240, 194, 75, 0.35) !important; --good: #A9CE6A !important; --good-soft: #22300F !important; --danger: #E2896F !important; --danger-soft: #35211C !important; --focus: #F0C24B !important; --card-bg: var(--paper-raised) !important; } /* -------------------------------------------------------------------------- 7. COLORWAY: Ember Red -------------------------------------------------------------------------- */ :root[data-color-theme="red"] { --paper: #FBEEEC !important; --paper-raised: #FFF7F5 !important; --paper-inset: #F3E0DC !important; --rule: #E7C6BF !important; --rule-strong: #CE9A90 !important; --ink: #2B1512 !important; --ink-soft: #5E3630 !important; --ink-mid: #5E3630 !important; --ink-faint: #835A52 !important; --accent: #A62B1C !important; --accent-strong: #841F13 !important; --accent-soft: #F6D3CC !important; --accent-border: rgba(166, 43, 28, 0.35) !important; --good: #29714A !important; --good-soft: #D5EBDD !important; --danger: #8E1B0E !important; --danger-soft: #F3CDC6 !important; --focus: #A62B1C !important; --card-bg: var(--paper-raised) !important; } :root[data-color-theme="red"][data-theme="dark"] { --paper: #180E0C !important; --paper-raised: #221310 !important; --paper-inset: #0F0806 !important; --rule: #3D211C !important; --rule-strong: #5E332B !important; --ink: #F5E3DF !important; --ink-soft: #C9A79F !important; --ink-mid: #C9A79F !important; --ink-faint: #A07F77 !important; --accent: #F0705A !important; --accent-strong: #FF9481 !important; --accent-soft: #351813 !important; --accent-border: rgba(240, 112, 90, 0.35) !important; --good: #64D69C !important; --good-soft: #133024 !important; --danger: #FF7F68 !important; --danger-soft: #3A1712 !important; --focus: #F0705A !important; --card-bg: var(--paper-raised) !important; } /* -------------------------------------------------------------------------- 8. COLORWAY: Rose -------------------------------------------------------------------------- */ :root[data-color-theme="pink"] { --paper: #FCEEF4 !important; --paper-raised: #FFF7FA !important; --paper-inset: #F5E0EA !important; --rule: #ECC6D8 !important; --rule-strong: #D399B4 !important; --ink: #2C1220 !important; --ink-soft: #62334C !important; --ink-mid: #62334C !important; --ink-faint: #855870 !important; --accent: #A81E63 !important; --accent-strong: #86134E !important; --accent-soft: #F8D3E4 !important; --accent-border: rgba(168, 30, 99, 0.35) !important; --good: #29714A !important; --good-soft: #D5EBDD !important; --danger: #983B28 !important; --danger-soft: #F3DDD7 !important; --focus: #A81E63 !important; --card-bg: var(--paper-raised) !important; } :root[data-color-theme="pink"][data-theme="dark"] { --paper: #170B12 !important; --paper-raised: #211018 !important; --paper-inset: #0E060A !important; --rule: #3C1E2E !important; --rule-strong: #5C3047 !important; --ink: #F7E1EC !important; --ink-soft: #CDA3BA !important; --ink-mid: #CDA3BA !important; --ink-faint: #A07A8F !important; --accent: #F274AB !important; --accent-strong: #FF9AC4 !important; --accent-soft: #331623 !important; --accent-border: rgba(242, 116, 171, 0.35) !important; --good: #64D69C !important; --good-soft: #133024 !important; --danger: #E2896F !important; --danger-soft: #35211C !important; --focus: #F274AB !important; --card-bg: var(--paper-raised) !important; } /* -------------------------------------------------------------------------- System & Base Polish -------------------------------------------------------------------------- */ :root { /* Older names for the system's own, from when the site loaded Spectral, Public Sans and IBM Plex Mono from Google. */ --os-radius-sm: var(--radius-sm); --os-radius-md: var(--radius-md); --os-radius-lg: var(--radius-lg); --os-font-display: var(--font-display); --os-font-ui: var(--font-ui); --os-font-mono: var(--font-mono); } /* Smooth color switching only during active theme toggles */ html.theme-transition, html.theme-transition *, html.theme-transition *:before, html.theme-transition *:after { transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard) !important; transition-delay: 0s !important; } /* Universal scrollbars respecting current colorway */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--paper-inset); } ::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: var(--radius-sm); } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* Accessible focus ring. The ring itself is !important, so a page that took outlines away still shows where the keyboard is. Where it sits is not: seventy-six controls draw theirs inside (outline-offset below 0) because the box they are in clips anything outside it, a tab strip or a segmented control, and an !important 2px here put every one of those rings outside again, where it was cut off. 2px outside is the default, and a control that says otherwise is now believed. */ *:focus-visible { outline: 2px solid var(--accent) !important; } :where(*):focus-visible { outline-offset: 2px; } /* High contrast: a ring a step wider, text in a field's placeholder dark enough to read, and a link in running text underlined, so it is never told from the words around it by its colour alone. */ :root[data-color-theme="contrast"] *:focus-visible { outline-width: 3px !important; } :root[data-color-theme="contrast"] ::placeholder { color: var(--ink-faint); opacity: 1; } :root[data-color-theme="contrast"] :is(p, li, dd, td) > a:not([class]) { text-decoration: underline; text-underline-offset: 0.15em; } /* The small things, said once for every page (12 October 2026). Each is in :where(), so it weighs nothing and any rule a page or an application writes for itself still wins. Selected text takes the colourway's own soft accent, in light and dark, rather than the browser's blue, which matched none of them. */ ::selection { background: var(--accent-soft); color: var(--ink); } /* A heading breaks where it reads well, and never leaves one word on a line of its own; running text avoids a last line of a single short word. Not inside something being typed in (Docs, Notes, a slide): there a balanced line would move the words already written as each new one arrives. The longhand, so a line a page keeps on one line (white-space: nowrap, inherited from a bar or a menu) stays on one line. */ :where(h1, h2, h3, h4, legend) { text-wrap-style: balance; } :where(p, li, dd, figcaption, blockquote, div.sub, div.hint, div.note) { text-wrap-style: pretty; } /* A drop zone's two centred lines, balanced like a heading's. */ :where(.dropzone, .drop, [class$="-drop"], [id$="Drop"]) { text-wrap-style: balance; } :where([contenteditable]:not([contenteditable="false"]), [contenteditable]:not([contenteditable="false"]) *) { text-wrap-style: auto; } /* Figures in a table, a meter or a result line up in columns. */ :where(td, th, output, meter, progress, time) { font-variant-numeric: tabular-nums; } /* A figure and its unit, or a short phrase, kept on one line ("7 days"). */ .ob-nobreak { white-space: nowrap; } /* What can be pressed shows a hand, and what cannot be pressed yet does not. */ :where(button:not(:disabled), summary, [role="button"]:not([aria-disabled="true"]), select:not(:disabled), input:is([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="range"], [type="submit"], [type="button"], [type="reset"]):not(:disabled), label:has(> input:is([type="checkbox"], [type="radio"]):not(:disabled))) { cursor: pointer; } :where(button:disabled, [role="button"][aria-disabled="true"], input:disabled, select:disabled, textarea:disabled) { cursor: default; } /* Firefox has no ::-webkit-scrollbar, so the bars above were its own grey there; this gives them the colourway's colours too. */ @supports not selector(::-webkit-scrollbar) { :root { scrollbar-color: var(--rule-strong) var(--paper-inset); } } /* There was a paid tier here once. It was removed: OBSCURA OS is free and every page says so. What was left behind was a hundred and ten lines styling a header badge, an upgrade link and a "pro active" state for markup that no page has carried for months, topped by a rule hiding all of it in case an old page still did. None of them do, so none of this is here any more. */ /* ========================================================================== UNIFIED OS TOPBAR & NAVIGATION BAR STYLING Sticky topbar, always visible without scrolling. Suite: HOME, WORKSPACE SUITE, SOVEREIGN SUITE ========================================================================== */ .os-topbar { position: sticky; top: 0; z-index: 9999; /* At the body's own level on every page, so its width does not depend on the wrapper a page happens to use: 1040 to match .app-wrapper, then the edge of the screen. */ width: 100%; max-width: 1040px; box-sizing: border-box; margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); margin-bottom: 24px; gap: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05); } .os-nav-tabs { display: flex; align-items: center; gap: 6px; background: var(--paper-inset); padding: 4px 6px; border-radius: var(--radius-md); border: 1px solid var(--rule); max-width: 100%; white-space: nowrap; } .os-nav-tabs::-webkit-scrollbar { display: none; } /* Three words, in the same face as the page. The bar used to carry six tabs in bold monospace capitals, each one opening a menu of every tool in its suite; the menus are gone and the words can be words. */ .nav-tab-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; letter-spacing: -0.005em; color: var(--ink-soft); transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), opacity var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard); text-transform: none; font-family: var(--font-sans); text-decoration: none; white-space: nowrap; flex-shrink: 0; line-height: 1.2; } .nav-tab-btn:hover { color: var(--ink); background: var(--paper-raised); } .nav-tab-btn.active { color: var(--accent-strong); background: var(--paper-raised); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); border: 1px solid var(--rule); font-weight: 600; } .os-brand-group { display: flex; align-items: center; gap: 12px; } .os-brand-col { display: flex; flex-direction: column; gap: 2px; } .os-brand-head { display: flex; align-items: center; gap: 8px; position: relative; } /* New on /whats-new since this browser last read it (os-nav.js). Placed over the bar just past the name, so arriving after the paint moves nothing; the box is a finger's width on a touch screen, the dot in it eight pixels. */ .os-new-dot { position: absolute; left: 100%; top: 50%; width: 28px; height: 28px; margin-left: 2px; transform: translateY(-50%); display: grid; place-items: center; border-radius: var(--radius-pill); animation: os-fade-in var(--dur-4) var(--ease-standard) backwards; } .os-new-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .os-new-dot:hover::before { background: var(--accent-strong); } .os-new-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; } @media (pointer: coarse) { .os-new-dot { width: 44px; height: 44px; margin-left: -6px; } } /* A link to /whats-new in the page itself: the same dot after its words, and the words for a screen reader. */ .os-new-link::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; vertical-align: 0.15em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .os-new-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .brand-title { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .brand-title span { color: var(--accent-strong); } .os-controls { display: flex; align-items: center; gap: 8px; } .btn-search { display: flex; align-items: center; gap: 8px; background: var(--paper-inset); border: 1px solid var(--rule); padding: 6px 12px; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), opacity var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard); font-family: inherit; } .btn-search:hover { background: var(--paper-raised); color: var(--ink); border-color: var(--rule-strong); } .search-kbd { font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: var(--text-2xs); background: var(--paper); border: 1px solid var(--rule); padding: 1px 5px; border-radius: var(--radius-sm); color: var(--ink-faint); } .btn-settings { display: flex; align-items: center; gap: 6px; background: var(--paper-inset); border: 1px solid var(--rule); padding: 6px 12px; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; text-decoration: none; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), opacity var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard); } .btn-settings:hover { background: var(--paper-raised); color: var(--ink); border-color: var(--rule-strong); } /* The header needs about 860px for the brand, the five tabs and the two controls to share one row. Below that (tablets in portrait, phones, and the 900px reading column on the text pages) the tabs take a second row of their own. The brand never breaks onto two lines. */ .brand-title { white-space: nowrap; } .os-brand-col { min-width: 0; } @media (max-width: 760px) { .os-topbar { flex-wrap: wrap; row-gap: 10px; } .os-nav-tabs { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } /* Centred when the five tabs fit, and still scrollable to the first tab when they do not (justify-content: center would hide it). */ .os-nav-tabs .nav-tab-btn:first-child { margin-left: auto; } .os-nav-tabs .nav-tab-btn:last-child { margin-right: auto; } } @media (max-width: 768px) { .os-topbar { top: 4px; padding: 8px 10px; gap: 8px; margin-bottom: 20px; } .nav-tab-btn { padding: 6px 10px; font-size: var(--text-xs); } } @media (max-width: 560px) { /* Phones. The header scrolls away with the page rather than pinning two rows to the top of a small screen. The two controls become icon buttons (their labels stay for screen readers) so the brand and the controls share the first row, and the tab row gets the room it needs by dropping HOME, which the brand mark already covers. */ .os-topbar { position: static; } .btn-search, .btn-settings { position: relative; gap: 0; padding: 8px 9px; } .btn-search > span:not(.search-kbd), .btn-settings > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .os-nav-tabs { gap: 4px; padding: 4px; } .nav-tab-btn { padding: 6px 10px; font-size: var(--text-xs); } } /* --------------------------------------------------------------- Narrow-screen corrections. The site footer is a single flex row of links. Adding About, Terms and Refunds pushed it to six items, which overflowed the viewport on a phone and made every page scroll sideways. The footer's inner container carries an inline style attribute, so these need !important to reach it — that is the reason, not laziness. Tables are given their own horizontal scroll rather than being allowed to widen the page: the pricing matrix on the Pass page was pushing 211px of overflow on a 390px screen. --------------------------------------------------------------- */ @media (max-width: 760px) { .os-footer { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .os-footer > div, .os-footer nav { display: flex !important; flex-wrap: wrap !important; gap: 8px 14px !important; max-width: 100% !important; /* A wrapping flex line stretches its items to the tallest one in it, so one two-word link made its whole row tall once a floor was set. */ align-items: center; align-content: center; } /* Every footer link was 43px: one pixel under the floor the rest of the site keeps, on the row that is the only way off a good many pages. */ .os-footer a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 2px 0; } /* Wide content scrolls inside itself instead of widening the page. Not inside an application (body.*-app): Plan's sheet and Gantt chart, and tables and canvases in the other apps, are laid out to exact widths and scroll in their own panes, and this made the sheet a block whose header no longer lined up with its rows. */ body:not([class*="-app"]) table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Nothing should be able to force the document wider than the screen. */ html, body { max-width: 100%; overflow-x: hidden; } body:not([class*="-app"]) :is(img, canvas, video, svg) { max-width: 100%; height: auto; } pre, code { white-space: pre-wrap; word-break: break-word; } } /* --------------------------------------------------------------- Prose pages: privacy, terms, refunds, about, why. These put the shared site topbar inside a 680px reading column. The topbar needs roughly 710px for its three groups (brand, nav, controls), so it was being squeezed into 636px: the OBSCURA OS wordmark wrapped onto three lines and the header read as broken. Fix is to widen the shell and keep the reading measure separately, so paragraphs stay comfortable while the header gets its room. The page's own