/* Termn app — calm, high-contrast, readable at arm's length. Type is large by default, targets are 44px, color never carries meaning alone. Tokens live in tokens.css (the brand's single source of truth); this file aliases them and applies them to the operational workspace. The component contract is spec/16-design-system.md; identity canon is spec/13-brand.md. Change tokens there first — a hex literal in this file is a review flag. Contents: 1. tokens & base 5. forms & controls 9. contact book & dialog 2. shell chrome 6. status & notices 10. participant / centred 3. layout primitives 7. checklist & steps 11. utilities (rhythm-locked) 4. buttons 8. tables & data 12. responsive */ @import url("tokens.css"); @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-600.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/source-serif-4-700.woff2") format("woff2"); } /* --- 1. tokens & base ------------------------------------------------------ */ :root { --paper: var(--t-paper); --surface: var(--t-surface); --surface-rest: var(--t-surface-rest); --ink: var(--t-ink); --ink-soft: var(--t-ink-soft); --ink-faint: var(--t-ink-faint); --line: var(--t-line); --line-strong: var(--t-line-strong); --hairline: var(--t-hairline); --elder-deep: var(--t-elder-deep); --elder: var(--t-elder); --elder-soft: var(--t-elder-soft); --elder-lift: var(--t-elder-lift); --green: var(--t-success); --green-soft: var(--t-success-soft); --green-line: var(--t-success-line); --amber: var(--t-attention); --amber-soft: var(--t-attention-soft); --amber-line: var(--t-attention-line); --red: var(--t-failure); --red-soft: var(--t-failure-soft); --red-line: var(--t-failure-line); --contact: var(--t-contact); --contact-soft: var(--t-contact-soft); --contact-line: var(--t-contact-line); --entity: var(--t-entity); --entity-soft: var(--t-entity-soft); --entity-line: var(--t-entity-line); --account: var(--t-account); --account-soft: var(--t-account-soft); --account-line: var(--t-account-line); --document: var(--t-document); --document-soft: var(--t-document-soft); --document-line: var(--t-document-line); --radius: var(--t-radius); --radius-control: var(--t-radius-control); --radius-s: var(--t-radius-s); --shadow: var(--t-shadow); --font: var(--t-sans); --serif: var(--t-serif); --mono: var(--t-mono); --script: var(--t-script); } * { box-sizing: border-box; } /* The hidden attribute always wins, even over an explicit display rule. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.55; } a { color: var(--elder); text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } h1, h2, h3 { line-height: 1.25; margin: 0 0 .4em; font-weight: 600; letter-spacing: -.01em; } h1 { font-size: 1.85rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; } p { margin: 0 0 1rem; } small, .small { font-size: .875rem; color: var(--ink-soft); } /* One focus signature everywhere: elder ring + soft halo (tokens.css). */ :focus-visible { outline: var(--t-focus-ring); outline-offset: 2px; box-shadow: var(--t-focus-halo); } /* Words that are only true on one side of the enhancement line — a button whose job changes once termn.js is running, say. Both are in the markup; the class on picks. Default to the no-JS wording so the page is right before any script runs and stays right if none ever does. */ .when-js { display: none; } html.js .when-js { display: inline; } html.js .when-no-js { display: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface); color: var(--elder); padding: 12px 16px; border: 2px solid var(--elder); border-radius: 0 0 var(--radius) 0; font-weight: 600; } .skip-link:focus { left: 0; } /* --- 2. shell chrome ------------------------------------------------------- */ .shell { display: flex; min-height: 100vh; } /* The rail is shell, not signal: the one dark field, and it stays quiet. The current decision on the work surface is the only bright thing. */ .rail { width: 232px; flex: 0 0 232px; background: var(--elder-deep); color: var(--t-on-dark-soft); padding: 20px 14px; display: flex; flex-direction: column; gap: 2px; } /* The wordmark signature: serif Term + bold lifted-blue n + one continuous rule under the whole word — and under nothing else. */ .rail .wordmark { margin: 4px 10px 20px; padding: 0 0 3px; width: max-content; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--t-on-dark); border-bottom: 2px solid var(--elder-lift); } .rail .wordmark span { color: var(--elder-lift); font-weight: 700; } .rail a { display: block; padding: 11px 12px; border-radius: var(--radius-control); color: var(--t-on-dark-soft); text-decoration: none; font-size: 1rem; min-height: 44px; } .rail a:hover { background: rgba(255, 254, 253, .07); color: var(--t-on-dark); } .rail a.current { background: rgba(255, 254, 253, .12); color: var(--t-on-dark); font-weight: 600; box-shadow: inset 3px 0 0 var(--elder-lift); } .rail a:focus-visible { outline-color: var(--elder-lift); box-shadow: none; } /* The menu wrapper exists for the phone fold; on desktop its children lay out as if it weren't there. */ .rail-menu { display: contents; } .rail-toggle { display: none; } /* A labelled group of destinations; the label is read, not shouted. */ .rail-group { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; } .rail-label { font-size: .78rem; color: var(--t-on-dark-muted); padding: 0 12px 6px; letter-spacing: .01em; } .rail .rail-foot { margin-top: auto; font-size: .875rem; color: var(--t-on-dark-muted); padding: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .rail .rail-foot a { display: inline; padding: 0; min-height: 0; color: var(--t-on-dark-soft); } .main { flex: 1; min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; border-bottom: 1px solid var(--line); background: var(--surface); min-height: 64px; } .topbar .org { font-weight: 600; } /* The organization switcher is chrome: compact, quiet, honest. */ .org-switch { display: inline-flex; align-items: center; gap: 8px; } .org-switch select { min-height: 36px; width: auto; padding: 6px 32px 6px 10px; font-size: .875rem; background-position: right 8px center; } .org-switch .btn { min-height: 36px; padding: 6px 12px; font-size: .875rem; } .content { padding: 28px; max-width: 1080px; } .content.narrow { max-width: 720px; } .page-head { margin-bottom: 24px; } .page-head p { color: var(--ink-soft); margin: 0; max-width: 64ch; } /* --- 3. layout primitives -------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; } .card.tight { padding: 16px 18px; } .card h2 { margin-bottom: .3em; } .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } /* A head's action box reaches well below the title's baseline; whatever follows keeps clear of it instead of being grazed. */ .card-head:not(:last-child) { margin-bottom: 10px; } .row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; } .row:hover { border-color: var(--line-strong); } .row .row-main { min-width: 0; flex: 1; } .row .row-title { font-weight: 600; margin-bottom: 2px; } .row .row-meta { color: var(--ink-soft); font-size: .94rem; } .row .row-side { flex: 0 0 auto; text-align: right; } .row.top { align-items: flex-start; } /* A whole row can be the link; the words inside keep their own color. */ a.row { text-decoration: none; color: inherit; } a.row:hover .row-title { text-decoration: underline; text-underline-offset: 2px; } /* The Elder anchor: the one current thing in view. One per viewport. */ .row.current, .card.current { border-color: var(--elder); box-shadow: 0 0 0 3px var(--elder-soft); } .stack > * + * { margin-top: 10px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .split { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; } .split > .split-main { flex: 1 1 460px; min-width: 0; } .split > .split-side { flex: 0 1 320px; } /* Words that sit on one reading line: a value and its label, a name and its meta. */ .baseline-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } /* A framed exhibit: QR codes, small images — presented, not decorated. */ .framed { display: inline-block; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 8px; } /* --- 4. buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 18px; border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; } .btn:hover { border-color: var(--ink-faint); background: var(--surface-rest); } .btn:active { background: var(--t-band-deep); } .btn.primary { background: var(--elder); border-color: var(--elder); color: var(--t-on-dark); } .btn.primary:hover { background: var(--elder-deep); border-color: var(--elder-deep); } .btn.danger { color: var(--red); border-color: var(--red-line); } .btn.danger:hover { border-color: var(--red); background: var(--red-soft); } .btn.quiet { border-color: transparent; background: transparent; color: var(--elder); padding-left: 4px; padding-right: 4px; } /* Small buttons keep the 44px target, so the height floor — not the declared padding — sets their vertical inset (~10px). The sides are widened to match so the label is not pinched against the border. */ .btn.small { min-height: 44px; padding: 10px 16px; font-size: .875rem; } .btn.block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; background: var(--t-band-deep); color: var(--ink-faint); border-color: var(--line-strong); } /* A submitting button holds its ground; the label says what is happening. */ .btn[aria-busy="true"] { opacity: .7; cursor: progress; } .btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; } /* Beside other things — a heading, a row's text, its neighbors in a row of buttons — a button never breaks its label mid-phrase; the layout folds around it instead. Alone in the flow it may still wrap rather than overflow, since some labels carry a name of any length. */ .card-head .btn, .btn-row .btn, .row .row-side .btn, .field-row .btn { white-space: nowrap; } /* --- 5. forms & controls --------------------------------------------------- */ .field { margin-bottom: 20px; } .field label { display: block; font-weight: 600; margin-bottom: 5px; } /* The heading over a group of controls no single one of them owns — a set of radios, a set of tickboxes. A