/* ========================================================================== Thomas McKee Client Portal — Client Portal — Command Center System (v14 — vivid, dark-first) v13: aggressive flat redesign — no watermark, solid surfaces, thin borders, airier surfaces, softened shadows, gentler micro-interactions, a11y. A premium, layered petrol/teal identity. No build step, no CDN deps except web fonts. Light/dark via [data-theme] on . Display: Bricolage Grotesque · Body/UI: Figtree ========================================================================== */ :root { /* Brand (petrol) */ --brand: #064867; --brand-900: #03222f; --brand-800: #053647; --brand-700: #064867; --brand-600: #0a6188; --brand-500: #0f86b4; --brand-400: #2ba2cf; --brand-100: #cfe6f1; --brand-50: #eef5f9; /* Accent (luminous teal) + sparing warm counterpoint */ --accent: #0f86b4; --accent-300: #38b0d8; --accent-200: #74cdec; --gold: #e0a23a; /* used sparingly: the current step's glow, highlights */ /* Neutrals (LIGHT) — cool slate, lets cards float */ --ink: #0c2530; --ink-soft: #3a525e; --muted: #6b818c; --line: rgba(8,40,60,.14); --line-soft: rgba(8,40,60,.08); --surface: #ffffff; --surface-2: #f6f8fa; --canvas: #f4f6f8; --canvas-2: #eef2f5; --input-bg: #ffffff; --accent-soft-bg: #e6f1f7; --accent-soft-fg: #086089; /* Feedback */ --success: #0c7a51; --success-bg: #e2f3ec; --danger: #b42318; --danger-bg: #fdecea; --warn: #8a5a00; --warn-bg: #fbeed4; /* Shape & depth — softer, layered, brand-tinted */ --radius: 14px; --radius-sm: 10px; --radius-lg: 18px; --shadow-sm: 0 1px 2px rgba(8,40,55,.05); --shadow: 0 1px 3px rgba(8,40,55,.08), 0 1px 2px rgba(8,40,55,.04); --shadow-card: 0 1px 2px rgba(8,40,55,.05); --shadow-lg: 0 12px 32px -12px rgba(8,40,55,.22); /* Interaction tokens derive from --accent, so per-instance / per-client brand colors flow through every focus ring and glow automatically. */ --glow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Space Grotesk", "Inter Tight", "Inter", -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Vivid accent spectrum (v14) — drives KPI tiles, nav glow, data viz */ --c-blue:#4C8DFF; --c-cyan:#34E1E1; --c-violet:#9B6BFF; --c-fuchsia:#F072D6; --c-emerald:#23D69B; --c-teal:#2DD4BF; --c-amber:#FFB23E; --c-rose:#FF7A8A; color-scheme: light; } /* ----------------------------- DARK THEME ----------------------------- */ :root[data-theme="dark"] { --ink: #e8eef2; --ink-soft: #aebec9; --muted: #7b8f9b; --line: rgba(148,163,184,.14); --line-soft: rgba(148,163,184,.07); --surface: #101A2E; --surface-2: #14223A; --canvas: #070B14; --canvas-2: #0D1626; --input-bg: #0C1626; --accent-soft-bg: rgba(15,134,180,.18); --accent-soft-fg: #6fcdee; --success: #4cc38a; --success-bg: rgba(12,122,81,.22); --danger: #f08a82; --danger-bg: rgba(180,35,24,.20); --warn: #e3b341; --warn-bg: rgba(138,90,0,.26); --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow: 0 8px 24px -10px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.45); --shadow-card: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 44px -22px rgba(0,0,0,.8); --shadow-lg: 0 40px 80px -28px rgba(0,0,0,.85); --glow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 52%, transparent); color-scheme: dark; } /* ----------------------------- Reset / base ----------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); color: var(--ink); background-color: var(--canvas); font-size: 15px; line-height: 1.58; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .25s ease, color .25s ease; } :root[data-theme="dark"] body { background-color: var(--canvas); } a { color: var(--accent); text-decoration: none; transition: color .15s; } a:hover { color: var(--brand-500); } :root[data-theme="dark"] a:hover { color: var(--accent-200); } h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--font-display); font-weight: 800; letter-spacing: -0.032em; line-height: 1.05; } img { max-width: 100%; display: block; } [x-cloak] { display: none !important; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--canvas-2); padding: .12em .42em; border-radius: 6px; } ::selection { background: rgba(15,134,180,.22); } /* ----------------------------- Theme toggle ----------------------------- */ .themetoggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: none; border: 1px solid var(--line); color: var(--ink-soft); cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; } .themetoggle:hover { background: var(--canvas-2); color: var(--accent); border-color: var(--accent); transform: rotate(-12deg); } .themetoggle .ic-sun, .themetoggle .ic-moon { display: inline-flex; } .themetoggle .ic-sun { display: none; } :root[data-theme="dark"] .themetoggle .ic-moon { display: none; } :root[data-theme="dark"] .themetoggle .ic-sun { display: inline-flex; } /* ----------------------------- Buttons ----------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: inherit; font-weight: 600; cursor: pointer; letter-spacing: -0.005em; padding: .62rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid transparent; position: relative; overflow: hidden; transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease, border-color .18s ease, color .15s; line-height: 1; white-space: nowrap; } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn-primary { background: linear-gradient(120deg, var(--c-blue), var(--brand-600)); color: #fff; box-shadow: 0 8px 24px -10px var(--c-blue), inset 0 1px 0 rgba(255,255,255,.22); } .btn-primary:hover { filter: brightness(1.07); color: #fff; } .btn-primary:active { background: var(--brand-700); } .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: #9a1d14; color: #fff; } .btn-block { width: 100%; } .btn-sm { padding: .42rem .8rem; font-size: .84rem; border-radius: 8px; } /* ----------------------------- Forms ----------------------------- */ .field { margin-bottom: 1.05rem; } .label { display: block; font-size: .78rem; font-weight: 650; color: var(--ink-soft); margin-bottom: .42rem; letter-spacing: .005em; } .input { width: 100%; font: inherit; color: var(--ink); padding: .82rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--input-bg); transition: border-color .16s, box-shadow .16s, background-color .2s; } .input::placeholder { color: #9aa8b0; } .input:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); } .input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .input.has-error { border-color: var(--danger); } select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b818c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.5rem; } .error { color: var(--danger); font-size: .8rem; margin-top: .4rem; } .help { color: var(--muted); font-size: .8rem; margin-top: .42rem; } .checkrow { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink-soft); } .checkrow input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); } .formrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } /* ----------------------------- Alerts ----------------------------- */ .alert { border-radius: var(--radius-sm); padding: .9rem 1.1rem; font-size: .9rem; margin-bottom: 1.1rem; border: 1px solid transparent; display: flex; gap: .55rem; align-items: flex-start; box-shadow: var(--shadow-sm); } .alert-success { background: var(--success-bg); color: var(--success); border-color: rgba(12,122,81,.28); } .alert-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(180,35,24,.28); } .alert-warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(138,90,0,.28); } /* ----------------------------- Badges ----------------------------- */ .badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 750; letter-spacing: .05em; padding: .34rem .66rem; border-radius: 999px; text-transform: uppercase; } .badge-brand { background: var(--accent-soft-bg); color: var(--accent-soft-fg); } .badge-success { background: var(--success-bg); color: var(--success); } .badge-muted { background: var(--canvas-2); color: var(--muted); } .dot { width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); } /* ----------------------------- Announcement banner ----------------------------- */ .announce { display: flex; align-items: center; gap: .7rem; padding: .7rem 1.6rem; font-size: .88rem; font-weight: 550; color: #06303f; background: linear-gradient(90deg, var(--accent-200), var(--brand-400)); border-bottom: 1px solid rgba(0,0,0,.08); } .announce.is-warn { background: linear-gradient(90deg, #f3d27a, var(--gold)); } .announce.is-info { color: #fff; background: linear-gradient(90deg, var(--brand-600), var(--brand-800)); } .announce__dismiss { margin-left: auto; background: rgba(255,255,255,.25); border: none; color: inherit; border-radius: 8px; width: 26px; height: 26px; cursor: pointer; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .announce__dismiss:hover { background: rgba(255,255,255,.45); } /* ========================================================================= AUTH (guest) — premium split screen ========================================================================= */ .auth { min-height: 100vh; display: grid; grid-template-columns: 1.08fr 1fr; } .auth__brand { position: relative; overflow: hidden; color: #eaf3f8; display: flex; flex-direction: column; justify-content: space-between; padding: 3.2rem 3rem; background: radial-gradient(80% 60% at 80% 10%, rgba(15,134,180,.55), transparent 60%), radial-gradient(70% 70% at 0% 100%, rgba(224,162,58,.18), transparent 55%), linear-gradient(160deg, var(--brand-700) 0%, var(--brand-900) 100%); } .auth__brand::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(78% 78% at 28% 18%, #000, transparent 75%); -webkit-mask-image: radial-gradient(78% 78% at 28% 18%, #000, transparent 75%); } .auth__brand > * { position: relative; z-index: 1; } .auth__logo { width: 68px; height: 68px; border-radius: 20px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.6); } .auth__brandtitle { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; margin-top: 1rem; color: #fff; letter-spacing: -0.01em; } .auth__hero { max-width: 34ch; } .auth__hero h2 { color: #fff; font-size: 2.6rem; line-height: 1.05; letter-spacing: -0.035em; } .auth__hero p { color: #c4dceb; margin-top: 1.1rem; font-size: 1.04rem; line-height: 1.6; } .auth__points { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .9rem; } .auth__points li { display: flex; gap: .7rem; align-items: center; color: #d8eaf4; font-size: .96rem; } .auth__points svg { flex: none; color: var(--accent-200); } .auth__legal { font-size: .8rem; color: #8fb6cc; } .auth__panel { position: relative; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: var(--surface); transition: background-color .2s; } .auth__toggle { position: absolute; top: 1.4rem; right: 1.4rem; z-index: 3; } .auth__card { width: 100%; max-width: 420px; } .auth__mobilelogo { display: none; } .auth__card h1 { font-size: 2rem; letter-spacing: -0.035em; } .auth__card .sub { color: var(--muted); margin: .45rem 0 2.1rem; } .auth__foot { margin-top: 1.8rem; text-align: center; color: var(--muted); font-size: .85rem; } .honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================= APP shell ========================================================================= */ .shell { min-height: 100vh; display: grid; grid-template-columns: 272px 1fr; } .sidebar { background: var(--brand-900); color: #cfe1ec; padding: 1.5rem 1.05rem; display: flex; flex-direction: column; gap: 1.35rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; border-right: 1px solid rgba(255,255,255,.06); } .sidebar__brand { display: flex; align-items: center; gap: .8rem; padding: .35rem .45rem 1rem; border-bottom: 1px solid rgba(255,255,255,.09); } .sidebar__brand img { width: 44px; height: 44px; border-radius: 13px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); } .sidebar__brand b { font-family: var(--font-display); color: #fff; font-size: 1.02rem; line-height: 1.05; letter-spacing: -0.01em; } .sidebar__brand span { display: block; color: #82aac4; font-size: .72rem; font-weight: 500; margin-top: .12rem; } .nav { display: flex; flex-direction: column; gap: .16rem; } .nav__label { font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; color: #6c99b5; padding: .95rem .7rem .35rem; font-weight: 750; } .nav a, .nav .nav__disabled { display: flex; align-items: center; gap: .72rem; padding: .66rem .78rem; border-radius: 12px; color: #cfe1ec; font-weight: 550; font-size: .92rem; transition: background .16s, color .16s, transform .12s; position: relative; } .nav a:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(2px); } .nav a.active { background: linear-gradient(90deg, color-mix(in srgb, var(--c-blue) 28%, transparent), transparent 82%); color: #fff; } .nav a.active::before { content: ""; position: absolute; left: -1.05rem; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: linear-gradient(var(--c-cyan), var(--c-blue)); box-shadow: 0 0 12px var(--c-cyan); } .nav a svg, .nav .nav__disabled svg { flex: none; opacity: .88; } .nav__disabled { color: #5e87a2; cursor: default; } .nav__disabled .soon { margin-left: auto; font-size: .58rem; background: rgba(255,255,255,.09); padding: .16rem .44rem; border-radius: 999px; letter-spacing: .05em; font-weight: 700; } .sidebar__foot { margin-top: auto; font-size: .72rem; color: #6c99b5; padding: .4rem .7rem; } /* Keyboard focus visibility (a11y) — light outline on the dark rail, brand ring on light surfaces. */ .nav a:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: -2px; } .dropdown a:focus-visible, .dropdown button:focus-visible, .folderlist a:focus-visible, .usermenu__btn:focus-visible, a.stat:focus-visible, .cardlink:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 12px; } .main { display: flex; flex-direction: column; min-width: 0; } .topbar { height: 64px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 1rem; padding: 0 1.7rem; position: sticky; top: 0; z-index: 20; } .topbar__title { font-family: var(--font-display); font-size: 1.14rem; font-weight: 700; letter-spacing: -0.015em; } .topbar__spacer { flex: 1; } .burger { display: none; background: none; border: 1px solid var(--line); border-radius: 11px; padding: .5rem; cursor: pointer; color: var(--ink); } .usermenu { position: relative; } .usermenu__btn { display: flex; align-items: center; gap: .6rem; background: none; border: 1px solid transparent; cursor: pointer; font: inherit; padding: .3rem .5rem .3rem .35rem; border-radius: 12px; color: var(--ink); transition: background .15s, border-color .15s; } .usermenu__btn:hover { background: var(--canvas-2); border-color: var(--line); } .avatar { width: 38px; height: 38px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; } .avatar.sm { width: 32px; height: 32px; border-radius: 9px; font-size: .72rem; flex: none; } .usermenu__meta { text-align: left; line-height: 1.15; } .usermenu__meta b { font-size: .85rem; } .usermenu__meta span { font-size: .73rem; color: var(--muted); } .dropdown { position: absolute; right: 0; top: calc(100% + 10px); width: 238px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: .45rem; z-index: 40; } .dropdown__head { padding: .7rem .7rem; border-bottom: 1px solid var(--line-soft); margin-bottom: .35rem; } .dropdown__head b { display: block; font-size: .88rem; } .dropdown__head span { font-size: .76rem; color: var(--muted); word-break: break-all; } .dropdown a, .dropdown button { display: flex; width: 100%; align-items: center; gap: .58rem; text-align: left; padding: .6rem .7rem; border-radius: 10px; font: inherit; font-size: .88rem; color: var(--ink); background: none; border: none; cursor: pointer; } .dropdown a:hover, .dropdown button:hover { background: var(--canvas-2); } .dropdown .danger { color: var(--danger); } .content { padding: 2.4rem; max-width: 1220px; width: 100%; animation: rise .4s cubic-bezier(.2,.7,.3,1) both; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ----------------------------- Cards ----------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); transition: box-shadow .22s, transform .22s, border-color .22s; } .card__pad { padding: 1.7rem 1.8rem; } .card__head { padding: 1.15rem 1.5rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .card__head h3 { font-size: 1.02rem; letter-spacing: -0.01em; } .grid { display: grid; gap: 1.35rem; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: 1.6fr 1fr; align-items: start; } .grid-2-even { grid-template-columns: 1fr 1fr; } /* Stat cards — number as hero, gradient icon chip, hairline accent */ .stat { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.45rem 1.55rem; box-shadow: var(--shadow-card); transition: transform .2s, box-shadow .2s; } .stat::before { content: none; } .stat::after { content: none; } .stat__top { display: flex; align-items: center; justify-content: space-between; } .stat__icon { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, var(--accent-soft-bg), color-mix(in srgb, var(--accent-soft-bg) 60%, var(--surface))); color: var(--accent-soft-fg); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-soft); } .stat__num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; letter-spacing: -0.035em; margin-top: 1rem; color: var(--ink); line-height: 1; } .stat__label { color: var(--muted); font-size: .84rem; margin-top: .4rem; font-weight: 500; } /* Welcome banner */ .welcome { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--brand-800), var(--brand-900)); color: #eaf3f8; border-radius: var(--radius-lg); padding: 2rem 2.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .welcome::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 130% at 88% -10%, color-mix(in srgb, var(--c-violet) 46%, transparent), transparent 60%), radial-gradient(46% 120% at 100% 120%, color-mix(in srgb, var(--c-cyan) 30%, transparent), transparent 55%); } .welcome > * { position: relative; z-index: 1; } .welcome h2 { font-family: var(--font-display); } .welcome::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(40% 80% at 95% 10%, rgba(255,255,255,.14), transparent 60%); } .welcome > * { position: relative; z-index: 1; } .welcome h2 { color: #fff; font-size: 2.3rem; letter-spacing: -0.035em; } .welcome p { color: #cfe2ee; margin: .55rem 0 0; max-width: 62ch; } .welcome__role { background: rgba(255,255,255,.16); color: #fff; padding: .42rem .85rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.2); white-space: nowrap; } /* Empty / roadmap */ .empty { text-align: center; padding: 2.6rem 1.5rem; color: var(--muted); } .empty__icon { width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(135deg, var(--accent-soft-bg), color-mix(in srgb, var(--accent-soft-bg) 55%, var(--surface))); color: var(--accent-soft-fg); display: grid; place-items: center; margin: 0 auto 1.1rem; box-shadow: inset 0 0 0 1px var(--line-soft); } .empty b { color: var(--ink); display: block; margin-bottom: .25rem; font-family: var(--font-display); } .steplist { list-style: none; margin: 0; padding: 0; } .steplist li { display: flex; gap: .9rem; padding: .95rem 0; border-bottom: 1px solid var(--line-soft); } .steplist li:last-child { border-bottom: none; } .steplist .n { flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--accent-soft-bg); color: var(--accent-soft-fg); font-weight: 700; font-size: .82rem; display: grid; place-items: center; } .steplist b { font-size: .92rem; } .steplist p { margin: .15rem 0 0; color: var(--muted); font-size: .86rem; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: .58rem 1.3rem; font-size: .9rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; word-break: break-word; } .section-gap { margin-bottom: 1.6rem; } /* ========================================================================= Clients / progress / documents / users ========================================================================= */ .pagebar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; } .pagebar h2 { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.04em; } .muted-text { color: var(--muted); margin: .28rem 0 0; } .muted-text.sm, .sm { font-size: .8rem; } .strong, .clientmini__name { font-weight: 700; color: var(--ink); } .ta-right { text-align: right; } .danger-text { color: var(--danger); } /* Tables */ .tablewrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: .9rem; } .table th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 750; padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); } .table td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table tbody tr { transition: background .14s; } .table tbody tr:hover { background: color-mix(in srgb, var(--accent-soft-bg) 50%, transparent); } /* Status pills */ .pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 750; padding: .3rem .66rem; border-radius: 999px; letter-spacing: .03em; text-transform: uppercase; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); } .pill-green { background: var(--success-bg); color: var(--success); } .pill-blue { background: var(--accent-soft-bg); color: var(--accent-soft-fg); } .pill-amber { background: var(--warn-bg); color: var(--warn); } .pill-grey { background: var(--canvas-2); color: var(--muted); } .pill-red { background: var(--danger-bg); color: var(--danger); } /* Progress bars */ .progress { height: 10px; background: var(--canvas-2); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(8,40,55,.1); } .progress.sm { height: 6px; } .progress.lg { height: 13px; } .progress__bar { height: 100%; background: linear-gradient(90deg, var(--brand-500), var(--accent-300)); border-radius: 999px; transition: width .5s cubic-bezier(.22,.61,.36,1); box-shadow: 0 0 8px -3px var(--accent-300); } /* Stage tracker — the signature element */ .stagetrack { margin: .25rem 0 1.2rem; } .stagetrack__row { display: flex; } .stagestep { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .55rem; position: relative; text-align: center; } .stagestep::before { content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; border-radius: 999px; } .stagestep:first-child::before { display: none; } .stagestep.is-done::before, .stagestep.is-current::before { background: linear-gradient(90deg, var(--brand-500), var(--accent-300)); } .stagestep__dot { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--surface); border: 2px solid var(--line); color: var(--muted); transition: all .25s; } .stagestep.is-done .stagestep__dot { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); border-color: transparent; color: #fff; box-shadow: 0 6px 14px -6px rgba(8,72,104,.6); } .stagestep.is-current .stagestep__dot { background: var(--surface); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 14px -3px var(--accent-200); animation: pulse 2.8s ease-in-out infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 14px -3px var(--accent-200); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 16px -2px var(--accent-200); } } .stagestep__label { font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; } .stagestep.is-current .stagestep__label { color: var(--ink); } .stagestep.is-done .stagestep__label { color: var(--ink-soft); } /* Upload row */ .uploadrow { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; } .uploadrow .input { flex: 1 1 180px; width: auto; } /* Document + user lists */ .doclist, .userlist, .clientmini { list-style: none; margin: 1rem 0 0; padding: 0; } .doclist li { display: flex; align-items: center; gap: .85rem; padding: .82rem 0; border-bottom: 1px solid var(--line-soft); } .doclist li:last-child { border-bottom: none; } .doclist__ic { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--accent-soft-bg); color: var(--accent-soft-fg); display: grid; place-items: center; } .doclist__meta { flex: 1; min-width: 0; } .doclist__meta b { display: block; font-size: .9rem; } .doclist__meta span { display: block; } .doclist__actions, .userlist__actions { display: flex; gap: .4rem; align-items: center; } .userlist li { display: flex; align-items: center; gap: .75rem; padding: .72rem 0; border-bottom: 1px solid var(--line-soft); } .userlist li:last-child { border-bottom: none; } .userlist__meta { flex: 1; min-width: 0; } .userlist__meta b { display: block; font-size: .9rem; } /* Client mini list (dashboard) */ .clientmini li { display: grid; grid-template-columns: 1fr auto 120px 44px; align-items: center; gap: .8rem; padding: .82rem 0; border-bottom: 1px solid var(--line-soft); } .clientmini li:last-child { border-bottom: none; } .clientmini__name { transition: color .15s; } .clientmini__name:hover { color: var(--accent); } /* ========================================================================= File browser, folders, dropzone ========================================================================= */ .filebrowser { display: grid; grid-template-columns: 252px 1fr; gap: 1.35rem; align-items: start; } .folderlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; } .folderlist a { display: flex; align-items: center; gap: .6rem; padding: .6rem .72rem; border-radius: 11px; color: var(--ink-soft); font-size: .9rem; font-weight: 550; transition: background .14s, color .14s, transform .12s; } .folderlist a:hover { background: var(--canvas-2); color: var(--ink); transform: translateX(2px); } .folderlist a.active { background: var(--accent-soft-bg); color: var(--accent-soft-fg); font-weight: 650; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); } .folderlist a svg { flex: none; opacity: .8; } .folderlist a span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .folderlist .count { margin-left: auto; font-size: .7rem; color: var(--muted); background: var(--canvas-2); padding: .1rem .46rem; border-radius: 999px; font-weight: 600; } .folderlist a.active .count { background: var(--surface); color: var(--accent-soft-fg); } .dropzone { display: block; border: 2px dashed var(--line); border-radius: var(--radius-sm); padding: 1.8rem; text-align: center; color: var(--muted); cursor: pointer; transition: border-color .16s, background .16s, color .16s, transform .16s; background: var(--surface-2); } .dropzone:hover, .dropzone.drag { border-color: var(--accent); color: var(--accent); background: var(--accent-soft-bg); transform: translateY(-1px); } .dropzone svg { color: inherit; } /* ========================================================================= Messaging ========================================================================= */ .navbadge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 .4rem; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--brand-600)); color: #fff; font-size: .66rem; font-weight: 750; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 2px 6px -2px rgba(8,72,104,.6); } .convolist { list-style: none; margin: 0; padding: 0; } .convolist__row { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.55rem; border-bottom: 1px solid var(--line-soft); transition: background .12s; } .convolist__row:last-child { border-bottom: none; } .convolist__row:hover { background: var(--canvas-2); } .convolist__main { flex: 1; min-width: 0; } .convolist__main b { display: block; font-size: .92rem; } .convolist__main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .convolist__side { display: flex; align-items: center; gap: .6rem; flex: none; } .convolist__side .navbadge { margin-left: 0; } .convo { display: flex; flex-direction: column; gap: .9rem; max-height: 56vh; overflow-y: auto; padding: .25rem .25rem 1rem; } .convo__empty { text-align: center; padding: 2.4rem 1rem; color: var(--muted); } .convo__empty .empty__icon { margin: 0 auto .8rem; } .convo__empty b { color: var(--ink); font-family: var(--font-display); } .msg { max-width: 78%; align-self: flex-start; } .msg.me { align-self: flex-end; } .msg__bubble { background: var(--surface); color: var(--ink); padding: .75rem 1rem; border-radius: 16px 16px 16px 5px; font-size: .92rem; line-height: 1.5; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .msg.me .msg__bubble { background: linear-gradient(165deg, var(--brand-500), var(--brand-700)); color: #fff; border-color: transparent; border-radius: 16px 16px 5px 16px; box-shadow: 0 8px 18px -10px rgba(8,72,104,.7); } .msg__meta { font-size: .72rem; color: var(--muted); margin-top: .32rem; padding: 0 .35rem; } .msg.me .msg__meta { text-align: right; } .composer { display: flex; gap: .6rem; align-items: flex-end; margin-top: 1.1rem; border-top: 1px solid var(--line-soft); padding-top: 1.1rem; } .composer .input { flex: 1; resize: vertical; min-height: 46px; } .composer .btn { flex: none; } /* Saved-reply picker (canned replies) */ .cannedbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; } .cannedbar .label { margin: 0; } .cannedbar select.input { width: auto; max-width: 320px; padding-top: .5rem; padding-bottom: .5rem; } /* ========================================================================= Requests ========================================================================= */ .grid-4 { grid-template-columns: repeat(4, 1fr); } a.stat { color: inherit; } a.stat:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); } /* ========================================================================= Activity feed + report charts ========================================================================= */ .feed { list-style: none; margin: 0; padding: 0; } .feed__row { display: flex; gap: .85rem; padding: .75rem 0; border-bottom: 1px solid var(--line-soft); } .feed__row:last-child { border-bottom: none; } .feed__ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft-bg); color: var(--accent-soft-fg); box-shadow: inset 0 0 0 1px var(--line-soft); } .feed__body { flex: 1; min-width: 0; } .feed__body > div:first-child { font-size: .92rem; } .bars { display: flex; align-items: flex-end; gap: .5rem; height: 190px; padding-top: .5rem; } .bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; } .bars__bar { width: 70%; max-width: 36px; background: linear-gradient(180deg, var(--accent-300), var(--brand-600)); border-radius: 7px 7px 0 0; min-height: 3px; transition: height .4s cubic-bezier(.22,.61,.36,1); box-shadow: 0 -2px 10px -4px var(--accent-300); } .bars__col:hover .bars__bar { background: linear-gradient(180deg, var(--accent-200), var(--brand-500)); } .bars__n { font-size: .72rem; font-weight: 700; color: var(--ink-soft); margin-top: .35rem; } .bars__lbl { font-size: .68rem; color: var(--muted); margin-top: .1rem; } .hbar { display: flex; align-items: center; gap: .75rem; padding: .4rem 0; } .hbar__lbl { flex: 0 0 38%; font-size: .85rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbar__track { flex: 1; height: 13px; background: var(--canvas-2); border-radius: 999px; overflow: hidden; } .hbar__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-300), var(--brand-600)); border-radius: 999px; min-width: 3px; transition: width .5s cubic-bezier(.22,.61,.36,1); } .hbar__n { flex: none; font-size: .74rem; color: var(--muted); font-weight: 600; } /* ----------------------------- Responsive ----------------------------- */ @media (max-width: 1024px) { .auth { grid-template-columns: 1fr; } .auth__brand { display: none; } .auth__mobilelogo { display: block; width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 1.3rem; } .grid-3 { grid-template-columns: 1fr 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } .grid-2 { grid-template-columns: 1fr; } .grid-2-even { grid-template-columns: 1fr; } } @media (max-width: 820px) { .shell { grid-template-columns: 1fr; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; z-index: 60; transform: translateX(-100%); transition: transform .24s ease; height: 100%; overflow-y: auto; overflow-x: hidden; } .sidebar.open { transform: translateX(0); } .burger { display: inline-flex; } .scrim { position: fixed; inset: 0; background: rgba(4,28,40,.55); z-index: 55; backdrop-filter: blur(3px); } .content { padding: 1.35rem; } .filebrowser { grid-template-columns: 1fr; } .folderlist { flex-direction: row; flex-wrap: wrap; gap: .4rem; } .folderlist a { flex: 0 1 auto; } .folderlist a span:nth-child(2) { flex: 0 1 auto; } } @media (max-width: 560px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } .welcome { flex-direction: column; align-items: flex-start; } .auth__panel { padding: 1.8rem 1.2rem; } .pagebar { flex-direction: column; align-items: flex-start; } .clientmini li { grid-template-columns: 1fr auto; } .clientmini .progress, .clientmini .muted-text { display: none; } .stagestep__label { display: none; } } /* ----------------------------- Motion preference ----------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .content { animation: none; } } /* ========================================================================= Dashboard "studio" components — flat surfaces (watermark removed in v13) ========================================================================= */ :root { --brass: #c0883a; --brass-soft: #f5ead7; --brass-ink: #9a6a22; } :root[data-theme="dark"] { --brass: #e0a23a; --brass-soft: rgba(224,162,58,.16); --brass-ink: #e8c98a; } /* Flat clean workspace — no background imagery (Hubflo-style). */ .main { background: var(--canvas); } :root[data-theme="dark"] .main { background: var(--canvas); } /* Solid, flat surfaces — no frosted glass, no blur. */ .card, .ledger, .stat { background: var(--surface); } :root[data-theme="dark"] .card, :root[data-theme="dark"] .ledger, :root[data-theme="dark"] .stat { background: var(--surface); } /* Editorial hero */ .dash-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: 2rem 2.2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 1.6rem; background: linear-gradient(120deg, color-mix(in srgb, var(--c-blue) 12%, var(--surface)), var(--surface) 60%); } .dash-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 130% at 90% -10%, color-mix(in srgb, var(--c-violet) 40%, transparent), transparent 60%), radial-gradient(46% 120% at 100% 120%, color-mix(in srgb, var(--c-cyan) 26%, transparent), transparent 55%); } .dash-hero > * { position: relative; z-index: 1; } .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-300); } .dash-hero h2 { font-family: var(--font-display); font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; margin: .5rem 0 0; } .dash-hero .status { margin: .85rem 0 0; font-size: 1.02rem; color: var(--ink-soft); max-width: 52ch; } .dash-hero .status b { color: var(--ink); font-weight: 700; } .dash-hero .status .hot { color: var(--brass-ink); font-weight: 700; } /* Ledger strip — one instrument, hairline-divided cells */ .ledger { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .ledger .cell { position: relative; overflow: hidden; padding: 1.3rem 1.4rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); --c1: var(--c-blue); --c2: var(--c-cyan); } .ledger .cell::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--c1), var(--c2)); } .ledger .cell::after { content: ""; position: absolute; right: -28px; top: -28px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c2) 30%, transparent), transparent 70%); pointer-events: none; } .ledger .cell:nth-child(2) { --c1: var(--c-violet); --c2: var(--c-fuchsia); } .ledger .cell:nth-child(3) { --c1: var(--c-emerald); --c2: var(--c-teal); } .ledger .cell:nth-child(4) { --c1: var(--c-amber); --c2: var(--c-rose); } .ledger .cell .k { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } .ledger .cell .v { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-top: .55rem; position: relative; z-index: 1; background: linear-gradient(120deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .ledger .cell .k { font-family: var(--font-mono); position: relative; z-index: 1; } .ledger .cell .vsub { position: relative; z-index: 1; } .ledger .cell .vsub { font-size: .8rem; color: var(--muted); margin-top: .35rem; } .ledger .cell.hot { background: var(--surface); } .ledger a.ledgerlink:hover { border-color: color-mix(in srgb, var(--c-rose) 40%, var(--line)); } a.ledgerlink { color: inherit; } /* Studio roster */ .roster { list-style: none; margin: 0; padding: 0; } .roster li { display: grid; grid-template-columns: 1fr 150px 96px; align-items: center; gap: 1rem; padding: 1.05rem 0; border-top: 1px solid var(--line-soft); } .roster li:first-child { border-top: none; } .roster .rname { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em; color: var(--ink); transition: color .15s; } a.rname:hover { color: var(--accent); } .roster .rmeta { font-size: .78rem; color: var(--muted); margin-top: .25rem; display: flex; align-items: center; gap: .5rem; } .stageline { display: flex; align-items: center; gap: .4rem; } .stagedot { width: 7px; height: 7px; border-radius: 999px; background: var(--line); } .stagedot.on { background: linear-gradient(135deg, var(--c-blue), var(--c-cyan)); box-shadow: 0 0 6px var(--c-cyan); } .stagedot.cur { background: var(--c-cyan); border: 0; width: 10px; height: 10px; box-shadow: 0 0 8px var(--c-cyan); } .stagelbl { font-size: .72rem; font-weight: 600; color: var(--ink-soft); letter-spacing: .02em; margin-top: .4rem; } .rprog { text-align: right; } .rprog .pct { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); } .rprog .rbar { height: 6px; border-radius: 999px; background: var(--canvas-2); overflow: hidden; margin-top: .3rem; } .rprog .rfill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-blue), var(--c-cyan)); box-shadow: 0 0 10px -1px var(--c-cyan); } /* Needs-attention panel */ .att { list-style: none; margin: 0; padding: 0; } .att li { display: flex; align-items: center; gap: .85rem; padding: .85rem 0; border-top: 1px solid var(--line-soft); } .att li:first-child { border-top: none; } .att .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; } .att .ic.brass { background: var(--brass-soft); color: var(--brass-ink); } .att .ic.teal { background: var(--accent-soft-bg); color: var(--accent-soft-fg); } .att .txt { flex: 1; min-width: 0; } .att .txt b { font-size: .92rem; } .att .txt span { display: block; font-size: .78rem; color: var(--muted); } .att .go { font-size: .8rem; color: var(--accent); font-weight: 600; white-space: nowrap; } @media (max-width: 980px) { .ledger { grid-template-columns: 1fr 1fr; } .ledger .cell:nth-child(2) { border-right: none; } } @media (max-width: 560px) { .ledger { grid-template-columns: 1fr; } .ledger .cell { border-right: none; border-bottom: 1px solid var(--line-soft); } .roster li { grid-template-columns: 1fr auto; } .roster li > div:nth-child(2) { display: none; } } /* ========================================================================= FEATURE SET 4 — proposals & invoices ========================================================================= */ .docview__head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; } .docview__amount { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; } .docview__amount span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; } .itemtable { width: 100%; border-collapse: collapse; font-size: .92rem; } .itemtable th { text-align: left; font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 750; padding: .65rem .4rem; border-bottom: 1px solid var(--line); } .itemtable td { padding: .75rem .4rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .itemtable tr:last-child td { border-bottom: none; } .itemtable .num { text-align: right; white-space: nowrap; } .totals { margin: 1.1rem 0 0 auto; max-width: 300px; } .totals .row { display: flex; justify-content: space-between; padding: .35rem 0; font-size: .92rem; color: var(--ink-soft); } .totals .row b { color: var(--ink); } .totals .row.grand { border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .6rem; } .totals .row.grand b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; } .sigblock { margin-top: 1.3rem; padding: 1.05rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--success-bg); color: var(--success); } .sigblock b { font-family: var(--font-display); color: var(--ink); } .doc-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } /* Line-item editor */ .lineedit__head, .lineedit { display: grid; grid-template-columns: 1fr 84px 130px 110px 38px; gap: .5rem; align-items: center; } .lineedit__head { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 750; margin-bottom: .45rem; padding: 0 .1rem; } .lineedit__head .num, .lineedit .num { text-align: right; } .lineedit { margin-bottom: .5rem; } .lineedit .input { width: 100%; } .lineedit__total { font-weight: 700; text-align: right; color: var(--ink); font-size: .92rem; } .lineedit__rm { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 9px; height: 38px; cursor: pointer; font-size: 1.1rem; line-height: 1; } .lineedit__rm:hover { color: var(--danger); border-color: var(--danger); } .editor-totals { margin: 1rem 0 0 auto; max-width: 320px; display: grid; grid-template-columns: 1fr auto; gap: .35rem 1.5rem; font-size: .92rem; color: var(--ink-soft); } .editor-totals .grand { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); border-top: 1px solid var(--line); padding-top: .5rem; } .editor-totals .gl { border-top: 1px solid var(--line); padding-top: .5rem; } @media (max-width: 620px) { .lineedit__head { display: none; } .lineedit { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; padding: .7rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); margin-bottom: .7rem; } .lineedit .input:first-child { grid-column: 1 / -1; } .lineedit__total { grid-column: 1 / -1; text-align: left; } } .rule { border: 0; border-top: 1px solid var(--line); margin: 1.3rem 0; } /* Client dashboard — outstanding invoices callout (FS5.2) */ .duecallout { border: 1px solid var(--line); border-left: 4px solid var(--brass); border-radius: var(--radius); background: var(--surface); padding: 1.1rem 1.25rem; } .duecallout__head .eyebrow { color: var(--brass); } .duecallout__head h3 { margin: .15rem 0 0; font-size: 1.15rem; letter-spacing: -.02em; } .duelist { list-style: none; margin: 1rem 0 0; padding: 0; } .duelist li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line-soft); flex-wrap: wrap; } .duelist li:first-child { border-top: none; } .duelist__meta { display: flex; flex-direction: column; gap: .1rem; } .duelist__meta b { font-family: var(--font-display); } .duelist__right { display: flex; align-items: center; gap: 1rem; } .duelist__amt { font-family: var(--font-display); font-size: 1.05rem; } @media (max-width: 560px) { .duelist__right { width: 100%; justify-content: space-between; gap: .6rem; } } /* Client dashboard — Zoho Projects milestones (FS6) */ .mstones { list-style: none; margin: .4rem 0 0; padding: 0; } .mstone { display: flex; align-items: center; gap: .65rem; padding: .55rem 0; border-top: 1px solid var(--line-soft); } .mstone:first-child { border-top: none; } .mstone__dot { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: #fff; } .mstone.done .mstone__dot { background: var(--success); border-color: var(--success); } .mstone__name { flex: 1; } .mstone.done .mstone__name { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); } .mstone__due { flex: 0 0 auto; white-space: nowrap; } /* Compact inline input/select (FS7 — Team role picker) */ .input-sm { width: auto; padding: .35rem .5rem; font-size: .85rem; height: auto; } /* Kanban boards (FS9) */ .kanban { display: flex; flex-wrap: nowrap; gap: 1rem; align-items: flex-start; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x proximity; } .kanban__col { flex: 0 0 300px; width: 300px; min-width: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem; scroll-snap-align: start; display: flex; flex-direction: column; max-height: calc(100vh - 220px); } .kanban__colhead { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; } .kanban__cards { display: flex; flex-direction: column; gap: .55rem; min-height: 28px; overflow-y: auto; flex: 1 1 auto; } .kanban__empty { color: var(--muted); font-size: .85rem; padding: .25rem .1rem; } .kcard { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; box-shadow: var(--shadow-sm); cursor: grab; } .kcard:active { cursor: grabbing; } .kcard--ghost { opacity: .45; } .kcard__title { font-weight: 500; color: var(--ink); } .kcard__due { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .78rem; margin-top: .35rem; } .kcard__desc { color: var(--ink-soft); font-size: .82rem; margin-top: .35rem; white-space: pre-wrap; } .kcard__edit, .kadd { margin-top: .5rem; } .kcard__edit > summary, .kadd > summary { cursor: pointer; color: var(--accent-soft-fg); font-size: .8rem; list-style: none; } .kcard__edit > summary::-webkit-details-marker, .kadd > summary::-webkit-details-marker { display: none; } .kadd { margin-top: .6rem; } .kform { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; } .kform__row { display: flex; gap: .4rem; } .cardlink { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; } .cardlink:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); } /* Docs (FS10) */ .docsrc { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85rem; line-height: 1.5; min-height: 360px; resize: vertical; } .docsrc-hidden { display: none; } .docbody { color: var(--ink); line-height: 1.7; } .docbody > :first-child { margin-top: 0; } .docbody h1, .docbody h2, .docbody h3 { color: var(--ink); line-height: 1.25; margin: 1.4em 0 .5em; } .docbody h1 { font-size: 1.6rem; } .docbody h2 { font-size: 1.3rem; } .docbody h3 { font-size: 1.1rem; } .docbody p { margin: .7em 0; } .docbody ul, .docbody ol { margin: .7em 0; padding-left: 1.4em; } .docbody li { margin: .25em 0; } .docbody a { color: var(--accent-soft-fg); text-decoration: underline; } .docbody blockquote { margin: 1em 0; padding: .4em 1em; border-left: 3px solid var(--line); color: var(--ink-soft); background: var(--surface-2); border-radius: 0 8px 8px 0; } .docbody code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; background: var(--surface-2); padding: .1em .35em; border-radius: 5px; } .docbody pre { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: .9em 1em; overflow-x: auto; } .docbody pre code { background: none; padding: 0; } .docbody img { max-width: 100%; border-radius: 10px; } .docbody hr { border: none; border-top: 1px solid var(--line); margin: 1.5em 0; } .docbody table { border-collapse: collapse; width: 100%; margin: 1em 0; } .docbody th, .docbody td { border: 1px solid var(--line); padding: .5em .7em; text-align: left; } /* File feedback & pins (FS11) */ .filepin { position: relative; display: inline-block; max-width: 100%; line-height: 0; cursor: crosshair; } .filepin img { max-width: 100%; height: auto; display: block; border-radius: 10px; } .filepdf { width: 100%; height: 620px; border: 1px solid var(--line-soft); border-radius: 10px; } .pin { position: absolute; transform: translate(-50%, -50%); min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .72rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.3); border: 2px solid #fff; line-height: 1; } .pin--new { background: var(--gold); } .pin--sm { position: static; transform: none; min-width: 18px; height: 18px; border-width: 0; box-shadow: none; } .fcomments { list-style: none; margin: 0 0 1rem; padding: 0; } .fcomment { padding: .65rem 0; border-top: 1px solid var(--line-soft); } .fcomment:first-child { border-top: none; } .fcomment__head { display: flex; align-items: center; gap: .5rem; } .fcomment__del { margin-left: auto; } .fcomment__del button { padding: 0 .4rem; } .fcomment__body { margin-top: .35rem; color: var(--ink); white-space: pre-wrap; } .fcompose { margin-top: .5rem; } .pinnote { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: .4rem .6rem; font-size: .82rem; margin-bottom: .5rem; } .linkbtn { background: none; border: none; color: var(--accent-soft-fg); cursor: pointer; text-decoration: underline; font: inherit; padding: 0; } /* AI Assist (FS12) */ .ai-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .ai-status { font-size: .82rem; color: var(--muted); } .ai-status.is-error { color: var(--danger); } .ai-summary { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: .8rem .9rem; font-size: .9rem; line-height: 1.55; color: var(--ink); } /* Colorful nav icon tiles (FS13) */ .icotile { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 8px; flex: none; background: color-mix(in srgb, var(--tile) 20%, transparent); color: var(--tile); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile) 30%, transparent); } .icotile svg { width: 16px; height: 16px; opacity: 1; } .nav a .icotile, .nav .nav__disabled .icotile { transition: transform .15s ease; } .nav a:hover .icotile { transform: scale(1.06); } .nav a.active .icotile { background: color-mix(in srgb, var(--tile) 32%, transparent); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile) 55%, transparent); } /* Board color accents (FS13) */ .bdot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--c, var(--brand)); flex: none; margin-right: .1rem; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .boardcard-c { border-top: 3px solid var(--c, var(--brand)) !important; background: color-mix(in srgb, var(--c, var(--brand)) 6%, var(--surface)); } .kanban__col.is-tinted { border-top: 3px solid var(--c, var(--brand)); } .swatches { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; } .swatch { width: 30px; height: 30px; border-radius: 8px; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .swatch.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); } /* Desk-sourced reply tag (FS14) */ .desktag { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-soft-fg); background: var(--accent-soft, var(--surface-2)); padding: .08rem .4rem; border-radius: 999px; vertical-align: middle; } /* ── Kanban: per-list colour-coding (var-driven) + list menu + add-list (p23) ── */ .kanban__col { border-top: 3px solid var(--col-c, var(--brand)); } .kanban__cards .kcard { border-left: 3px solid var(--col-c, var(--line)); background: color-mix(in srgb, var(--col-c, transparent) 7%, var(--surface)); } .kanban__colhead { flex-wrap: wrap; } .kanban__colmenu { margin-left: auto; } .kanban__colmenu[open] { width: 100%; margin-left: 0; } .kanban__colmenu > summary { cursor: pointer; color: var(--muted); list-style: none; font-size: 1.05rem; line-height: 1; padding: 0 .3rem; border-radius: 6px; } .kanban__colmenu > summary::-webkit-details-marker { display: none; } .kanban__colmenu > summary:hover, .kanban__colmenu[open] > summary { background: var(--surface); color: var(--ink); } .kanban__addlist { flex: 0 0 240px; align-self: start; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: .75rem; } .kanban__addlist > summary { cursor: pointer; color: var(--accent-soft-fg); font-weight: 600; list-style: none; } .kanban__addlist > summary::-webkit-details-marker { display: none; } .cpick { display: flex; gap: .35rem; flex-wrap: wrap; margin: .2rem 0 .1rem; } .cpick input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .cpick label { width: 20px; height: 20px; border-radius: 6px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); } .cpick input:checked + label { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-soft); } @media (max-width: 560px) { .kanban__col, .kanban__addlist { flex: 1 1 100%; max-width: 100%; } } /* ── Board tiles (index): colourful cards in a wrapping grid (p24) ── */ .boardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: .7rem; } .boardtile { background: color-mix(in srgb, var(--c, var(--brand)) 6%, var(--surface)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .6rem; } .boardtile__open { text-decoration: none; color: inherit; display: block; } .boardtile__open b { display: block; font-size: .98rem; } .boardtile__colors { display: flex; flex-wrap: wrap; gap: .3rem; } .dotbtn { width: 16px; height: 16px; border-radius: 5px; border: none; padding: 0; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); transition: transform .12s ease; } .dotbtn:hover { transform: scale(1.12); } .dotbtn.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink-soft); } .boardtile__actions { display: flex; gap: .4rem; margin-top: auto; align-items: center; } /* ── Kanban: standard always-expanded cards (fan-out behaviour removed v13) ── */ .kanban__addlist { align-self: stretch; } @media (prefers-reduced-motion: reduce) { .kcard, .kanban__cards { transition: none; } } @media (max-width: 560px) { .kanban__col { max-height: none; } }