/* Branding Dask Task app styles (brand colours unchanged from 2.x: dark green, green, lime). Every text colour pair is checked for WCAG AA contrast. Lime only on dark backgrounds. */ /* ---------- fonts (inside the theme) ---------- */ @font-face { font-family: "Fraunces"; src: url(fonts/fraunces-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url(fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url(fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url(fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Plus Jakarta Sans"; src: url(fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2"); font-weight: 800; font-display: swap; } /* ---------- brand tokens ---------- */ :root { --primary: #1C7A47; --primary-hover: #155D36; --dark: #0D3922; --dark-2: #2A513D; --accent: #B4E833; --on-accent: #0D3922; --bg: #F7FAF9; --surface: #FFFFFF; --column: #EEF3EC; --ink: #0D3922; --body: #46544B; --muted: #606C64; --placeholder: #6B7A71; --side-text: #D9E6DC; --side-muted: #A9BDB0; --border: #E9EDEB; --input-border: #7D8F84; --focus-ring: #E4EFE9; --hover-soft: #E8F2ED; --col-text: #3D614E; --todo-bg: #EEF3EC; --todo-tx: #3D614E; --prog-bg: #E6F0FB; --prog-tx: #1D4E89; --review-bg: #FFF4D6; --review-tx: #8A5A00; --done-bg: #E4EFE9; --done-tx: #155D36; --block-bg: #FDECEC; --block-tx: #8A1F1F; --danger: #B42318; --danger-hover: #8A1F1F; --p-high: #B42318; --p-med: #B54708; --p-low: #1D4E89; --head: "Fraunces", Georgia, serif; --sans: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --r: 8px; --r-card: 12px; --r-modal: 16px; --side: 236px; --shadow: 0 1px 2px rgba(13,57,34,.04), 0 4px 16px rgba(13,57,34,.05); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body.kf { margin: 0; background: var(--bg); color: var(--body); font: 400 14px/1.55 var(--sans); -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-hover); text-decoration: underline; } h1, h2, h3, h4 { margin: 0; line-height: 1.25; color: var(--ink); } h2 { font: 700 20px/1.25 var(--head); letter-spacing: -.005em; } h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; } h4 { font-size: 13px; font-weight: 600; margin: 18px 0 8px; } p { margin: 0 0 10px; } b, strong { color: inherit; font-weight: 700; } code, .mono { font-family: var(--mono); } code { background: var(--column); color: var(--ink); padding: 1px 6px; border-radius: 5px; font-size: 12px; } pre.code { background: var(--dark); color: var(--side-text); padding: 14px; border-radius: var(--r); overflow-x: auto; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-all; } .ic { flex: none; vertical-align: middle; } .muted { color: var(--muted); } .sm { font-size: 12.5px; } .block { display: block; } .center { text-align: center; } .nowrap { white-space: nowrap; } .late { color: var(--danger) !important; } .up { color: var(--done-tx); font-weight: 700; } .down { color: var(--danger); font-weight: 700; } .lead { font-size: 15px; margin-bottom: 16px; max-width: 760px; color: var(--body); } .mt { margin-top: 14px; } .mt-s { margin-top: 6px; } .row { display: flex; align-items: center; gap: 10px; } .row.wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; } .row.end { justify-content: flex-end; } .gap-s { gap: 8px; } .grow { flex: 1; min-width: 0; } .push { margin-left: auto; } .stack { display: flex; flex-direction: column; gap: 12px; } .plain { margin: 8px 0 12px; padding-left: 18px; } .plain li { margin-bottom: 6px; } .plain-num { margin: 10px 0; padding-left: 20px; } .plain-num li { margin-bottom: 8px; } .hint { font-size: 12px; color: var(--muted); font-weight: 400; } .skip { position: absolute; left: -999px; top: 8px; background: var(--dark); color: #fff; padding: 8px 14px; border-radius: var(--r); z-index: 200; } .skip:focus { left: 8px; } /* Focus on every element: 2px outline, 2px offset. */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .side :focus-visible, .split-brand :focus-visible, .hero :focus-visible, .band.dark :focus-visible, .site-top :focus-visible { outline-color: var(--accent); } /* ---------- layout ---------- */ .app { display: flex; min-height: 100vh; } .side { position: fixed; inset: 0 auto 0 0; width: var(--side); background: var(--dark); color: var(--side-text); display: flex; flex-direction: column; padding: 18px 12px; z-index: 30; overflow-y: auto; } .logo { display: flex; align-items: center; gap: 10px; color: #fff; padding: 4px 8px 18px; text-decoration: none !important; min-width: 0; } .logo:hover { color: #fff; } .logo-img-wrap { width: 36px; height: 36px; border-radius: 9px; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; } .logo-img { max-width: 32px; max-height: 32px; object-fit: contain; } .logo-mark { width: 36px; height: 36px; border-radius: 9px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; } .logo-mark.sm { width: 26px; height: 26px; border-radius: 7px; font-size: 11px; } .logo-text { font-weight: 700; font-size: 14.5px; line-height: 1.15; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logo-text small { display: block; font-weight: 500; font-size: 11px; color: var(--side-muted); letter-spacing: .02em; } .wordmark { display: inline-flex; align-items: center; gap: 9px; font: 700 20px/1 var(--head); color: #fff; letter-spacing: -.01em; white-space: nowrap; } .wordmark b { color: var(--accent); font-weight: 700; } .wordmark.on-light { color: var(--ink); } .wordmark.on-light b { color: var(--primary); } .kf-mark { flex: none; display: block; } .nav-group { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--side-muted); padding: 14px 10px 6px; } .nav-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r); color: var(--side-text); font-weight: 500; text-decoration: none !important; margin-bottom: 2px; } .nav-item:hover { background: var(--dark-2); color: #fff; } .nav-item.active { background: var(--dark-2); color: #fff; font-weight: 700; } .nav-item.active::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } .nav-item > span:not(.av) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item small { display: block; font-size: 11px; color: var(--side-muted); font-weight: 400; } .nav-item .badge { background: var(--accent); color: var(--on-accent); } .side-foot { margin-top: auto; border-top: 1px solid var(--dark-2); padding-top: 10px; } .powered { font-size: 11px; color: var(--side-muted); padding: 10px 10px 2px; } .powered b { color: var(--side-text); font-weight: 600; } .side-shade { display: none; } .main { flex: 1; margin-left: var(--side); min-width: 0; } .top { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 10px 28px; min-height: 60px; } .top-where { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } .top-actions { display: flex; align-items: center; gap: 10px; } .top .menu-btn { display: none; } .support-band { display: flex; align-items: center; gap: 8px; background: var(--dark); color: var(--side-text); padding: 9px 28px; font-size: 13px; font-weight: 600; } .support-band .ic { color: var(--accent); } .content { padding: clamp(18px, 1.8vw, 36px) clamp(16px, 2.2vw, 44px) 64px; width: 100%; max-width: none; } .title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .page-title { font: 700 28px/1.2 var(--head); color: var(--ink); letter-spacing: -.01em; } .title-actions { display: flex; gap: 8px; flex-wrap: wrap; } .kicker { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; } .back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; font-size: 13px; margin-bottom: 4px; } .back-link:hover { color: var(--primary); } /* ---------- buttons (40px tall, 8px radius) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--primary); background: var(--surface); color: var(--ink); font: 700 14px/1 var(--sans); cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background .12s, border-color .12s, color .12s; } .btn:hover { background: var(--hover-soft); color: var(--ink); } .btn:disabled { opacity: .55; cursor: wait; } .btn.primary, .btn.ok { background: var(--primary); border-color: var(--primary); color: #fff; } .btn.primary:hover, .btn.ok:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; } .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn.danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); } .btn.ghost { background: transparent; border-color: transparent; color: var(--ink); } .btn.ghost:hover { background: var(--hover-soft); } .btn.danger-ghost { background: transparent; border-color: transparent; color: var(--danger); } .btn.danger-ghost:hover { background: var(--block-bg); } .btn.on-dark { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn.on-dark:hover { background: #C4F04A; border-color: #C4F04A; color: var(--on-accent); } .btn.outline-light { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; } .btn.outline-light:hover { background: var(--dark-2); color: #fff; } .btn.sm { height: 32px; padding: 0 11px; font-size: 12.5px; } .btn.big { height: 46px; padding: 0 22px; font-size: 15px; } label.btn { flex-direction: row; font-size: 14px; color: var(--ink); } .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; position: relative; } .icon-btn:hover { background: var(--hover-soft); border-color: var(--primary); } .icon-btn.sm { width: 32px; height: 32px; border-color: transparent; background: transparent; color: var(--muted); } .icon-btn.sm:hover { color: var(--danger); background: var(--block-bg); } .icon-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; } .link-btn { background: none; border: 0; padding: 0; color: var(--primary); font: 600 12.5px var(--sans); cursor: pointer; } /* ---------- forms ---------- */ label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); } label.inline { flex-direction: row; align-items: center; gap: 8px; } label.check { flex-direction: row; align-items: center; gap: 9px; font-weight: 500; cursor: pointer; color: var(--body); } .label { font-size: 13px; font-weight: 600; color: var(--ink); display: block; margin-bottom: 6px; } input[type=text], input[type=email], input[type=url], input[type=password], input[type=number], input[type=date], input[type=month], input[type=search], select, textarea { width: 100%; font: 400 14px/1.4 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--input-border); border-radius: var(--r); padding: 9px 12px; min-height: 40px; } input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; } input:disabled, select:disabled, textarea:disabled { background: var(--bg); color: var(--muted); border-color: var(--border); } textarea { resize: vertical; } textarea.mono { font: 12.5px/1.6 var(--mono); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } input[type=checkbox], input[type=radio] { width: 17px; height: 17px; accent-color: var(--primary); flex: none; } input[type=color] { width: 40px; height: 40px; padding: 3px; border: 1px solid var(--input-border); border-radius: var(--r); background: #fff; } .is-error, input.is-error { border-color: var(--danger) !important; } .field-error { color: var(--danger); font-size: 12.5px; font-weight: 600; } .code-input { font: 700 24px/1 var(--mono) !important; letter-spacing: .3em; text-align: center; } .addr { display: flex; align-items: center; border: 1px solid var(--input-border); border-radius: var(--r); background: #fff; } .addr input { border: 0 !important; min-width: 0; } .addr input:focus { box-shadow: none; } .addr:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .addr span { padding: 0 12px 0 2px; color: var(--muted); font-weight: 500; white-space: nowrap; } .addr span:first-child { padding: 0 0 0 12px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .span2 { grid-column: 1 / -1; } .box { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-top: 12px; } .seg { display: flex; flex-wrap: wrap; gap: 6px; } .seg label { flex-direction: row; position: relative; } .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; } .seg span { padding: 9px 14px; border: 1px solid var(--input-border); border-radius: var(--r); cursor: pointer; font-weight: 600; background: #fff; color: var(--ink); } .seg input:checked + span { background: var(--primary); color: #fff; border-color: var(--primary); } .seg input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; } .seg input:disabled + span { cursor: default; opacity: .7; } .time-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .time-add > * { flex: 1 1 120px; } .time-add.wide > select, .time-add.wide > input[type=text] { flex: 3 1 220px; } .time-add .btn { flex: 0 0 auto; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px; margin-bottom: 16px; } .card.flush { padding: 0; overflow: hidden; } .card.flush .pad, .pad { padding: 14px 18px; } .card.narrow { max-width: 780px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .card-head.pad { margin: 0; border-bottom: 1px solid var(--border); } .card h3 + .grid2, .card h3 + .stack, .card h3 + p, .card h3 + label { margin-top: 12px; } .grid2 > h3 + label, .grid2 > h3.span2 { margin-top: 0; } .grid2 > h3.span2.mt { margin-top: 10px; } details > summary { cursor: pointer; padding: 2px 0; color: var(--ink); } details[open] > summary { margin-bottom: 12px; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; } .cards .card { margin: 0; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .grid-side { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 440px); gap: 16px; align-items: start; } .page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .page-head h2 { font-size: 20px; } .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .toolbar h2 { font-size: 20px; min-width: 150px; text-align: center; } .toolbar .tabs { margin: 0; border: 0; box-shadow: none; } .alert { padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; border: 1px solid; font-size: 13.5px; } .alert.bad { background: var(--block-bg); border-color: #F5C2C0; color: var(--block-tx); } .alert.ok { background: var(--done-bg); border-color: #B9D6C5; color: var(--done-tx); } .alert.warn { background: var(--review-bg); border-color: #F0D894; color: var(--review-tx); } .alert.info { background: var(--prog-bg); border-color: #BCD3EE; color: var(--prog-tx); } .empty { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 18px 4px; } .empty .ic { color: var(--primary); } .empty-big { text-align: center; padding: 48px 20px; } .empty-big h2 { margin-bottom: 8px; } .big-code { font: 700 72px/1 var(--head); color: var(--ink); margin-bottom: 8px; } .note-box { background: var(--review-bg); color: var(--review-tx); border: 1px solid #F0D894; border-radius: 10px; padding: 10px 12px; margin: 10px 0 14px; } .soft-note { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; font-size: 12.5px; color: var(--muted); margin-top: 14px; } .danger-zone { border-color: #F5C2C0; } .danger-zone h3 { color: var(--danger); } .dz-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); flex-wrap: wrap; } .dz-row:first-of-type { border-top: 0; } .dz-row > div:first-child { flex: 1 1 320px; } .logo-preview { display: flex; align-items: center; gap: 10px; background: var(--dark); padding: 14px; border-radius: var(--r); margin-top: 10px; } .hl-row td { background: #FBFDF6; } /* ---------- status, priority, tags ---------- */ .pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; } .st-todo { background: var(--todo-bg); color: var(--todo-tx); } .st-in_progress { background: var(--prog-bg); color: var(--prog-tx); } .st-review { background: var(--review-bg); color: var(--review-tx); } .st-blocked { background: var(--block-bg); color: var(--block-tx); } .st-done { background: var(--done-bg); color: var(--done-tx); } .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .dot.st-todo { background: var(--todo-tx); } .dot.st-in_progress { background: var(--prog-tx); } .dot.st-review { background: var(--review-tx); } .dot.st-blocked { background: var(--danger); } .dot.st-done { background: var(--primary); } .prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; } .prio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .p-high { color: var(--p-high); } .p-medium { color: var(--p-med); } .p-low { color: var(--p-low); } .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--c); white-space: nowrap; } .tag::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--c); } .badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; } .cnt { font-weight: 600; color: var(--muted); margin-left: 4px; font-size: 12px; } .rev-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--block-bg); color: var(--block-tx); font-size: 12px; font-weight: 700; } .rev-badge.big { height: 26px; font-size: 12.5px; margin-bottom: 6px; } .av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; flex: none; } .av.sm { width: 26px; height: 26px; font-size: 10px; } .av.lg { width: 56px; height: 56px; font-size: 18px; } .av.more { background: var(--column) !important; color: var(--col-text); } .avs { display: inline-flex; } .avs .av { border: 2px solid #fff; margin-left: -6px; } .avs .av:first-child { margin-left: 0; } .bar { flex: 1; height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; min-width: 60px; } .bar span { display: block; height: 100%; background: var(--primary); border-radius: 99px; } .bar.thin { height: 5px; } .bar.w60 { flex: 0 0 60px; } .w-bar { min-width: 140px; } .w-bar, td.w-bar { display: flex; align-items: center; gap: 8px; } td.w-bar { display: table-cell; } td.w-bar .bar { display: inline-block; width: calc(100% - 44px); vertical-align: middle; } .health { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; white-space: nowrap; } .health::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .h-ok { background: var(--done-bg); color: var(--done-tx); } .h-risk { background: var(--review-bg); color: var(--review-tx); } .h-off { background: var(--block-bg); color: var(--block-tx); } .due { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .due.today { color: var(--prog-tx); font-weight: 700; } .due.late { color: var(--danger); font-weight: 700; } .role { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: var(--column); color: var(--col-text); } .role.r-owner { background: var(--dark); color: #fff; } .role.r-admin { background: var(--prog-bg); color: var(--prog-tx); } .swatch { display: inline-block; width: 22px; height: 22px; border-radius: 6px; margin-right: 6px; border: 1px solid var(--border); } .src { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--column); padding: 1px 6px; border-radius: 4px; } .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; box-shadow: 0 0 0 0 rgba(180,232,51,.6); animation: pulse 1.6s infinite; flex: none; } .pulse.sm { width: 7px; height: 7px; } @keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(180,232,51,0); } 100% { box-shadow: 0 0 0 0 rgba(180,232,51,0); } } @media (prefers-reduced-motion: reduce) { .pulse { animation: none; } * { transition: none !important; } } /* ---------- tabs ---------- */ .tabs { display: flex; gap: 4px; box-shadow: inset 0 -1px 0 var(--border); margin-bottom: 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 10px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none !important; } .tab:hover { color: var(--ink); } .tab.active { color: var(--ink); border-bottom-color: var(--primary); } .toolbar .tabs .tab { border: 1px solid var(--border); border-radius: var(--r); margin: 0; padding: 7px 13px; background: #fff; } .toolbar .tabs .tab.active { background: var(--primary); color: #fff; border-color: var(--primary); } /* ---------- task rows ---------- */ .task-row { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid var(--border); } .task-row:last-child { border-bottom: 0; } .task-row:hover { background: var(--bg); } .tr-main { flex: 1; min-width: 0; } .tr-title { font-size: 15px; font-weight: 600; color: var(--ink); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr-title:hover { color: var(--primary); } .task-row.is-done .tr-title { color: var(--muted); text-decoration: line-through; } .tr-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); margin-top: 2px; flex-wrap: wrap; } .group-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 14px 6px 6px; } .group-title.now { color: var(--primary); } .day-title { font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 10px 6px 2px; } .tab-sum { display: flex; align-items: center; gap: 14px; padding: 4px 6px 8px; color: var(--muted); font-size: 13px; flex-wrap: wrap; } .tab-sum .bar { max-width: 260px; } .tab-sum strong { color: var(--ink); } /* ---------- employee home ---------- */ .hello { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .hello h2 { font-size: 20px; } .rings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; } .ring-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px; } .ring-label { font-weight: 700; color: var(--ink); } .big-num { font-size: 24px; font-weight: 800; min-width: 64px; text-align: center; color: var(--ink); } .timer-bar { display: flex; align-items: center; gap: 14px; background: var(--dark); color: var(--side-text); border-radius: var(--r-card); padding: 12px 16px; margin-bottom: 16px; } .timer-bar a { color: #fff; } .timer-bar .muted { color: var(--side-muted); } .timer-bar .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); } .timer-bar .btn:hover { background: var(--dark-2); } .timer { font: 700 18px var(--mono); font-variant-numeric: tabular-nums; color: var(--primary); } .timer-bar .timer { color: var(--accent); font-size: 20px; } .timer.big { font-size: 22px; } .action-bar .timer { color: var(--primary); } .warn-card { border-color: #F5C2C0; background: #FFFBFB; } .rev-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #F8DCDA; color: var(--ink); text-decoration: none !important; } .rev-line .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .year-list { display: flex; flex-direction: column; } .year-row { display: grid; grid-template-columns: 110px 150px 1fr 48px; align-items: center; gap: 14px; padding: 10px 6px; border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none !important; } .year-row:hover { background: var(--bg); } .year-row.now { background: var(--done-bg); } .year-row b { text-align: right; } /* ---------- task page ---------- */ .task-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 420px); gap: 16px; align-items: start; } .task-title { font: 700 20px/1.3 var(--head); margin: 10px 0 4px; } .task-top { margin-bottom: 14px; } .action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; margin: 6px 0 12px; } .admin-bar { background: var(--column); } .desc { color: var(--body); } .desc p { margin: 0 0 8px; } .checklist { display: flex; flex-direction: column; gap: 2px; } .check-item label { padding: 6px 4px; } .check-item input:checked + span { text-decoration: line-through; color: var(--muted); } .proof { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--border); word-break: break-all; } .comments { display: flex; flex-direction: column; gap: 12px; } .comment { display: flex; gap: 10px; } .facts { display: grid; grid-template-columns: 100px 1fr; gap: 10px 8px; margin: 0; align-items: center; } .facts dt { color: var(--muted); font-size: 13px; } .facts dd { margin: 0; color: var(--ink); } .time-line { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); } .rev-hist { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } /* ---------- calendar ---------- */ .cal { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); background: var(--border); gap: 1px; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; margin-bottom: 16px; } .cal-h { background: var(--column); padding: 8px; font-size: 12px; font-weight: 700; color: var(--col-text); text-align: center; text-transform: uppercase; letter-spacing: .04em; } .cal-d { background: #fff; min-height: 116px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cal-d.out { background: var(--bg); } .cal-d.out .cal-num { color: #9AA59F; } .cal-d.today { box-shadow: inset 0 0 0 2px var(--primary); } .cal-d.picked { background: var(--done-bg); } .cal-d.off { background: repeating-linear-gradient(45deg, #fff, #fff 6px, #F4F7F5 6px, #F4F7F5 12px); } .cal-num { font-weight: 700; font-size: 12.5px; color: var(--ink); align-self: flex-start; padding: 1px 6px; border-radius: 6px; } .cal-d.today .cal-num { background: var(--primary); color: #fff; } .cal-off { font-size: 11px; color: var(--review-tx); font-weight: 600; } .cal-t { display: block; font-size: 11.5px; line-height: 1.3; padding: 3px 6px; border-radius: 5px; background: color-mix(in srgb, var(--c) 10%, #fff); border-left: 3px solid var(--c); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none !important; } .cal-t:hover { background: color-mix(in srgb, var(--c) 18%, #fff); color: var(--ink); } .cal-t.done { opacity: .6; text-decoration: line-through !important; } .cal-t.late { box-shadow: inset 0 0 0 1px #F1A7A1; } .cal-more { font-size: 11px; font-weight: 600; padding-left: 6px; } .legend { display: flex; flex-wrap: wrap; gap: 14px; } /* ---------- tables ---------- */ .tbl-wrap { overflow-x: auto; } .tbl { width: 100%; border-collapse: collapse; } .tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--bg); white-space: nowrap; } .tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--body); } .tbl td strong, .tbl td a strong { color: var(--ink); } .tbl tr:last-child td { border-bottom: 0; } .tbl tfoot td { border-top: 1px solid var(--border); background: var(--bg); } .tbl .num { text-align: right; } .tbl tr.now td { background: var(--done-bg); } .tbl tr.future td { opacity: .6; } .card:not(.flush) .tbl th:first-child, .card:not(.flush) .tbl td:first-child { padding-left: 4px; } .ts-line { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .ts-st { font-weight: 700; color: var(--muted); } .ts-st.submitted, .ts-st.approved { color: var(--done-tx); } .ts-st.returned { color: var(--danger); } .pos { display: inline-grid; place-items: center; min-width: 34px; height: 26px; border-radius: 7px; background: var(--column); color: var(--ink); font-weight: 800; } .pos.top3 { background: var(--done-bg); color: var(--done-tx); } .pos.top10 { background: var(--prog-bg); color: var(--prog-tx); } .pos-in { width: 64px !important; text-align: center; } .spark { display: block; } .wl { display: inline-block; min-width: 46px; padding: 3px 6px; border-radius: 6px; text-align: center; font-weight: 600; } .wl.ok { background: var(--done-bg); color: var(--done-tx); } .wl.high { background: var(--review-bg); color: var(--review-tx); } .wl.over { background: var(--block-bg); color: var(--block-tx); font-weight: 800; } .wl.off { background: var(--column); color: var(--muted); } .access { display: inline-flex; gap: 3px; } .access i { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 5px; border-radius: 4px; background: var(--column); color: var(--muted); } .access i.on { background: var(--done-bg); color: var(--done-tx); } /* ---------- admin ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; display: flex; flex-direction: column; color: var(--ink); text-decoration: none !important; } a.stat:hover { border-color: var(--primary); color: var(--ink); } .stat b { font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--ink); } .stat span { color: var(--muted); font-size: 13px; font-weight: 600; } .stat.dark { background: var(--dark); border-color: var(--dark); } .stat.dark b { color: #fff; } .stat.dark span { color: var(--side-text); } .stat.bad { border-color: #F5C2C0; background: #FFFBFB; } .stat.bad b { color: var(--danger); } .stat.info { border-color: #F0D894; background: #FFFCF3; } .stat.info b { color: var(--review-tx); } .stat.good { border-color: #B9D6C5; background: var(--done-bg); } .stat.good b { color: var(--done-tx); } .person-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none !important; } .person-line:last-child { border-bottom: 0; } .person-line .w-bar { width: 150px; flex: none; min-width: 0; } .attn { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); } .proj-card { color: var(--ink); text-decoration: none !important; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, box-shadow .15s; } .proj-card:hover { border-color: var(--primary); box-shadow: var(--shadow); color: var(--ink); } .proj-card h3 { font-size: 15px; } .pc-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } .pc-row span { width: 62px; color: var(--muted); } .pc-row b { width: 38px; text-align: right; } .mini-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 4px 0 6px; } .mini-stats b { color: var(--ink); font-size: 15px; } .mini-stats.big b { font-size: 20px; display: block; } .months { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; } .month { flex: 0 0 122px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none !important; } .month:hover { border-color: var(--primary); color: var(--ink); } .month.now { border-color: var(--primary); } .month.active { background: var(--dark); color: #fff; border-color: var(--dark); } .month.active .m-d { color: var(--side-text); opacity: 1; } .month.active .bar { background: var(--dark-2); } .month.active .bar span { background: var(--accent); } .m-n { font-weight: 700; font-size: 13px; } .m-d { font-size: 12px; color: var(--muted); } .m-p { font-size: 12px; font-weight: 700; } .week .card-head { margin-bottom: 4px; } .board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 10px; } .col { background: var(--column); color: var(--col-text); border-radius: var(--r-card); padding: 10px; min-height: 300px; transition: background .15s; } .col.over { background: #DDEBDC; box-shadow: inset 0 0 0 2px var(--primary); } .col-head { display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 2px 4px 10px; color: var(--col-text); } .col-head b { margin-left: auto; color: var(--col-text); } .kcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 11px; margin-bottom: 8px; cursor: grab; transition: border-color .12s; } .kcard:hover { border-color: var(--primary); } .kcard a { color: var(--ink); font-weight: 600; font-size: 14px; } .kcard.dragging { opacity: .5; } .new-project .card h3 { margin-bottom: 14px; } .step-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--dark); color: var(--accent); font-size: 12px; font-weight: 800; } .assign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .sticky-foot { position: sticky; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; box-shadow: 0 6px 24px rgba(13,57,34,.10); } .custom-months { max-width: 220px; } .review-card .proofs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; } .proof-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: var(--r); background: var(--done-bg); color: var(--done-tx); font-size: 13px; font-weight: 600; } .copy-box { display: flex; gap: 8px; margin-bottom: 6px; } .tag-edit { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); } .line { padding: 9px 0; border-bottom: 1px solid var(--border); } .profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .sugg p { margin: 10px 0; } .sugg.is-new { border-color: #F0D894; } .req h3 { font-size: 16px; } .bars { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding: 10px 4px 0; } .bars-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; } .bars-b { width: 100%; max-width: 46px; background: var(--primary); border-radius: 6px 6px 0 0; } .bars-v { font-size: 11px; font-weight: 700; color: var(--ink); } .bars-l { font-size: 11px; color: var(--muted); } /* ---------- notifications ---------- */ .bell-wrap { position: relative; } .dot-count { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 11px; display: grid; place-items: center; } .bell-menu { position: absolute; right: 0; top: 48px; width: 350px; max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: 0 12px 40px rgba(13,57,34,.16); z-index: 50; } .bell-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--ink); } .bell-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--ink); font-size: 13px; text-decoration: none !important; } .bell-item:hover { background: var(--bg); color: var(--ink); } .bell-item.unread { background: var(--done-bg); } .bell-item.unread span::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--primary); border-radius: 50%; margin-right: 6px; } .bell-item small { color: var(--muted); } .bell-empty { padding: 20px 14px; color: var(--muted); } /* ---------- toast ---------- */ #toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--dark); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 600; opacity: 0; pointer-events: none; transition: .2s; z-index: 100; max-width: 90vw; box-shadow: 0 8px 30px rgba(13,57,34,.25); } #toast.show { opacity: 1; transform: translate(-50%, 0); } #toast.bad { background: var(--danger); } /* ---------- login (split) and message pages ---------- */ body.kf.login-page { background: var(--bg); min-height: 100vh; } .split { display: grid; grid-template-columns: minmax(320px, 44%) 1fr; min-height: 100vh; } .split-brand { position: relative; overflow: hidden; background: var(--dark); color: var(--side-text); padding: 36px 44px; display: flex; flex-direction: column; justify-content: space-between; } .split-brand::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: var(--dark-2); right: -140px; top: -120px; opacity: .8; } .split-brand > * { position: relative; z-index: 1; } .split-brand a { color: #fff; } .split-mid { max-width: 440px; } .split-company { font-weight: 700; color: #fff; font-size: 15px; margin: 4px 0 18px; } .split-title { font: 700 40px/1.12 var(--head); color: #fff; margin: 0 0 14px; letter-spacing: -.015em; } .hl { background: var(--accent); color: var(--on-accent); padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .split-mid p { color: var(--side-text); font-size: 15px; } .split-mid p b { color: #fff; } .split-foot { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--side-muted); } .split-foot .ic { color: var(--accent); } .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: 10px; } .eyebrow.dark { color: var(--primary); } .split-form { display: flex; align-items: center; justify-content: center; padding: 32px 18px; } .login-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-modal); padding: 32px; box-shadow: var(--shadow); } .login-card h1 { font: 700 28px/1.2 var(--head); margin: 20px 0 6px; } .login-logo { display: flex; align-items: center; gap: 10px; background: var(--dark); border-radius: var(--r-card); padding: 10px 12px; } .login-card form { margin: 18px 0 6px; } .msg-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .msg-wrap .login-card h1 { margin-top: 18px; } .msg-wrap .wordmark { justify-content: center; } .public-wrap { max-width: 980px; margin: 0 auto; padding: 24px 16px 60px; } .report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 3px solid var(--primary); margin-bottom: 16px; } .report-head h2 { font-size: 26px; } .report-logo { display: flex; align-items: center; gap: 8px; background: var(--dark); padding: 8px 12px; border-radius: var(--r-card); } .report h3 { margin: 22px 0 10px; font-size: 16px; } .goal-line { background: var(--column); color: var(--col-text); padding: 10px 12px; border-radius: 10px; margin-bottom: 14px; } /* ---------- public site (kajerflow.com) ---------- */ body.kf.site { background: var(--surface); } .pwrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; } .site-top { background: var(--dark); padding: 18px 0; position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--dark-2); } .site-top a { color: #fff; } .site-nav { display: flex; align-items: center; gap: 22px; } .site-nav a:not(.btn) { color: var(--side-text); font-weight: 600; font-size: 14px; } .site-nav a:not(.btn):hover { color: #fff; text-decoration: none; } .hero { background: var(--dark); color: var(--side-text); padding: 64px 0 84px; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: var(--dark-2); right: -180px; top: -220px; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; } .hero-title { font: 700 56px/1.06 var(--head); color: #fff; margin: 0 0 18px; letter-spacing: -.02em; } .hero-lead { font-size: 17px; line-height: 1.6; color: var(--side-text); max-width: 560px; margin-bottom: 26px; } .hero-note { display: flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; color: var(--side-muted); } .hero-note b { color: #fff; } .hero-note .ic { color: var(--accent); } .hero-card { background: var(--surface); color: var(--body); border-radius: var(--r-modal); padding: 18px; box-shadow: 0 30px 60px rgba(0,0,0,.25); } .hc-head { display: flex; align-items: center; gap: 8px; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid var(--border); font-size: 13px; } .hc-head .logo-mark { background: var(--dark); color: var(--accent); } .hc-row { display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); color: var(--ink); font-weight: 600; font-size: 13.5px; } .hc-foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; color: var(--ink); font-size: 13px; } .band { padding: 72px 0; } .band.alt { background: var(--bg); } .band.dark { background: var(--dark); color: var(--side-text); } .section-title { font: 700 34px/1.15 var(--head); color: var(--ink); margin: 0 0 30px; max-width: 720px; letter-spacing: -.01em; } .section-title.light { color: #fff; } .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feat { border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px; background: var(--surface); } .feat h3 { margin: 12px 0 6px; font-size: 16px; } .feat p { margin: 0; color: var(--body); } .feat-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--dark); color: var(--accent); } .steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .step3 { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px; } .step3 .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--dark); color: var(--accent); font-weight: 800; } .step3 h3 { margin: 12px 0 6px; font-size: 16px; } .step3 p { margin: 0; } .sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .sec { display: flex; gap: 12px; background: var(--dark-2); border-radius: var(--r-card); padding: 18px; } .sec h3 { color: #fff; font-size: 15px; margin-bottom: 4px; } .sec p { margin: 0; color: var(--side-text); font-size: 13.5px; } .sec-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--dark); color: var(--accent); } .demo-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; } .demo-card { padding: 24px; box-shadow: var(--shadow); } .ticks { list-style: none; padding: 0; margin: 16px 0 0; } .ticks li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--ink); font-weight: 600; } .ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--done-bg); box-shadow: inset 0 0 0 5px var(--done-bg), inset 0 0 0 9px var(--primary); } .site-foot { background: var(--dark); color: var(--side-muted); padding: 26px 0; font-size: 13px; } .site-foot a { color: var(--side-text); } /* ---------- mobile ---------- */ @media (max-width: 1100px) { .grid-side, .task-layout { grid-template-columns: 1fr; } .rings { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feat-grid, .sec-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .side { transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.25); } body.side-open .side { transform: none; } body.side-open .side-shade { display: block; position: fixed; inset: 0; background: rgba(13,57,34,.5); z-index: 25; } .main { margin-left: 0; } .top .menu-btn { display: inline-grid; } .top { padding: 8px 16px; } .support-band { padding: 9px 16px; } .content { padding: 16px 16px 60px; } .page-title { font-size: 24px; } .grid-2, .grid2 { grid-template-columns: 1fr; } .cal-d { min-height: 74px; padding: 3px; } .cal-t { font-size: 10px; padding: 2px 4px; } .year-row { grid-template-columns: 90px 1fr 44px; } .year-row .muted { display: none; } .bell-menu { position: fixed; left: 12px; right: 12px; width: auto; top: 60px; } .task-row { flex-wrap: wrap; } .tr-main { flex-basis: calc(100% - 30px); } .task-row .dot { margin-top: 6px; align-self: flex-start; } .person-line .w-bar { width: 90px; } .split { grid-template-columns: 1fr; } .split-brand { padding: 22px; min-height: 0; } .split-mid, .split-foot { display: none; } .hero-grid, .demo-grid, .steps3, .feat-grid, .sec-grid { grid-template-columns: 1fr; } .hero-title { font-size: 40px; } .site-nav a:not(.btn) { display: none; } .section-title { font-size: 28px; } .band { padding: 52px 0; } } @media (max-width: 520px) { .rings { gap: 8px; } .ring-card { flex-direction: column; text-align: center; gap: 4px; padding: 10px 6px; } .ring-card svg { width: 54px; height: 54px; } .stats { grid-template-columns: repeat(2, 1fr); } .toolbar h2 { min-width: 0; font-size: 16px; } .timer-bar { flex-wrap: wrap; } .timer-bar .grow { flex-basis: 100%; } .timer-bar .timer { margin-right: auto; } .login-card { padding: 22px; } .pwrap { padding: 0 16px; } .hc-row { grid-template-columns: 1fr; gap: 4px; } } /* ---------- print (reports) ---------- */ @media print { .side, .top, .no-print, .back-link, #toast, .side-shade, .support-band { display: none !important; } .main { margin: 0; } .content, .public-wrap { padding: 0; max-width: none; } .card { border: 0; padding: 0; } body.kf { background: #fff; } .tbl th { background: #fff; } .report-logo { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } .wordmark:not(.on-light) .kf-mark rect { fill: #2A513D; } /* ---------- sidebar brand block (v2.1) ---------- */ .brand { display: block; padding: 4px 8px 14px; text-decoration: none !important; } .brand .wordmark { font-size: 21px; } .ws { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 9px 10px; border-radius: var(--r); background: var(--dark-2); color: #fff; text-decoration: none !important; min-width: 0; } .ws:hover { color: #fff; } .ws .logo-mark { width: 30px; height: 30px; font-size: 12px; border-radius: 8px; } .ws .logo-img-wrap { width: 30px; height: 30px; } .ws .logo-text { font-size: 13.5px; } /* ---------- whole task row is clickable ---------- */ .task-row { position: relative; } .task-row .tr-title::after { content: ""; position: absolute; inset: 0; } .task-row form, .task-row .icon-btn, .task-row .av { position: relative; z-index: 1; } /* ---------- year list ---------- */ .ym { border-bottom: 1px solid var(--border); } .ym > summary { list-style: none; display: grid; grid-template-columns: 130px 1fr minmax(120px, 280px) 54px; align-items: center; gap: 14px; padding: 12px 6px; cursor: pointer; } .ym > summary::-webkit-details-marker { display: none; } .ym > summary:hover { background: var(--bg); } .ym[open] > summary { background: var(--done-bg); } .ym > summary b { text-align: right; color: var(--ink); } .ym .ym-name { font-weight: 700; color: var(--ink); } .ym .ym-body { padding: 0 6px 10px 18px; } /* ---------- task builder (manual work plan) ---------- */ .builder { display: flex; flex-direction: column; gap: 8px; } .b-head, .b-row { display: grid; grid-template-columns: 28px minmax(220px, 3fr) minmax(130px, 1.1fr) minmax(140px, 1.1fr) minmax(150px, 1.2fr) 80px minmax(110px, .9fr) 40px; gap: 8px; align-items: center; } .builder.with-who .b-head, .builder.with-who .b-row { grid-template-columns: 28px minmax(200px, 3fr) minmax(150px, 1.3fr) minmax(120px, 1fr) minmax(140px, 1fr) minmax(140px, 1.1fr) 72px minmax(100px, .8fr) 40px; } .b-head { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 0 2px; } .b-row { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px; } .b-row .b-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--dark); color: var(--accent); font-size: 12px; font-weight: 800; } .b-row input, .b-row select { min-height: 38px; } .b-row .b-x { width: 38px; height: 38px; } .b-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .b-sum { font-size: 13px; color: var(--muted); margin-left: auto; align-self: center; } .b-empty { padding: 14px; border: 2px dashed var(--border); border-radius: 10px; color: var(--muted); text-align: center; } .who-list { display: flex; flex-direction: column; gap: 6px; } .who-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(200px, 320px); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; } .who-row .t { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who-row .m { font-size: 12px; color: var(--muted); } .who-all { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; padding: 10px; background: var(--column); border-radius: 10px; } .who-all select { max-width: 260px; } .plan-mode .seg span { padding: 10px 16px; } .paste-box { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .paste-box[hidden] { display: none; } .paste-box label { width: 100%; } .b-f { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; font-weight: 600; } .b-f input, .b-f select { width: 100%; } .b-l { display: none; font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .btn.icon { width: 40px; padding: 0; flex: 0 0 auto; } .b-x { border-color: var(--border); color: var(--muted); } .b-x:hover { border-color: var(--danger); color: var(--danger); background: var(--block-bg); } .who-row .b-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--column); color: var(--ink); font-size: 12px; font-weight: 800; } .who-row .m .tag { margin-left: 4px; } .plan-part[hidden] { display: none; } .client-box { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* ---------- results overview ---------- */ .rcard { display: flex; flex-direction: column; gap: 10px; color: var(--ink); text-decoration: none !important; transition: border-color .15s, box-shadow .15s; } .rcard:hover { border-color: var(--primary); box-shadow: var(--shadow); color: var(--ink); } .rcard .rc-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } .rcard h3 { font-size: 16px; } .rc-bars { display: flex; flex-direction: column; gap: 8px; } .rc-bar { display: grid; grid-template-columns: 92px 1fr 44px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); } .rc-bar b { text-align: right; color: var(--ink); } .rc-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; } .rc-nums div { display: flex; flex-direction: column; font-size: 11.5px; color: var(--muted); } .rc-nums b { font-size: 17px; color: var(--ink); } .cards.wide { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } /* ---------- big screens ---------- */ @media (min-width: 1800px) { :root { --side: 264px; } body.kf { font-size: 14.5px; } .page-title { font-size: 30px; } } @media (min-width: 2400px) { body.kf { font-size: 15.5px; } .btn { height: 44px; } } @media (max-width: 1280px) { .b-head { display: none; } .b-row, .builder.with-who .b-row { display: flex; flex-wrap: wrap; align-items: flex-end; } .b-row .b-n { align-self: center; } .b-row > .b-title { flex: 1 1 calc(100% - 96px); } .b-row > .b-f:not(.b-title) { flex: 1 1 150px; } .b-row > .b-f.b-hours { flex: 0 1 110px; } .b-row > .b-x { order: 0; } .b-l { display: block; } } @media (max-width: 860px) { .ym > summary { grid-template-columns: 1fr 54px; } .ym > summary .muted, .ym > summary .bar { display: none; } .who-row { grid-template-columns: 28px 1fr; } .who-row select { grid-column: 1 / -1; } .rc-nums { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .b-row > .b-f:not(.b-title), .b-row > .b-f.b-hours { flex: 1 1 calc(50% - 8px); } .b-row .b-n { display: none; } .b-row > .b-title { flex: 1 1 calc(100% - 50px); } .b-actions .btn { flex: 1 1 auto; } .b-sum { flex-basis: 100%; margin-left: 0; } } .min0 { min-width: 0; } /* ---------- period bar (My Tasks: day, week, month, year) ---------- */ .period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 0 6px; } .period .period-name { font-weight: 700; font-size: 16px; color: var(--ink); min-width: 0; } .period .period-sum { margin-left: auto; font-size: 13px; color: var(--muted); } .period .bar { width: clamp(90px, 14vw, 220px); } .period > strong:last-child { min-width: 40px; text-align: right; } @media (max-width: 560px) { .period .period-name { flex: 1 1 auto; text-align: center; order: 0; font-size: 16px; } .period .period-sum { margin-left: 0; flex: 1 1 100%; } .period .bar { flex: 1 1 auto; } } /* ---------- month strip (results detail) ---------- */ .mstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .ms { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: #fff; } .ms.now { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; } .ms.later { background: var(--bg); } .ms-top, .ms-num { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--muted); } .ms-top b { color: var(--ink); font-size: 13px; } .ms-num b { color: var(--ink); font-size: 15px; } .bar.blue span { background: #1D4E89; } .rc-nums b.late { color: var(--danger); } .now-pill { margin-left: 6px; font-size: 11px; padding: 2px 8px; vertical-align: 2px; } /* ---------- login, forgot, set password: centred column on the left, centred card on the right (v2.2) ---------- */ .split { grid-template-columns: minmax(340px, 46%) 1fr; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .split-brand { min-height: 0; } .split-mid, .split-foot { display: none; } } .split-brand { display: flex; flex-direction: row; justify-content: center; align-items: stretch; padding: clamp(28px, 5vh, 56px) clamp(24px, 4vw, 72px); } .split-col { position: relative; z-index: 1; width: 100%; max-width: 500px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; } .split-top .wordmark { font-size: 24px; gap: 11px; } .split-top .kf-mark { width: 36px; height: 36px; } .split-top a { display: inline-flex; border-radius: var(--r); } .split-mid { max-width: none; } .split-company { font-size: 16px; } .split-title { font-size: clamp(32px, 3.1vw, 46px); } .split-mid p { font-size: 15.5px; max-width: 440px; } .split-points { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(217, 230, 220, .16); display: flex; flex-direction: column; gap: 12px; } .split-points li { display: flex; align-items: flex-start; gap: 10px; color: var(--side-text); font-size: 14.5px; } .split-points .ic { flex: none; margin-top: 2px; color: var(--accent); } .split-form { padding: clamp(24px, 5vh, 56px) clamp(16px, 3vw, 48px); } .login-card { max-width: 440px; padding: clamp(24px, 3vw, 36px); } .login-card h1 { margin-top: 22px; } .login-logo .logo-mark.is-kf { background: none; width: auto; height: auto; padding: 0; } .login-logo .logo-mark.is-kf .kf-mark rect { fill: #2A513D; } .login-card .btn.full, .btn.full { width: 100%; } .login-card .soft-note { margin-top: 16px; } .pw-meter { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: -6px; } .pw-meter span { display: block; height: 100%; width: 0; background: var(--danger); transition: width .2s, background .2s; } .pw-meter.ok span { background: var(--primary); } .pw-meter.mid span { background: #B54708; } @media (max-width: 860px) { .split-brand { padding: 18px 20px; } .split-col { gap: 0; max-width: none; } .split-top .wordmark { font-size: 21px; } .split-form { align-items: flex-start; padding-top: 28px; } } /* ---------- notice with a link to copy (invite email failed) ---------- */ .kf-notice { margin: 0 0 14px; } .kf-notice p { margin: 0 0 10px; } .copy-row { display: flex; gap: 8px; } .copy-row input { flex: 1; min-width: 0; font-size: 12.5px; background: #fff; } .invite-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #8A5A00; background: #FFF4D6; border-radius: 99px; padding: 2px 9px; margin-left: 6px; } .smtp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .mail-state { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 10px 12px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--border); } .mail-state.ok { background: var(--done-bg); color: #155D36; border-color: #CFE3D7; } .mail-state.bad { background: var(--block-bg); color: #8A1F1F; border-color: #F3CFCF; } /* ---------- v2.3: quick add, date chips, invite methods, email presets ---------- */ .date-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; } .builder > .date-chips { margin: 0 0 4px; } .chip { height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border); background: #fff; color: var(--ink); font: 600 12.5px/1 var(--sans); cursor: pointer; } .chip:hover { border-color: var(--primary); background: var(--hover-soft); } .chip.on { background: var(--primary); border-color: var(--primary); color: #fff; } .how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .how { flex-direction: row; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-card); cursor: pointer; background: #fff; font-weight: 500; } .how:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; background: #F4FAF6; } .how input { margin-top: 3px; } .how span { display: flex; flex-direction: column; gap: 3px; } .how small { color: var(--muted); font-size: 12.5px; line-height: 1.45; } .first-pw[hidden] { display: none; } .row-actions { display: inline-flex; gap: 4px; flex-wrap: wrap; vertical-align: middle; } .preset-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .preset-row .label { margin: 0 6px 0 0; } .gmail-help ol { margin: 6px 0 8px 18px; padding: 0; } .gmail-help li { margin: 3px 0; } .gmail-help[hidden] { display: none; } .alert.ok.kf-notice { background: var(--done-bg); } /* ===================================================================== 3.0 — Branding Dask Task: submissions, review, schedule, documents ===================================================================== */ :root { --rev-bg: #FDEBDD; --rev-tx: #8F3A0C; --draft-bg: #EEF0F2; --draft-tx: #48525C; } .wordmark .wm-text { font-size: 17px; line-height: 1.1; } .wordmark .kf-mark { border-radius: 8px; } .split-top .wordmark .wm-text { font-size: 20px; } /* status: Revision needed, Draft */ .st-revision { background: var(--rev-bg); color: var(--rev-tx); } .dot.st-revision { background: var(--rev-tx); } .st-draft { background: var(--draft-bg); color: var(--draft-tx); } .late-dot { background: var(--danger); box-shadow: 0 0 0 2px var(--block-bg); } .warn-tx { color: var(--rev-tx) !important; font-weight: 700; } .board { grid-template-columns: repeat(6, minmax(210px, 1fr)); } .task-row.is-late .tr-title { color: var(--danger); } .who-name { color: var(--ink); font-weight: 600; } .av.xs { width: 20px; height: 20px; font-size: 8.5px; } .tab-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: var(--column); color: var(--col-text); font-size: 11.5px; } .tab.active .tab-n { background: var(--primary); color: #fff; } .sec-title { font-size: 17px; margin: 4px 0 10px; } .right { text-align: right; } /* quick date buttons */ .date-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; } .date-chips .chip small { color: var(--muted); font-weight: 500; margin-left: 3px; } .date-chips .chip.on small { color: inherit; opacity: .85; } /* login: password eye */ .field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); } .field > .row label { display: inline; font-weight: 600; } .pw-wrap { position: relative; display: block; } .pw-wrap input { width: 100%; padding-right: 46px; } .pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 34px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 6px; cursor: pointer; } .pw-eye:hover { background: var(--hover-soft); color: var(--ink); } .pw-eye .ic + .ic { display: none; } .pw-eye.on .ic { display: none; } .pw-eye.on .ic + .ic { display: block; color: var(--primary); } /* "what happens next" line on a task */ .next-step { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; margin: 12px 0; font-weight: 600; font-size: 14px; border: 1px solid; } .next-step .ic { margin-top: 1px; } .ns-info { background: var(--prog-bg); color: var(--prog-tx); border-color: #BCD3EE; } .ns-ok { background: var(--done-bg); color: var(--done-tx); border-color: #B9D6C5; } .ns-warn { background: var(--rev-bg); color: var(--rev-tx); border-color: #F3C7A6; } .ns-bad { background: var(--block-bg); color: var(--block-tx); border-color: #F5C2C0; } /* attachments (links and files) */ .atts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .att { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); max-width: 100%; text-decoration: none !important; } .att:hover { border-color: var(--primary); background: var(--hover-soft); color: var(--ink); } .att span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .att b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .att small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .att .ic { color: var(--primary); } .att-gdoc .ic { color: #1D4E89; } .att-gsheet .ic { color: #155D36; } .att-gdrive .ic { color: #8A5A00; } .att-file .ic { color: var(--dark-2); } /* one submission round */ .sub { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: var(--bg); } .sub.latest { background: var(--surface); border-color: #B9D6C5; box-shadow: var(--shadow); } .sub-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sub-head .pill { margin-left: auto; } .sub-round { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--col-text); background: var(--column); border-radius: 6px; padding: 3px 8px; } .sub-note { margin-top: 10px; white-space: normal; color: var(--ink); } .sub-review { margin-top: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; } .sub-review.ok { background: var(--done-bg); color: var(--done-tx); } .sub-review.warn { background: var(--rev-bg); color: var(--rev-tx); } /* submit form */ .submit-card { border-color: #B9D6C5; } .submit-form { display: flex; flex-direction: column; gap: 14px; } .sf-block { display: flex; flex-direction: column; gap: 8px; } .sf-block > .label { display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: wrap; } .sf-block > .label .muted { font-weight: 500; } .link-rows { display: flex; flex-direction: column; gap: 8px; } .link-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 40px; gap: 8px; } .drop { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; min-height: 64px; padding: 14px; border: 2px dashed var(--input-border); border-radius: 12px; background: var(--bg); color: var(--muted); font-weight: 600; text-align: center; cursor: pointer; } .drop:hover, .drop.over { border-color: var(--primary); background: var(--hover-soft); color: var(--ink); } .drop.has { border-style: solid; border-color: var(--primary); color: var(--ink); } .drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; } /* review box */ .review-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; margin: 12px 0; padding: 12px; border-radius: 12px; background: var(--column); } .rb-approve, .rb-changes { display: flex; flex-direction: column; gap: 8px; } .rb-approve .btn, .rb-changes .btn { align-self: flex-start; } .btn.warn { background: #fff; border-color: var(--rev-tx); color: var(--rev-tx); } .btn.warn:hover { background: var(--rev-bg); color: var(--rev-tx); } .review-card.is-waiting { border-left: 4px solid var(--review-tx); } /* timeline */ .timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); } .timeline li { position: relative; display: flex; flex-direction: column; padding: 0 0 12px 10px; } .timeline li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--surface); } /* status cards (click = filter) */ .scards { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin: 14px 0 8px; } .scard { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); text-decoration: none !important; border-top: 4px solid var(--c, var(--border)); transition: transform .1s, box-shadow .1s; } .scard:hover { box-shadow: var(--shadow); transform: translateY(-1px); color: var(--ink); } .scard b { font: 800 24px/1.1 var(--sans); } .scard span { font-size: 12.5px; font-weight: 600; color: var(--muted); } .scard.zero b { color: var(--placeholder); } .scard.on { outline: 2px solid var(--primary); outline-offset: 1px; } .sc-all { --c: var(--dark); } .sc-todo { --c: var(--todo-tx); } .sc-in_progress { --c: var(--prog-tx); } .sc-review { --c: #D9A21B; } .sc-revision { --c: #D9642A; } .sc-done { --c: var(--primary); } .sc-overdue { --c: var(--danger); } .sc-blocked { --c: var(--block-tx); } .sc-overdue:not(.zero) b { color: var(--danger); } .legend { display: flex; flex-wrap: wrap; gap: 14px; } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend .dot { width: 9px; height: 9px; } /* filters bar */ .filters { padding-bottom: 12px; } .filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; } .filter-form label { gap: 4px; } .filter-form .label { margin: 0; font-size: 12px; color: var(--muted); } .filter-form select, .filter-form input[type=date] { min-width: 150px; } .f-q { flex: 1 1 200px; } .search { position: relative; display: flex; align-items: center; } .search .ic { position: absolute; left: 11px; color: var(--muted); pointer-events: none; } .search input { padding-left: 34px; width: 100%; } .view-seg { gap: 0; border: 1px solid var(--input-border); border-radius: var(--r); overflow: hidden; align-self: flex-end; } .seg-a { padding: 9px 14px; font-weight: 700; color: var(--ink); background: #fff; border-right: 1px solid var(--border); text-decoration: none !important; white-space: nowrap; } .seg-a:last-child { border-right: 0; } .seg-a:hover { background: var(--hover-soft); color: var(--ink); } .seg-a.on { background: var(--primary); color: #fff; } .period-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); padding: 4px 10px; border-radius: 99px; background: var(--column); } .layout-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-left: auto; } .layout-switch a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-decoration: none !important; } .layout-switch a.on { background: var(--dark); color: #fff; } .big-alert { display: flex; align-items: center; gap: 10px; text-decoration: none !important; } .big-alert:hover { filter: brightness(.98); } .dash-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .dash-filter label { flex-direction: row; align-items: center; } .dash-filter .label { margin: 0; } /* schedule: week */ .card.flush-x { padding: 0; overflow: hidden; } .week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 340px; } .wg-col { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; } .wg-col:last-child { border-right: 0; } .wg-col.off { background: repeating-linear-gradient(135deg, #FAFBFA 0 8px, #F3F6F4 8px 16px); } .wg-col.now { background: #F3FAF5; box-shadow: inset 0 3px 0 var(--primary); } .wg-head { display: grid; grid-template-columns: 1fr auto; padding: 10px 10px 8px; border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none !important; } .wg-head b { font-size: 13px; } .wg-head span { grid-column: 1; font-size: 12px; color: var(--muted); } .wg-head em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-weight: 800; font-size: 12px; min-width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; background: var(--column); color: var(--col-text); } .wg-col.now .wg-head em { background: var(--primary); color: #fff; } .wg-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; } .wg-empty { color: var(--placeholder); font-size: 12px; text-align: center; padding: 10px 0; } .tchip { display: flex; flex-direction: column; gap: 1px; padding: 7px 8px 7px 10px; border-radius: 8px; border: 1px solid var(--border); border-left: 4px solid var(--c, var(--todo-tx)); background: var(--surface); color: var(--ink); text-decoration: none !important; min-width: 0; position: relative; } .tchip:hover { box-shadow: var(--shadow); color: var(--ink); } .tchip .av { position: absolute; top: 6px; right: 6px; } .tchip .av + .tc-t { padding-right: 22px; } .tc-t { font-size: 12.5px; font-weight: 700; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .tc-m { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tchip.st-todo { --c: var(--todo-tx); background: #fff; color: var(--ink); } .tchip.st-in_progress { --c: var(--prog-tx); background: #fff; color: var(--ink); } .tchip.st-review { --c: #D9A21B; background: #FFFBEF; color: var(--ink); } .tchip.st-revision { --c: #D9642A; background: #FFF6EF; color: var(--ink); } .tchip.st-blocked { --c: var(--danger); background: #fff; color: var(--ink); } .tchip.st-done { --c: var(--primary); background: #F4FAF6; color: var(--muted); } .tchip.st-done .tc-t { text-decoration: line-through; color: var(--muted); } .tchip.late { border-color: #F5C2C0; box-shadow: inset 0 0 0 1px #F5C2C0; } .tchip.late .tc-m { color: var(--danger); font-weight: 600; } /* schedule: month */ .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .mg-dow { padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--bg); } .mg-cell { min-height: 118px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mg-cell:nth-child(7n) { border-right: 0; } .mg-cell.out { background: var(--bg); opacity: .55; } .mg-cell.off { background: #FAFBFA; } .mg-cell.now { background: #F3FAF5; box-shadow: inset 0 3px 0 var(--primary); } .mg-day { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--ink); font-size: 13px; text-decoration: none !important; padding: 0 2px; } .mg-day em { font-style: normal; font-size: 11px; background: var(--column); color: var(--col-text); border-radius: 99px; padding: 1px 7px; } .mg-cell .tchip { padding: 4px 6px 4px 8px; } .mg-cell .tc-t { -webkit-line-clamp: 1; font-size: 12px; } .mg-cell .tc-m { display: none; } .mg-cell .tchip .av { display: none; } .mg-cell .tchip .av + .tc-t { padding-right: 0; } .mg-more { font-size: 11.5px; font-weight: 700; padding: 0 4px; } /* schedule: year */ .year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 16px; } .ym-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid var(--border); color: var(--ink); text-decoration: none !important; background: var(--surface); } .ym-card:hover { box-shadow: var(--shadow); color: var(--ink); } .ym-card.now { border-color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); } .ym-top { display: flex; justify-content: space-between; align-items: center; } .ym-num { font: 800 22px/1 var(--sans); } .ym-num small { font-size: 12px; font-weight: 600; color: var(--muted); } .ym-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); } .stackbar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--column); gap: 2px; } .stackbar.big { height: 12px; flex: 1; } .sb-done { background: var(--primary); } .sb-review { background: #D9A21B; } .sb-revision { background: #D9642A; } .sb-in_progress { background: var(--prog-tx); } .sb-todo { background: #A9BDB0; } .sb-blocked { background: var(--danger); } .sb-empty { background: var(--column); } .progress-line { display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap; } .progress-line > span:first-child { color: var(--ink); } /* dashboard action tiles */ .action-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .atile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); text-decoration: none !important; } .atile:hover { box-shadow: var(--shadow); color: var(--ink); } .atile b { font: 800 30px/1 var(--sans); color: var(--placeholder); } .atile span { font-weight: 600; font-size: 13px; } .atile em { font-style: normal; font-size: 12px; color: var(--primary); font-weight: 700; margin-top: auto; padding-top: 6px; } .atile.t-review { background: var(--review-bg); border-color: #F0D894; } .atile.t-review b { color: var(--review-tx); } .atile.t-late { background: var(--block-bg); border-color: #F5C2C0; } .atile.t-late b { color: var(--danger); } .atile.t-rev { background: var(--rev-bg); border-color: #F3C7A6; } .atile.t-rev b { color: var(--rev-tx); } .team-tbl small.block { font-weight: 500; } /* revisions page steps */ .steps-line { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .steps-line span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; color: var(--ink); } .steps-line span > b:first-child { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--dark); color: var(--accent); font-size: 12px; } .toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .toolbar .tabs { flex: 1; } /* client documents */ .wide-side { grid-template-columns: minmax(0, 1fr) clamp(340px, 34vw, 560px); } .docs { display: flex; flex-direction: column; gap: 14px; } .doc-cat { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--col-text); margin-bottom: 6px; } .doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--border); } .doc .att { border: 0; padding: 4px 6px; background: transparent; } .doc .att:hover { background: var(--hover-soft); } .doc-meta { grid-column: 1; padding-left: 34px; } .doc-actions { grid-column: 2; grid-row: 1; display: flex; gap: 2px; } .btn.icon.sm { width: 32px; height: 32px; padding: 0; } .doc-edit { grid-column: 1 / -1; background: var(--bg); padding: 12px; border-radius: 10px; margin: 6px 0; } details.more > summary { cursor: pointer; color: var(--primary); font-weight: 700; } @media (max-width: 1100px) { .action-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .week-grid { grid-template-columns: repeat(7, minmax(150px, 1fr)); overflow-x: auto; } .card.flush-x { overflow-x: auto; } .month-grid { min-width: 760px; } .wide-side { grid-template-columns: 1fr; } } @media (max-width: 720px) { .review-box { grid-template-columns: 1fr; } .link-row { grid-template-columns: 1fr 40px; } .link-row input[name$="[label]"] { grid-column: 1; } .link-row .btn { grid-row: 1; grid-column: 2; } .filter-form > * { flex: 1 1 100%; } .view-seg { width: 100%; } .seg-a { flex: 1; text-align: center; padding: 9px 6px; } .layout-switch { margin-left: 0; } .action-tiles { grid-template-columns: 1fr 1fr; } .atile b { font-size: 24px; } } /* 3.0 polish */ .admin-bar form { display: inline-flex !important; align-items: center; gap: 6px; } .admin-bar form select { width: auto; min-width: 0; height: 36px; } .filter-form .btn.ghost { align-self: flex-end; } @media (max-width: 720px) { .week-grid { grid-template-columns: 1fr; min-height: 0; overflow: visible; } .card.flush-x { overflow: visible; } .wg-col { border-right: 0; border-bottom: 1px solid var(--border); } .wg-col:last-child { border-bottom: 0; } .wg-head { padding: 8px 12px; } .wg-empty { padding: 4px 0; text-align: left; } .wg-col.off .wg-body { display: none; } .scards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .scard { padding: 8px 9px; border-top-width: 3px; } .scard b { font-size: 18px; } .scard span { font-size: 11px; line-height: 1.2; } .legend { gap: 6px 10px; } }