/* jackapps.site : trust-first document system. VARIANCE 3 · MOTION 2 · DENSITY 4. No external requests of any kind: the privacy policy promises none, so the font stack is the system stack and there are no icons. */ :root { color-scheme: light dark; --paper: #FAFAF8; --paper-sunk: #F2F2EE; --ink: #16161A; --muted: #5A5A63; --rule: #DEDED8; --rule-strong: #C4C4BC; /* Accent rule: shared legal pages are monochrome. An app page sets these three on and nothing else changes. --accent is display only (rules, marks); --accent-ink is the text-safe variant, AA on paper. */ --accent: var(--ink); --accent-ink: var(--ink); /* Radius lock: icons 22.5% (iOS squircle), every other surface 8px, nothing is a pill. */ --r: 8px; --measure: 34rem; --gutter: 1.25rem; } @media (prefers-color-scheme: dark) { :root { --paper: #0E0E10; --paper-sunk: #16161A; --ink: #ECECEA; --muted: #9B9BA4; --rule: #26262B; --rule-strong: #3A3A42; } } body.vial { --accent: #F5A623; --accent-ink: #8A5200; } body.graphable { --accent: #4A9EFF; --accent-ink: #0A58C2; } body.birdsmouth { --accent: #C9A227; --accent-ink: #7A5E00; } @media (prefers-color-scheme: dark) { body.vial { --accent-ink: #F5B54A; } body.graphable { --accent-ink: #7FBBFF; } body.birdsmouth { --accent-ink: #D9B84A; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* ---- shell ---------------------------------------------------------- */ .page { max-width: var(--measure); margin: 0 auto; padding: 3.5rem var(--gutter) 5rem; } /* A page that opens with a breadcrumb gets its top space from the crumb instead, so the rule under it sits at a consistent height on every page. */ .page:has(> .crumb) { padding-top: 0; } @supports not selector(:has(*)) { .page { padding-top: 0; } .page > h1:first-child { padding-top: 3.5rem; } } .page.wide { max-width: 46rem; } .crumb { font-size: .8125rem; line-height: 1.4; color: var(--muted); padding: 1.5rem 0; margin: 0 0 2.5rem; border-bottom: 1px solid var(--rule); } .crumb a { color: var(--muted); } .crumb .sep { padding: 0 .4em; color: var(--rule-strong); } .crumb strong { font-weight: 500; color: var(--ink); } /* ---- type ----------------------------------------------------------- */ h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -.021em; font-weight: 600; margin: 0 0 .5rem; } @media (min-width: 40rem) { h1 { font-size: 2.375rem; } } /* One standing rule under the title carries the app's accent. It is the only chromatic element on an app page that is not the icon itself. */ .title-rule { width: 2.5rem; height: 3px; background: var(--accent); border-radius: 2px; margin: 1.25rem 0 2rem; } h2 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.011em; font-weight: 600; margin: 2.75rem 0 .5rem; } h3 { font-size: 1.0625rem; font-weight: 600; margin: 1.75rem 0 .35rem; } p { margin: 0 0 1.1rem; } .lede { font-size: 1.125rem; line-height: 1.55; color: var(--muted); } .stand { font-size: .875rem; color: var(--muted); margin: 0 0 1.5rem; } ul { padding-left: 1.15rem; margin: 0 0 1.1rem; } li { margin-bottom: .5rem; } li::marker { color: var(--rule-strong); } a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: .18em; } a:hover { text-decoration-color: currentColor; } .page a:not(.plain) { color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 2px; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--paper-sunk); border-radius: 4px; padding: .1em .35em; } /* ---- home: the app list --------------------------------------------- */ .apps { list-style: none; padding: 0; margin: 2rem 0 0; } .apps > li { border-top: 1px solid var(--rule); padding: 2rem 0; } .app { display: flex; gap: 1.25rem; align-items: flex-start; } .app .icon { width: 68px; height: 68px; flex: none; border-radius: 22.5%; border: 1px solid var(--rule); display: block; } .app .body { flex: 1 1 0; min-width: 0; } .app h2 { margin: 0 0 .15rem; font-size: 1.1875rem; } .app .kind { font-size: .875rem; color: var(--muted); margin: 0 0 .6rem; } .app p { margin: 0 0 .85rem; font-size: .9375rem; } .links { font-size: .875rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; } @media (max-width: 30rem) { .app { gap: 1rem; } .app .icon { width: 52px; height: 52px; } } /* ---- screenshot ------------------------------------------------------ */ figure { margin: 2rem 0; } figure img { display: block; width: 100%; max-width: 280px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--paper-sunk); } figcaption { font-size: .8125rem; color: var(--muted); margin-top: .65rem; } /* ---- callout --------------------------------------------------------- */ .note { border-left: 3px solid var(--accent); background: var(--paper-sunk); border-radius: 0 var(--r) var(--r) 0; padding: 1rem 1.15rem; margin: 1.75rem 0; font-size: .9375rem; } .note p:last-child { margin-bottom: 0; } /* ---- foot ------------------------------------------------------------ */ .foot { border-top: 1px solid var(--rule); margin-top: 3.5rem; padding-top: 1.5rem; font-size: .875rem; color: var(--muted); } .foot nav { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; margin-bottom: .75rem; } .foot a { color: var(--muted); } .foot .fine { margin: 0; font-size: .8125rem; } /* ---- motion ---------------------------------------------------------- */ /* MOTION_INTENSITY 2: colour and underline transitions on interactive elements, nothing else. Nothing on this site moves on scroll. */ @media (prefers-reduced-motion: no-preference) { a { transition: text-decoration-color .15s ease, color .15s ease; } } /* ---- print ----------------------------------------------------------- */ /* These are legal documents. People print and file them. */ @media print { :root { --paper: #fff; --ink: #000; --muted: #333; --rule: #bbb; } body { font-size: 11pt; } .crumb, .foot nav { display: none; } .page { max-width: none; padding: 0; } h1, h2 { page-break-after: avoid; } a { text-decoration: none; } .page a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } .page a[href^="mailto"]::after { content: ""; } }