/* jobcards: one set of tokens, many themes, applied as data-theme on . graphite is branding/theme/tokens.css and stays the default. dusk, ink, plum, void, linen and paper are lifted from kempt (Habitual); hangar is ArkSaveThing's slate; startline and chalk are new light themes for working in a bright workshop, startline tuned to the old STARTRIGHT navy/red logo. Every theme retunes every token: a token that only exists in one theme is a bug in the others (kempt's rule). No literal colours below the token blocks; hovers and selections are tokens too, because amber-at-8% is invisible on a white ground. */ :root { /* Native widgets (date/time picker popups, scrollbars) follow this, so they stop rendering black-on-black on dark themes. Light themes flip it. */ color-scheme: dark; --bg: #161514; --panel: #1d1c1a; --panel2: #262523; --border: #383630; --well: #100f0e; --text: #dcdad2; --dim: #969488; --accent: #e0a63d; --hot: #3fc6dc; --on-accent: #131110; --danger: #e25b4a; --ok: #62a86b; --row-hover: rgba(224, 166, 61, .08); --row-selected: rgba(63, 198, 220, .22); --field-hover: #55524a; --shadow: rgba(0, 0, 0, .5); } [data-theme='dusk'] { --bg: #2e2b27; --panel: #383430; --panel2: #423e39; --border: #575149; --well: #262320; --text: #ece8de; --dim: #aaa294; --accent: #e9b155; --hot: #56cfe4; --on-accent: #1c1916; --danger: #e56553; --ok: #79b782; --row-hover: rgba(233, 177, 85, .1); --row-selected: rgba(86, 207, 228, .22); --field-hover: #6b6459; --shadow: rgba(15, 13, 11, .5); } [data-theme='ink'] { --bg: #0f1216; --panel: #161b21; --panel2: #1e242c; --border: #333d49; --well: #0a0d10; --text: #d8dee5; --dim: #8d97a3; /* cool chrome, warm importance: the pairing inverts here on purpose */ --accent: #5fb9d6; --hot: #ffb454; --on-accent: #0c1014; --danger: #e05d51; --ok: #66a87c; --row-hover: rgba(95, 185, 214, .09); --row-selected: rgba(255, 180, 84, .2); --field-hover: #46535f; --shadow: rgba(0, 0, 0, .55); } [data-theme='plum'] { --bg: #171220; --panel: #1f1929; --panel2: #2a2236; --border: #453a58; --well: #100c17; --text: #e2dcea; --dim: #a195b2; --accent: #c9a1e8; --hot: #ffc857; --on-accent: #1b1424; --danger: #e8604f; --ok: #6fb387; --row-hover: rgba(201, 161, 232, .09); --row-selected: rgba(255, 200, 87, .2); --field-hover: #55486b; --shadow: rgba(10, 6, 16, .55); } [data-theme='void'] { /* true black for OLED: panels carry the structure, the ground is off */ --bg: #000000; --panel: #101010; --panel2: #1a1a1a; --border: #34322d; --well: #050505; --text: #ece9e2; --dim: #9a978f; --accent: #ffbf47; --hot: #4fd7ef; --on-accent: #000000; --danger: #ff6a55; --ok: #6fc07c; --row-hover: rgba(255, 191, 71, .1); --row-selected: rgba(79, 215, 239, .22); --field-hover: #57513f; --shadow: rgba(0, 0, 0, .7); } [data-theme='hangar'] { /* ArkSaveThing's slate-and-cyan */ --bg: #14181d; --panel: #1c2229; --panel2: #232b34; --border: #2e3945; --well: #10141a; --text: #d7e0e8; --dim: #8496a5; --accent: #4fc3f7; --hot: #ffa726; --on-accent: #0d1217; --danger: #ef5350; --ok: #66bb6a; --row-hover: rgba(79, 195, 247, .08); --row-selected: rgba(255, 167, 38, .2); --field-hover: #435262; --shadow: rgba(0, 0, 0, .5); } [data-theme='linen'] { color-scheme: light; --bg: #eef0f2; --panel: #f9fafb; --panel2: #e3e6ea; --border: #c6ccd4; --well: #ffffff; --text: #23272c; --dim: #656d77; --accent: #33689e; --hot: #c2571f; --on-accent: #ffffff; --danger: #b23a2a; --ok: #3c7a4a; --row-hover: rgba(51, 104, 158, .08); --row-selected: rgba(194, 87, 31, .16); --field-hover: #9aa5b1; --shadow: rgba(30, 35, 45, .25); } [data-theme='paper'] { color-scheme: light; --bg: #f2eee5; --panel: #faf8f2; --panel2: #e9e4d8; --border: #cfc8b8; --well: #fffdf7; --text: #2b2822; --dim: #6f6a5d; --accent: #9a6a0c; --hot: #0d7d94; --on-accent: #ffffff; --row-hover: rgba(154, 106, 12, .08); --row-selected: rgba(13, 125, 148, .14); --danger: #b03a28; --ok: #3d7a47; --field-hover: #a89f8a; --shadow: rgba(45, 40, 30, .25); } [data-theme='startline'] { color-scheme: light; /* the old STARTRIGHT logo, navy and red, as a light theme */ --bg: #f4f5f7; --panel: #ffffff; --panel2: #e8ebf0; --border: #c3cad6; --well: #ffffff; --text: #14213d; --dim: #5b6579; --accent: #1c3564; --hot: #d92b2b; --on-accent: #ffffff; --danger: #c22417; --ok: #2f7a45; --row-hover: rgba(28, 53, 100, .07); --row-selected: rgba(217, 43, 43, .12); --field-hover: #8d99ad; --shadow: rgba(20, 33, 61, .25); } [data-theme='chalk'] { color-scheme: light; /* maximum daylight legibility: white ground, near-black ink, firm borders */ --bg: #ffffff; --panel: #f6f6f6; --panel2: #ececec; --border: #b9b9b9; --well: #ffffff; --text: #111111; --dim: #4d4d4d; --accent: #0a58c9; --hot: #b30f52; --on-accent: #ffffff; --danger: #c01f10; --ok: #1c6e34; --row-hover: rgba(10, 88, 201, .08); --row-selected: rgba(179, 15, 82, .12); --field-hover: #7d7d7d; --shadow: rgba(0, 0, 0, .2); } /* ---------- fonts ---------- Chosen separately from the palette (data-font on ). Segoe stays the default; each stack sets its own base size because x-heights differ. */ @font-face { font-family: 'Chivo'; src: url('fonts/chivo-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } :root { /* Chivo is the default face (self-hosted; old engines that cannot load woff2 fall through to Segoe via the literal font-family lines). */ --font-body: Chivo, "Segoe UI", system-ui, sans-serif; --font-display: Chivo, Bahnschrift, "Segoe UI", system-ui, sans-serif; --base-size: 15.5px; } [data-font='segoe'] { --font-body: "Segoe UI", system-ui, sans-serif; --font-display: Bahnschrift, "Segoe UI", sans-serif; } [data-font='verdana'] { --font-body: Verdana, Geneva, sans-serif; --base-size: 14px; } [data-font='trebuchet'] { --font-body: "Trebuchet MS", "Segoe UI", sans-serif; } [data-font='cambria'] { --font-body: Cambria, Georgia, serif; --base-size: 16px; } [data-font='georgia'] { --font-body: Georgia, "Times New Roman", serif; } * { box-sizing: border-box; } /* Literal graphite values come before every var(): Avant's Trident engine is IE11 underneath, which has no custom properties. It gets the default theme (no switching); anything newer overrides with the token immediately. */ body { margin: 0; background: #161514; background: var(--bg); color: #dcdad2; color: var(--text); font-family: "Segoe UI", system-ui, sans-serif; font-family: var(--font-body); font-size: 15.5px; font-size: var(--base-size); line-height: 1.5; } h1, h2 { font-family: var(--font-display); font-weight: 300; margin: 0 0 .6rem; } h1 { font-size: 1.7rem; } h2 { font-size: 1.05rem; color: var(--dim); margin-top: 1.2rem; } a { color: #e0a63d; color: var(--accent); text-decoration: underline; } a:hover { color: #dcdad2; color: var(--text); } /* ---------- masthead ---------- */ .masthead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.6rem; padding: .55rem 1.4rem; background: #1d1c1a; background: var(--panel); border-bottom: 1px solid #383630; border-bottom: 1px solid var(--border); } /* Mark plus stacked lockup: Jobcards over "a nanobyte tool". */ .wordmark-link { display: flex; align-items: center; gap: .8rem; color: #dcdad2; color: var(--text); text-decoration: none; line-height: 1.15; } .wordmark-stack { display: block; } .brandmark { height: 48px; width: auto; display: block; } .brandmark .stripe-a { fill: #e0a63d; fill: var(--accent); } .brandmark .stripe-b { fill: #969488; fill: var(--dim); opacity: .55; } .brandmark .mark-box { fill: none; stroke: #e0a63d; stroke: var(--accent); stroke-width: 1.4; } .brandmark .mark-text { fill: #e0a63d; fill: var(--accent); font-family: Bahnschrift, "Segoe UI", sans-serif; font-family: var(--font-display); font-weight: 700; letter-spacing: .08em; } .brandmark .mark-estd { fill: #969488; fill: var(--dim); letter-spacing: .14em; } .wordmark-name { display: block; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .02em; } .lockup { display: block; color: #969488; color: var(--dim); font-size: .72rem; letter-spacing: .04em; } .topnav { display: flex; align-items: center; gap: 1.2rem; } /* Sentence case, readable size. The small-caps spec read as a full-caps shout at nav size; recorded against branding APPLYING.md. */ .topnav a, .topnav .linklike { font-size: .95rem; font-weight: 500; color: #969488; color: var(--dim); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; } .topnav a:hover, .topnav .linklike:hover { color: var(--text); } .topnav a.active { color: var(--text); border-bottom-color: var(--accent); } .logout-form { display: inline; margin: 0; } .linklike { background: none; border: none; cursor: pointer; font-family: inherit; } .navsep { width: 1px; align-self: stretch; margin: .3rem 0; background: #383630; background: var(--border); } /* ---------- global find-anything (pattern from ArkSaveThing) ---------- */ .findwrap { position: relative; flex: 1; max-width: 24rem; min-width: 12rem; } .findwrap input { padding: .38rem .6rem; font-size: .9rem; } .findresults { position: absolute; top: 110%; left: 0; right: 0; z-index: 30; max-height: 60vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 8px 30px var(--shadow); padding: .25rem; } .fr-item { display: flex; align-items: baseline; gap: .5rem; padding: .35rem .5rem; cursor: pointer; font-size: .88rem; color: var(--text); text-decoration: none; } .fr-item:hover, .fr-item.active { background: var(--row-selected); color: var(--text); } .fr-item .fr-sub { color: var(--dim); font-size: .78rem; } .fr-item .fr-tag { margin-left: auto; font-size: .68rem; color: var(--dim); border: 1px solid var(--border); border-radius: 3px; padding: 0 .3rem; white-space: nowrap; } .fr-empty { padding: .4rem .5rem; color: var(--dim); font-size: .84rem; } /* ---------- layout ---------- */ .content { max-width: 1100px; margin: 0 auto; padding: 1.4rem; } .narrow { max-width: 380px; margin: 3rem auto 0; } .lede { color: var(--dim); } .listhead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; } .listhead h1 { margin: 0; } .count { font-size: .9rem; color: var(--dim); font-variant-numeric: tabular-nums; } .actions { display: flex; gap: .5rem; align-items: center; } .actions form { margin: 0; } /* ---------- cards ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; } .card { background: #262523; background: var(--panel2); border: none; border-left: 2px solid #e0a63d; border-left: 2px solid var(--accent); border-radius: 0 3px 3px 0; padding: 1rem 1.2rem; margin: 0; } .card h2:first-child, .card legend + * { margin-top: 0; } /* Fieldset legends default to sitting ON the border line; give the grouped form sections real interior air and space below each block. */ fieldset.card, details.card { min-width: 0; margin-bottom: 1rem; padding-top: .8rem; padding-bottom: 1rem; } fieldset.card legend { margin-bottom: .6rem; } details.card summary { margin-bottom: .6rem; } /* Section headings on forms: readable size, small caps kept for identity. */ legend, summary { font-size: .88rem; font-variant: small-caps; text-transform: lowercase; letter-spacing: .06em; color: var(--dim); cursor: default; } details.card summary { cursor: pointer; } .formgrid .actions { margin-top: 1.2rem; } .formgrid > label:last-of-type { margin-bottom: 0; } dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1.2rem; margin: 0; } dt { color: var(--dim); font-size: .85rem; } dd { margin: 0; } .prewrap { white-space: pre-wrap; } .dim { color: var(--dim); } .nowrap { white-space: nowrap; } /* ---------- buttons ---------- */ .btn { display: inline-block; font-family: inherit; font-size: .82rem; font-weight: 500; /* Links and buttons inherit different line-heights; pin it or an styled as a button renders taller than a real