/* =========================================================================== Firmhours design tokens — the single source of visual truth. Palette: INK & PAPER, from the Firmhours brand kit (Kolob Labs, locked 10 Sep 2026; the kit lives in design/firmhours-brand-kit/). Rebranded from Clockodial's pine-and-brass on Sep 12 2026 (Luke: "these look good"). The product NAME is still Clockodial in titles, emails and copy until the domain moves. This file changes the look only. The kit's rules that bind this file: · The logo is ink on paper or paper on ink. Never forest, never red. · Forest #1F4A3A = approved / closed / the primary button. · OT red #8C3024 = overtime / error / unpaid. · Inter for words (400/500/600 only). IBM Plex Mono for every number a manager compares in a column. No fourth family. · The identity is square: 2px buttons and chips, no pills. RULE 1 — NO PAGE DEFINES A COLOUR, SIZE, RADIUS OR SPACING VALUE. Pages consume var(--…) only. A hex code in a page stylesheet is a bug. RULE 2 — COLOUR IS INFORMATION, NEVER DECORATION. --in forest = SETTLED. approved, agreed, finished. --out red = broken. missing punch, denied, stop. --flag amber = waiting on a human. unapproved, pending, flagged. Amber is not in the brand kit and does not need to be: it is product status, not identity. The kit has no colour for "waiting on a person" and forest cannot carry both "approved" and "not yet approved" (Luke, Sep 2: "I feel like green indicates that things have been approved"). Amber stays. STILL RUNNING is --in-soft plus a live dot, never a fourth colour. A FLAG IS A MARK, NOT A FILL: a dot in the cell corner. Always paired with an icon or a word. Never use a status colour for chrome. RULE 3 — CHROME IS INK. --accent is the ink black: nav bar, avatars, focus rings, secondary buttons. It is deliberately NOT forest, so that forest keeps its one meaning. --brand-mark (brass) is retired; the aliases below map it to ink/paper so nothing that still references it breaks. RULE 4 — NUMBERS ARE MONO. Anything with font-variant-numeric:tabular-nums also carries font-family:var(--font-mono). Words never do. The shell scopes every page's CSS to #cdView, INCLUDING its :root block. Pages must not declare colour vars at all. =========================================================================== */ :root{ /* ---- brand — from the Firmhours kit ------------------------------------- Ink is the chrome. A true near-black behaves as a neutral, which is what lets forest keep its one meaning: approved. */ --accent: #111111; /* INK. chrome, focus, secondary buttons */ --accent-dark: #000000; /* hover/pressed */ --accent-soft: #ECECE7; /* tinted fills, selected nav, quiet panels. DELIBERATELY a warm neutral, NOT a pale green: --in-soft is already a pale green and two of them would be indistinguishable */ --accent-ink: #111111; /* accent-coloured text on light */ --brand-mark: #111111; /* retired brass -> ink */ --brand-mark-on-dark:#F4F1EA; /* retired brass-on-dark -> paper */ --brand-mark-soft:#ECE9E1; /* ---- neutrals --------------------------------------------------------- The warmth in this product comes from here, not from the accent. A warm off-white reads human; a blue-grey reads like a bank terminal. */ --paper: #F4F1EA; /* the kit's paper. page ground */ --surface: #FFFFFF; /* cards, inputs, raised things */ --surface-sunk: #F4F1EA; /* wells, table stripes, inset areas */ --ink: #111111; /* the kit's ink */ --muted: #6E6E6A; /* the kit's muted, 4.9:1 on paper */ --line: #E3DFD5; /* borders, dividers */ --line-strong: #D2CEC4; /* the kit's rule */ /* ---- status ----------------------------------------------------------- */ --in: #1F4A3A; --in-soft: #E3ECE7; --in-ink: #1F4A3A; --out: #8C3024; --out-soft: #F3DDD9; --out-ink: #6B2119; --flag: #B45309; --flag-soft: #FEF3C7; --flag-ink: #78350F; /* ---- type ------------------------------------------------------------- FOUR sizes. If a fifth is needed the design is wrong, not the scale. Display fluidly grows on bigger screens: the running clock is the one number people read across a room. */ --font: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Roboto Mono", Menlo, monospace; --fs-display: clamp(40px, 12vw, 60px); --fs-heading: 20px; --fs-body: 16px; --fs-caption: 13px; --lh-tight: 1.15; --lh-body: 1.5; /* ---- spacing — nothing off this scale --------------------------------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; /* ---- shape ------------------------------------------------------------ */ --r-card:6px; --r-btn:2px; --r-input:3px; --r-chip:2px; --shadow: 0 1px 2px rgba(17,17,17,.05), 0 6px 18px rgba(17,17,17,.06); --shadow-lift: 0 2px 4px rgba(17,17,17,.06), 0 14px 32px rgba(17,17,17,.10); /* ---- touch ------------------------------------------------------------ 44px is the floor from the brief. Primary actions are deliberately bigger: on a phone, in a warehouse, possibly wearing gloves. */ --tap:44px; --tap-primary:60px; } /* =========================================================================== Shared components. Prefixed `ck-` so they can never collide with a page's own generic .btn/.card, or with the shell's .cd- chrome. =========================================================================== */ .ck-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:var(--tap); padding:var(--s3) var(--s5); border:none; border-radius:var(--r-btn); background:var(--accent); color:#fff; font-family:var(--font); font-size:var(--fs-body); font-weight:600; cursor:pointer; text-align:center; line-height:1; transition:transform .06s ease, background .12s ease; } .ck-btn:hover{background:var(--accent-dark)} .ck-btn:active{transform:scale(.985)} .ck-btn:disabled{opacity:.5;cursor:default;transform:none} /* One primary action per screen, visually dominant. Full-width and taller. */ .ck-btn--primary{ width:100%; min-height:var(--tap-primary); font-size:calc(var(--fs-body) + 3px); border-radius:var(--r-btn); background:var(--in); } .ck-btn--primary:hover{background:var(--in-ink)} .ck-btn--ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line-strong)} .ck-btn--ghost:hover{background:var(--surface-sunk)} .ck-btn--in{background:var(--in)} .ck-btn--in:hover{background:var(--in-ink)} .ck-btn--out{background:var(--out)} .ck-btn--out:hover{background:var(--out-ink)} .ck-btn--flag{background:var(--flag)} .ck-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s5); box-shadow:var(--shadow); } /* The status card — the "am I on the clock?" answer, readable at arm's length. Colour comes from the STATE, never from the brand. */ .ck-status{ border-radius:var(--r-card); padding:var(--s5) var(--s4); text-align:center; color:#fff; box-shadow:var(--shadow-lift); } .ck-status--in{background:var(--in)} .ck-status--flag{background:var(--flag)} .ck-status--out{background:var(--out)} .ck-status__label{ font-size:var(--fs-caption); letter-spacing:.13em; text-transform:uppercase; opacity:.88; font-weight:700; } .ck-status__what{font-size:var(--fs-heading);font-weight:700;line-height:var(--lh-tight);margin-top:var(--s1)} .ck-status__time{ font-size:var(--fs-display); font-weight:500; line-height:1; font-variant-numeric:tabular-nums; font-family:var(--font-mono); margin-top:var(--s2); letter-spacing:.01em; } .ck-status__sub{font-size:var(--fs-caption);opacity:.9;margin-top:var(--s2)} .ck-chip{ display:inline-flex; align-items:center; gap:var(--s2); padding:var(--s1) var(--s3); border-radius:var(--r-chip); font-size:var(--fs-caption); font-weight:700; line-height:1.6; } .ck-chip__dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto} .ck-chip--in{background:var(--in-soft);color:var(--in-ink)} .ck-chip--in .ck-chip__dot{background:var(--in)} .ck-chip--out{background:var(--out-soft);color:var(--out-ink)} .ck-chip--out .ck-chip__dot{background:var(--out)} .ck-chip--flag{background:var(--flag-soft);color:var(--flag-ink)} .ck-chip--flag .ck-chip__dot{background:var(--flag)} .ck-chip--quiet{background:var(--accent-soft);color:var(--accent-ink)} .ck-chip--quiet .ck-chip__dot{background:var(--muted)} /* Field label: one or two words, no helper sentence beneath (brief §5). */ .ck-label{ display:block; font-size:var(--fs-caption); font-weight:700; color:var(--muted); margin-bottom:var(--s2); } .ck-input{ width:100%; min-height:var(--tap); padding:var(--s3) var(--s4); background:var(--surface); color:var(--ink); border:1.5px solid var(--line-strong); border-radius:var(--r-input); font-family:var(--font); font-size:var(--fs-body); } .ck-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(17,17,17,.14); } /* Big tappable choice — activity tiles, "what's next", roster names. */ .ck-tile{ display:flex; align-items:center; gap:var(--s3); width:100%; min-height:var(--tap-primary); padding:var(--s4); background:var(--surface); color:var(--ink); border:1.5px solid var(--line); border-radius:var(--r-card); font-family:var(--font); font-size:var(--fs-body); font-weight:650; text-align:left; cursor:pointer; transition:transform .06s ease, border-color .12s ease; } .ck-tile:hover{border-color:var(--line-strong)} .ck-tile:active{transform:scale(.985)} /* Empty state: one sentence + one action. Never a paragraph. */ .ck-empty{ text-align:center; color:var(--muted); padding:var(--s7) var(--s4); font-size:var(--fs-body); } .ck-stack{display:flex;flex-direction:column;gap:var(--s3)} .ck-hidden{display:none !important} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* On a phone the primary action belongs in the thumb zone (brief §5). */ @media (max-width:640px){ .ck-thumb{position:sticky;bottom:0;padding:var(--s3) 0 var(--s4);background:linear-gradient(to top,var(--paper) 72%,transparent)} } @media (prefers-reduced-motion:reduce){ .ck-btn,.ck-tile{transition:none} .ck-btn:active,.ck-tile:active{transform:none} } /* =========================================================================== LEGACY ALIASES — Aug 24 2026 migration. Nineteen pages had grown their own :root blocks with hard-coded hexes, so a palette change meant editing nineteen files. Those blocks are now gone; these aliases keep every existing page rule working verbatim while making this file the only place a colour is decided. Do NOT introduce new uses of these names. New work uses the canonical tokens above. These exist so the migration touched no page's rules. ⚠ NOT aliased on purpose: platform.html keeps its own blue. It is the landlord console and must never be mistakable for a tenant screenshot — and with the tenant app now PINE, that blue is doing more work than ever. =========================================================================== */ :root{ --bg: var(--paper); --card: var(--surface); --brand: var(--accent); --brand-dark: var(--accent-dark); --soft: var(--accent-soft); /* Status aliases. These map to STATUS tokens, not to the brand — which is the point of the change: the old palette used one green for both. */ --danger: var(--out); --danger-soft: var(--out-soft); --green: var(--in); --green-soft: var(--in-soft); --dollars: var(--in-ink); --amber: var(--flag); --amber-soft: var(--flag-soft); --amber-bg: var(--flag-soft); --amberbg: var(--flag-soft); --warm: var(--flag); /* Informational blue kept distinct from both chrome and status. */ --blue: #1C5FA8; --blue-soft: #E7F0FB; } /* Progressive disclosure (brief §4.2). Native
so it is keyboard accessible and needs no JavaScript. Use it for MECHANICS — never for a consequence. If a person can be surprised by it, it stays on the screen. */ .ck-more{margin-top:var(--s2)} .ck-more > summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:var(--s2); min-height:var(--tap); color:var(--accent); font-size:var(--fs-caption); font-weight:700; } .ck-more > summary::-webkit-details-marker{display:none} .ck-more > summary::before{ content:"ⓘ"; font-size:15px; line-height:1; } .ck-more[open] > summary{margin-bottom:var(--s1)} .ck-more p{ margin:0; color:var(--muted); font-size:var(--fs-caption); line-height:var(--lh-body); } /* A consequence the reader must not miss stays visible, always. */ .ck-consequence{ margin:0 0 var(--s3); font-size:var(--fs-caption); font-weight:700; color:var(--flag-ink); background:var(--flag-soft); border-radius:var(--r-input); padding:var(--s2) var(--s3); display:inline-block; } /* --------------------------------------------------------------------------- SHOW/HIDE PASSWORD (pw-eye.js builds the markup; this styles it) Luke, Aug 31 2026: "the little eyeball next to the password so the people can see what they are typing if they choose." The wrapper is a BLOCK so the field keeps the width it had; the button sits inside the field's right edge, and the input gains just enough padding that a long password never runs underneath it. --------------------------------------------------------------------------- */ .pw-wrap { position: relative; display: block; } .pw-wrap > input { width: 100%; padding-right: 44px; } .pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: none; border: none; border-radius: var(--r-input, 12px); color: var(--muted, #6b7a89); cursor: pointer; line-height: 0; } .pw-eye:hover { color: var(--ink, #12211c); background: var(--accent-soft, #ECECE7); } .pw-eye:focus-visible { outline: 2px solid var(--accent, #111111); outline-offset: 1px; }