/* Chipmunk project-specific styles layered over the Washi framework. Keep this file small: prefer Washi classes and tokens; only genuine Chipmunk patterns (kanban board, WYSIWYG editor, mark sizing) live here. */ /* (The footer is pinned to the bottom via a flex column on in washi.css; no per-layout min-height hack is needed.) */ /* ── Page entrance: a quiet, staggered reveal of the main content blocks. Subtle and short; disabled under prefers-reduced-motion (handled globally). */ @keyframes chipmunk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } main#main > * { animation: chipmunk-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } main#main > *:nth-child(1) { animation-delay: 0.02s; } main#main > *:nth-child(2) { animation-delay: 0.07s; } main#main > *:nth-child(3) { animation-delay: 0.12s; } main#main > *:nth-child(4) { animation-delay: 0.17s; } main#main > *:nth-child(5) { animation-delay: 0.22s; } main#main > *:nth-child(n+6) { animation-delay: 0.27s; } /* Refined inline-link underline in prose: a thin, offset rule that respects descenders, rather than a hard border. */ .rich a, .card-body p a, .lead a { border-bottom: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); transition: text-decoration-color var(--t), color var(--t); } .rich a:hover, .card-body p a:hover, .lead a:hover { text-decoration-color: var(--accent); } .brand-logo .chipmunk-mark { width: 36px; height: 36px; display: block; } .brand { align-items: center; } .hero .chipmunk-mark { width: 84px; height: 84px; margin-inline: auto; } .center { text-align: center; } .breadcrumbs { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); } .breadcrumbs a { color: var(--muted); border-bottom: none; } .breadcrumbs a:hover { color: var(--ink); } /* ── Kanban board ────────────────────────────────────────────────────────── */ .board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: var(--sp-4); overflow-x: auto; align-items: start; padding-bottom: var(--sp-4); } .board-col { background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3); min-height: 8rem; } .board-col > h3 { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); } .board-col .count { margin-left: auto; color: var(--muted); } .board-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-3); margin-bottom: var(--sp-3); border-left: 3px solid var(--status-colour, var(--border)); color: inherit; } .board-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); } .board-card .meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-2); } .status-dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--status-colour, var(--muted)); } .transition-to { display: inline-block; min-width: 9rem; } /* Drag-and-drop board (board.js). Drop zone keeps empty columns droppable. */ .board-col-drop { min-height: 3rem; } [data-can-transition] .board-card { cursor: grab; } [data-can-transition] .board-card:active { cursor: grabbing; } .board-card.is-dragging { opacity: 0.4; } .board-card.is-pending { opacity: 0.6; } .board-col.is-over { border-color: var(--accent); background: var(--accent-soft); } /* ── WYSIWYG editor ──────────────────────────────────────────────────────── */ .wysiwyg { border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--card); } .wysiwyg-toolbar { display: flex; gap: 2px; flex-wrap: wrap; padding: var(--sp-2); border-bottom: 1px solid var(--border); background: var(--paper-2); border-radius: var(--r) var(--r) 0 0; } .wysiwyg-toolbar button { font-family: var(--font-mono); font-size: var(--fs-xs); border: 1px solid transparent; background: none; padding: 0.3em 0.55em; border-radius: var(--r-sm); cursor: pointer; color: var(--ink-2); } .wysiwyg-toolbar button:hover { background: var(--paper-3); color: var(--ink); } .wysiwyg-area { min-height: 9em; padding: var(--sp-3) var(--sp-4); outline: none; } .wysiwyg-area:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-soft); } .wysiwyg-area p:first-child { margin-top: 0; } /* @-mention chips (in the editor and rendered content) */ .mention { color: var(--accent); font-weight: 500; } /* @-mention autocomplete menu (positioned in JS, appended to ) */ .mention-menu { position: absolute; z-index: 50; min-width: 12rem; max-width: 20rem; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; } .mention-item { display: flex; align-items: baseline; gap: var(--sp-3); width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3); background: none; border: none; cursor: pointer; font: inherit; color: var(--ink); } .mention-item:hover, .mention-item.is-active { background: var(--accent-soft); } .mention-role { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); text-transform: capitalize; } .mention-loading { display: block; padding: var(--sp-2) var(--sp-3); color: var(--muted); } /* Rendered WYSIWYG content */ .rich { line-height: var(--lh-base); overflow-wrap: anywhere; } .rich pre { background: var(--paper-3); padding: var(--sp-3); border-radius: var(--r); overflow-x: auto; font-size: var(--fs-sm); } .rich table { width: 100%; border-collapse: collapse; } .rich td, .rich th { border: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); } .rich img { max-width: 100%; } /* Internal-only content is visually distinguished for staff. */ .internal-note { border-left: 3px solid var(--gold); background: var(--gold-soft); padding: var(--sp-3) var(--sp-4); border-radius: var(--r); } /* Comment list */ .comment { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); } .comment:last-child { border-bottom: none; } .comment .who { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted); margin-bottom: var(--sp-2); display: flex; gap: var(--sp-3); flex-wrap: wrap; } /* Forms inside cards keep a readable measure on wide screens. */ .form-narrow { max-width: 46rem; } /* Empty states */ .empty { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--muted); } .empty .kanji, .empty .glyph { font-size: var(--fs-2xl); display: block; margin-bottom: var(--sp-3); } /* API token one-time reveal */ .token-reveal { margin: var(--sp-2) 0 0; padding: var(--sp-3) var(--sp-4); background: var(--ink); color: var(--paper); border-radius: var(--r); overflow-x: auto; user-select: all; font-size: var(--fs-sm); } /* Bulk-action bar (e.g. My Tasks) */ .bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--r); } .col-check { width: 2.5rem; text-align: center; } /* Pagination controls */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-5); } .pagination .pagination-page { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .pagination .is-disabled { opacity: 0.4; pointer-events: none; cursor: default; } @media (max-width: 720px) { .nav { flex-wrap: wrap; gap: var(--sp-3); } .board { grid-auto-columns: minmax(200px, 80vw); } }