/* ========================================================================= LUMEN DESIGN SYSTEM · v2.0 · YEA CID brand direction Bold, rounded, gradient-rich, multi-color UI system on a cool light canvas. Language: Montserrat (700–900), the 5 YEA brand colors (blue #2196D6, orange #F26522, purple #9C3F9E, teal #29B6A8, gold #F5B622), slate ink #2B323C, vivid brand gradients, big 18px radius, colored accent shadows. Interface craft (heat-maps, chip/pill, workspace sidebar) inspired by Profound; the look & feel is YEA's. Drop-in, vanilla, no framework. Add class="lm" to to activate. All color/spacing/radius come from --lm-* tokens — never hard-code. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ============================ 1. TOKENS ================================= */ :root { /* ---- Surfaces & ink (light blue-gray + slate — YEA CID brand) ---- */ --lm-bg: #E8EEF7; /* page background — light blue-gray */ --lm-surface: #FFFFFF; /* cards, panels, inputs */ --lm-surface-2: #F4F8FD; /* soft raised panels */ --lm-inset: #EDF2F9; /* table headers, tracks, code, kanban col */ --lm-inset-2: #DCE5F0; /* deeper inset / hover on inset */ --lm-border: #E3EAF3; /* hairline — the primary separator */ --lm-border-strong:#D0DAE7; /* input borders, emphasized dividers */ --lm-border-dash: #DAE2EE; /* dashed structural guides */ --lm-ink: #2B323C; /* primary text — dark slate (not black) */ --lm-ink-2: #7D8794; /* secondary / muted */ --lm-ink-3: #9AA3AE; /* tertiary / placeholder */ --lm-ink-4: #B8BFC8; /* faintest labels, disabled */ --lm-ink-inverse: #FFFFFF; /* text on dark surfaces */ /* ---- Hero accent: Brand Blue (primary interactive) ---- */ --lm-accent: #2196D6; /* CTA base, active state, brand spark */ --lm-accent-strong: #1A86C4; /* hover */ --lm-accent-press: #1676B0; /* pressed */ --lm-accent-ink: #1272A8; /* accent TEXT / links on light (AA on white) */ --lm-accent-ink-2: #1A86C4; /* links, less heavy */ --lm-accent-soft: #E4F3FB; /* pale blue fill — badges, active nav */ --lm-accent-soft-2: #CDE9F7; /* pale hover / border on soft */ --lm-accent-ring: rgba(33,150,214,.32); /* focus ring */ --lm-on-accent: #FFFFFF; /* text ON the accent / gradient fill */ /* ---- Brand gradients (the YEA CID signature) ---- */ --lm-grad-primary: linear-gradient(90deg, #2196D6, #9C3F9E); /* blue → purple : primary CTA */ --lm-grad-cool: linear-gradient(90deg, #2196D6, #29B6A8); /* blue → teal : progress, save */ --lm-grad-warm: linear-gradient(90deg, #F5B622, #F26522); /* gold → orange : reward pills */ --lm-grad-rainbow: linear-gradient(135deg, #2196D6 0%, #9C3F9E 55%, #F26522 100%); /* login / hero splash */ --lm-grad-ink: linear-gradient(135deg, #1C2530, #2B323C); /* dark hero panel */ /* ---- Blue data ramp — vivid (heat-map + primary data series) ---- */ --lm-blue: #109FEA; /* vivid sky-blue for bars/data */ --lm-blue-ink: #0E77AE; --lm-blue-soft: #E0F3FD; /* Heat scale: low → high (pale → deep). Mids brightened for vividness. */ --lm-heat-0: #E9F5FD; --lm-heat-1: #C4E8FB; --lm-heat-2: #8FD4F6; --lm-heat-3: #4FBBF0; --lm-heat-4: #159FEA; --lm-heat-5: #0E8ADB; --lm-heat-6: #0C6FB6; --lm-heat-7: #0A5790; --lm-on-heat-hi: #EAF5FD; /* text on the darkest heat cells */ /* ---- Categorical palette — YEA 5 brand colors + accents (names kept) ---- */ --lm-c-blue: #109FEA; --lm-c-blue-soft: #E0F3FD; /* vivid blue */ --lm-c-green: #16BFAE; --lm-c-green-soft: #DEF7F3; /* vivid teal */ --lm-c-violet: #B02DBE; --lm-c-violet-soft: #F6E1FA; /* vivid purple */ --lm-c-amber: #F5B622; --lm-c-amber-soft: #FEF3D8; /* gold */ --lm-c-coral: #F26522; --lm-c-coral-soft: #FDE7DB; /* orange */ --lm-c-cyan: #37B0E0; --lm-c-cyan-soft: #E3F4FC; /* sky (accent) */ --lm-c-pink: #C266C4; --lm-c-pink-soft: #F6E7F6; /* light purple */ --lm-c-slate: #7D8794; --lm-c-slate-soft: #EEF0F3; /* slate */ /* ---- Semantic (positive = teal, negative = red) ---- */ --lm-success: #29B6A8; --lm-success-soft: #E0F6F3; --lm-success-ink:#1A8577; --lm-warning: #F5B622; --lm-warning-soft: #FEF3D8; --lm-warning-ink:#9A6F0A; --lm-danger: #D3433A; --lm-danger-soft: #FCE4E1; --lm-danger-ink: #A5292A; --lm-info: #2196D6; --lm-info-soft: #E4F3FB; --lm-info-ink: #1272A8; /* ---- Brand glow (login / empty / hero only) ---- */ --lm-mist: radial-gradient(680px 420px at 12% -8%, rgba(33,150,214,.18), transparent 60%), radial-gradient(720px 520px at 92% 4%, rgba(156,63,158,.14), transparent 62%), radial-gradient(680px 560px at 60% 108%, rgba(242,101,34,.12), transparent 60%), var(--lm-bg); /* ---- Typography (Montserrat — bold, geometric, energetic) ---- */ --lm-font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC', 'PingFang TC', sans-serif; --lm-font-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC', 'PingFang TC', sans-serif; --lm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --lm-t-2xs: 11px; --lm-t-xs: 12px; --lm-t-sm: 13px; --lm-t-md: 14px; /* base body (Profound-dense) */ --lm-t-lg: 16px; --lm-t-xl: 18px; --lm-t-h3: 22px; --lm-t-h2: 28px; --lm-t-h1: 38px; --lm-t-hero:56px; /* ---- Spacing (4px base) ---- */ --lm-s1: 4px; --lm-s2: 8px; --lm-s3: 12px; --lm-s4: 16px; --lm-s5: 20px; --lm-s6: 24px; --lm-s7: 32px; --lm-s8: 48px; --lm-s9: 64px; /* ---- Radius (rounded / friendly — YEA CID) ---- */ --lm-r-xs: 8px; --lm-r-sm: 11px; /* buttons, inputs, chips */ --lm-r-md: 18px; /* cards, tables */ --lm-r-lg: 22px; /* modals, hero, showcase */ --lm-r-full: 999px; /* ---- Elevation (soft ambient + colored accent glow) ---- */ --lm-shadow-xs: 0 2px 8px rgba(43,50,60,.05); --lm-shadow-card:0 6px 22px rgba(43,50,60,.06); --lm-shadow-pop: 0 24px 70px -14px rgba(43,50,60,.30); --lm-shadow-accent: 0 8px 22px rgba(33,150,214,.35); /* ---- Motion ---- */ --lm-ease: cubic-bezier(.2,.8,.3,1); --lm-fast: 130ms; --lm-slow: 240ms; --lm-sidebar-w: 244px; --lm-maxw: 1440px; } /* ============================ 2. BASE ================================== */ *, *::before, *::after { box-sizing: border-box; } body.lm { margin: 0; background: var(--lm-bg); color: var(--lm-ink); font-family: var(--lm-font-ui); font-size: var(--lm-t-md); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .lm h1,.lm h2,.lm h3,.lm h4 { margin: 0; font-family: var(--lm-font-display); color: var(--lm-ink); font-weight: 900; letter-spacing: -.01em; line-height: 1.14; } .lm h1 { font-size: var(--lm-t-h1); letter-spacing: -.02em; } .lm h2 { font-size: var(--lm-t-h2); } .lm h3 { font-size: var(--lm-t-h3); } .lm p { margin: 0; } /* only bare links get the accent color — classed anchors (nav, buttons) keep their own */ .lm a:not([class]) { color: var(--lm-accent-ink-2); text-decoration: none; font-weight: 700; } .lm a:not([class]):hover { text-decoration: underline; text-underline-offset: 2px; } .lm ::selection { background: var(--lm-accent-soft-2); color: var(--lm-ink); } .lm-mono { font-family: var(--lm-font-mono); } .lm-num { font-variant-numeric: tabular-nums; } /* focus visibility */ .lm :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lm-accent-ring); border-radius: var(--lm-r-sm); } /* utility text */ .lm-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size: var(--lm-t-xs); font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--lm-accent-ink); } .lm-eyebrow::before { content:''; width:8px; height:8px; border-radius:3px; background: var(--lm-accent); box-shadow: 0 0 0 3px var(--lm-accent-soft); } .lm-muted { color: var(--lm-ink-2); } .lm-faint { color: var(--lm-ink-3); } .lm-display { font-family: var(--lm-font-display); letter-spacing: -.03em; line-height: 1.05; } /* ============================ 3. LAYOUT SHELL ========================== */ .lm-shell { display: grid; grid-template-columns: var(--lm-sidebar-w) 1fr; min-height: 100vh; } .lm-main { min-width: 0; display: flex; flex-direction: column; } .lm-page { padding: var(--lm-s6) var(--lm-s7); max-width: var(--lm-maxw); width: 100%; margin: 0 auto; } .lm-section + .lm-section { margin-top: var(--lm-s7); } /* ---- Sidebar ---- */ .lm-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; background: var(--lm-surface); border-right: 1px solid var(--lm-border); display: flex; flex-direction: column; padding: var(--lm-s3); } .lm-workspace { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--lm-r-sm); cursor: pointer; transition: background var(--lm-fast) var(--lm-ease); } .lm-workspace:hover { background: var(--lm-inset); } .lm-workspace__logo { width: 26px; height: 26px; border-radius: 7px; display:grid; place-items:center; background: var(--lm-ink); color: var(--lm-ink-inverse); font-weight: 700; font-size: 13px; flex: none; } .lm-workspace__name { font-weight: 650; font-size: var(--lm-t-md); letter-spacing: -.01em; } .lm-workspace__caret { margin-left: auto; color: var(--lm-ink-3); } .lm-nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--lm-s3); } .lm-nav__label { font-size: var(--lm-t-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lm-ink-4); padding: 10px 8px 4px; } .lm-nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--lm-r-sm); color: var(--lm-ink-2); font-size: var(--lm-t-md); font-weight: 500; cursor: pointer; transition: background var(--lm-fast) var(--lm-ease), color var(--lm-fast) var(--lm-ease); text-decoration: none; } .lm-nav-item svg, .lm-nav-item .lm-ico { width: 17px; height: 17px; flex: none; color: var(--lm-ink-3); } .lm-nav-item:hover { background: var(--lm-inset); color: var(--lm-ink); } /* active = neutral (no brand color) so the colorful data reads louder */ .lm-nav-item.is-active { background: var(--lm-inset-2); color: var(--lm-ink); font-weight: 800; } .lm-nav-item.is-active svg, .lm-nav-item.is-active .lm-ico { color: var(--lm-ink); } .lm-nav-item__badge { margin-left: auto; font-size: var(--lm-t-2xs); font-weight: 700; color: var(--lm-ink-3); background: var(--lm-inset); border-radius: var(--lm-r-full); padding: 1px 7px; } .lm-sidebar__foot { margin-top: auto; padding-top: var(--lm-s3); border-top: 1px solid var(--lm-border); } /* ---- Topbar ---- */ .lm-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--lm-s4); padding: var(--lm-s3) var(--lm-s7); background: color-mix(in srgb, var(--lm-bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--lm-border); } .lm-breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--lm-ink-3); font-size: var(--lm-t-sm); } .lm-breadcrumb b { color: var(--lm-ink); font-weight: 600; } .lm-breadcrumb .sep { color: var(--lm-ink-4); } .lm-topbar__spacer { flex: 1; } .lm-page__head { display: flex; align-items: flex-start; gap: var(--lm-s4); margin-bottom: var(--lm-s5); } .lm-page__head .lm-topbar__spacer { flex: 1; } .lm-page__title { display: flex; flex-direction: column; gap: 4px; } .lm-page__title h1 { font-size: var(--lm-t-h2); } .lm-page__sub { color: var(--lm-ink-2); font-size: var(--lm-t-md); } /* ============================ 4. BUTTONS ============================== */ .lm-btn { --_bg: var(--lm-surface); --_fg: var(--lm-ink); --_bd: var(--lm-border-strong); display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: var(--lm-r-sm); font-family: inherit; font-size: var(--lm-t-md); font-weight: 800; letter-spacing: .01em; background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd); cursor: pointer; white-space: nowrap; user-select: none; transition: background var(--lm-fast) var(--lm-ease), border-color var(--lm-fast) var(--lm-ease), transform var(--lm-fast) var(--lm-ease), box-shadow var(--lm-fast) var(--lm-ease); } .lm-btn:active { transform: translateY(1px); } .lm-btn svg, .lm-btn .lm-ico { width: 16px; height: 16px; } .lm-btn--primary { background: var(--lm-grad-primary); color: var(--lm-on-accent); border-color: transparent; box-shadow: var(--lm-shadow-accent); } .lm-btn--primary:hover { filter: brightness(1.04); box-shadow: 0 12px 28px rgba(33,150,214,.45); transform: translateY(-1px); } .lm-btn--primary:active { transform: translateY(0); } .lm-btn--cool { background: var(--lm-grad-cool); color: #fff; border-color: transparent; box-shadow: var(--lm-shadow-accent); } .lm-btn--cool:hover { filter: brightness(1.04); transform: translateY(-1px); } .lm-btn--warm { background: var(--lm-grad-warm); color: #fff; border-color: transparent; box-shadow: 0 8px 22px rgba(245,182,34,.4); } .lm-btn--warm:hover { filter: brightness(1.04); transform: translateY(-1px); } .lm-btn--dark { background: var(--lm-grad-ink); color: var(--lm-ink-inverse); border-color: transparent; } .lm-btn--dark:hover { filter: brightness(1.15); } .lm-btn--secondary { --_bg: var(--lm-surface); --_fg: var(--lm-ink); --_bd: var(--lm-border-strong); } .lm-btn--secondary:hover { background: var(--lm-inset); } .lm-btn--ghost { --_bg: transparent; --_fg: var(--lm-ink-2); --_bd: transparent; } .lm-btn--ghost:hover { background: var(--lm-inset); color: var(--lm-ink); } .lm-btn--danger { --_bg: var(--lm-danger); --_fg: #fff; --_bd: transparent; } .lm-btn--danger:hover { filter: brightness(.95); } .lm-btn--sm { height: 30px; padding: 0 10px; font-size: var(--lm-t-sm); } .lm-btn--lg { height: 44px; padding: 0 22px; font-size: var(--lm-t-lg); } .lm-btn--pill { border-radius: var(--lm-r-full); } .lm-btn--icon { width: 36px; padding: 0; } .lm-btn--block { width: 100%; } .lm-btn:disabled { opacity: .5; cursor: not-allowed; } /* ============================ 5. FORMS ================================ */ .lm-field { display: flex; flex-direction: column; gap: 7px; } .lm-label { font-size: var(--lm-t-xs); font-weight: 800; color: var(--lm-ink-2); text-transform: uppercase; letter-spacing: .05em; } .lm-input, .lm-select, .lm-textarea { width: 100%; font-family: inherit; font-size: var(--lm-t-md); color: var(--lm-ink); background: var(--lm-surface); border: 1px solid var(--lm-border-strong); border-radius: var(--lm-r-sm); padding: 9px 12px; transition: border-color var(--lm-fast) var(--lm-ease), box-shadow var(--lm-fast) var(--lm-ease); } .lm-input { height: 38px; } .lm-textarea { min-height: 96px; resize: vertical; line-height: 1.5; } .lm-input::placeholder, .lm-textarea::placeholder { color: var(--lm-ink-3); } .lm-input:focus, .lm-select:focus, .lm-textarea:focus { outline: none; border-color: var(--lm-accent); box-shadow: 0 0 0 3px var(--lm-accent-ring); } .lm-field.is-error .lm-input, .lm-field.is-error .lm-select, .lm-field.is-error .lm-textarea { border-color: var(--lm-danger); } .lm-field.is-error .lm-input:focus { box-shadow: 0 0 0 3px var(--lm-danger-soft); } .lm-hint { font-size: var(--lm-t-xs); color: var(--lm-ink-3); } .lm-error-text { font-size: var(--lm-t-xs); color: var(--lm-danger-ink); } .lm-select { height: 38px; 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='%238B8C82' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; } /* Search */ .lm-search { position: relative; display: flex; align-items: center; } .lm-search .lm-input { padding-left: 34px; border-radius: var(--lm-r-full); background: var(--lm-surface); } .lm-search::before { content: ''; position: absolute; left: 12px; width: 15px; height: 15px; pointer-events: none; background: center/contain no-repeat 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='%238B8C82' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); } /* Toggle */ .lm-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .lm-toggle input { position: absolute; opacity: 0; } .lm-toggle__track { width: 38px; height: 22px; border-radius: var(--lm-r-full); background: var(--lm-border-strong); transition: background var(--lm-fast) var(--lm-ease); position: relative; } .lm-toggle__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--lm-shadow-xs); transition: transform var(--lm-fast) var(--lm-ease); } .lm-toggle input:checked + .lm-toggle__track { background: var(--lm-accent); } .lm-toggle input:checked + .lm-toggle__track::after { transform: translateX(16px); } /* Segmented pill control (date-range / view switch) */ .lm-segment { display: inline-flex; background: var(--lm-inset); border-radius: var(--lm-r-sm); padding: 3px; gap: 2px; } .lm-segment__item { border: 0; background: transparent; font-family: inherit; font-size: var(--lm-t-sm); font-weight: 600; color: var(--lm-ink-2); padding: 5px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: background var(--lm-fast) var(--lm-ease), color var(--lm-fast) var(--lm-ease); } .lm-segment__item:hover { color: var(--lm-ink); } .lm-segment__item.is-active { background: var(--lm-surface); color: var(--lm-ink); box-shadow: var(--lm-shadow-xs); } /* Filter chip */ .lm-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; background: var(--lm-surface); border: 1px solid var(--lm-border-strong); border-radius: var(--lm-r-sm); font-size: var(--lm-t-sm); font-weight: 600; color: var(--lm-ink-2); cursor: pointer; transition: background var(--lm-fast) var(--lm-ease), border-color var(--lm-fast) var(--lm-ease), color var(--lm-fast) var(--lm-ease); } .lm-chip svg, .lm-chip .lm-ico { width: 14px; height: 14px; color: var(--lm-ink-3); } .lm-chip:hover { background: var(--lm-inset); color: var(--lm-ink); } .lm-chip.is-active { background: var(--lm-accent-soft); border-color: var(--lm-accent-soft-2); color: var(--lm-accent-ink); } .lm-chip.is-active svg, .lm-chip.is-active .lm-ico { color: var(--lm-accent-ink); } /* ============================ 6. CARDS ================================ */ .lm-card { background: var(--lm-surface); border: 1px solid var(--lm-border); border-radius: var(--lm-r-md); box-shadow: var(--lm-shadow-card); } .lm-card__head { display: flex; align-items: center; gap: var(--lm-s3); padding: var(--lm-s4) var(--lm-s5); border-bottom: 1px solid var(--lm-border); } .lm-card__title { font-size: var(--lm-t-lg); font-weight: 650; letter-spacing: -.01em; } .lm-card__sub { font-size: var(--lm-t-sm); color: var(--lm-ink-3); } .lm-card__head .lm-topbar__spacer { flex: 1; } .lm-card__body { padding: var(--lm-s5); } .lm-card__body--flush { padding: 0; } /* KPI stat */ .lm-stat { display: flex; flex-direction: column; gap: 8px; padding: var(--lm-s5); background: var(--lm-surface); border: 1px solid var(--lm-border); border-radius: var(--lm-r-md); box-shadow: var(--lm-shadow-card); } .lm-stat__label { display: flex; align-items: center; gap: 7px; font-size: var(--lm-t-sm); font-weight: 500; color: var(--lm-ink-2); } .lm-stat__label svg, .lm-stat__label .lm-ico { width: 15px; height: 15px; color: var(--lm-ink-3); } .lm-stat__value { font-family: var(--lm-font-display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; } .lm-stat__foot { display: flex; align-items: center; gap: 8px; } .lm-delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--lm-t-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--lm-r-full); font-variant-numeric: tabular-nums; } .lm-delta.is-up { color: var(--lm-success-ink); background: var(--lm-success-soft); } .lm-delta.is-down { color: var(--lm-danger-ink); background: var(--lm-danger-soft); } .lm-delta.is-flat { color: var(--lm-ink-3); background: var(--lm-inset); } .lm-stat__hint { font-size: var(--lm-t-xs); color: var(--lm-ink-3); } /* ============================ 7. BADGES & PILLS ======================= */ .lm-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--lm-t-xs); font-weight: 600; padding: 2px 9px; border-radius: var(--lm-r-full); background: var(--lm-inset); color: var(--lm-ink-2); line-height: 1.5; } .lm-badge--dot::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; } .lm-badge--blue { background: var(--lm-c-blue-soft); color: var(--lm-blue-ink); } .lm-badge--green { background: var(--lm-c-green-soft); color: var(--lm-success-ink); } .lm-badge--violet { background: var(--lm-c-violet-soft); color: #5a3fd6; } .lm-badge--amber { background: var(--lm-c-amber-soft); color: var(--lm-warning-ink); } .lm-badge--coral { background: var(--lm-c-coral-soft); color: var(--lm-danger-ink); } .lm-badge--cyan { background: var(--lm-c-cyan-soft); color: #0b7c8c; } .lm-badge--pink { background: var(--lm-c-pink-soft); color: #c53a7c; } .lm-badge--slate { background: var(--lm-c-slate-soft); color: var(--lm-c-slate); } .lm-badge--solid { background: var(--lm-accent); color: var(--lm-on-accent); } .lm-badge--outline{ background: transparent; border: 1px solid var(--lm-border-strong); color: var(--lm-ink-2); } /* Brand/logo chip for ranking tables */ .lm-brand { display: inline-flex; align-items: center; gap: 9px; } .lm-brand__logo { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex: none; } .lm-brand__name { font-weight: 600; } .lm-brand__you { font-size: var(--lm-t-2xs); font-weight: 700; color: var(--lm-accent-ink); background: var(--lm-accent-soft); border-radius: var(--lm-r-full); padding: 1px 7px; letter-spacing: .02em; } /* Avatar */ .lm-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: var(--lm-t-xs); font-weight: 800; color: #fff; background: linear-gradient(135deg,#2196D6,#9C3F9E); } .lm-avatar--green { background: linear-gradient(135deg,#2196D6,#29B6A8); } .lm-avatar--amber { background: linear-gradient(135deg,#F5B622,#F26522); } .lm-avatar--pink { background: linear-gradient(135deg,#9C3F9E,#C266C4); } .lm-avatar-group { display: inline-flex; } .lm-avatar-group .lm-avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--lm-surface); } .lm-avatar-group .lm-avatar:first-child { margin-left: 0; } /* ============================ 8. TABS ================================= */ .lm-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--lm-border); } .lm-tab { position: relative; border: 0; background: transparent; font-family: inherit; font-size: var(--lm-t-md); font-weight: 600; color: var(--lm-ink-2); padding: 10px 14px; cursor: pointer; } .lm-tab:hover { color: var(--lm-ink); } .lm-tab.is-active { color: var(--lm-ink); } .lm-tab.is-active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--lm-accent); border-radius: 2px; } /* ============================ 9. TABLES + HEAT-MAP ==================== */ .lm-table-wrap { border: 1px solid var(--lm-border); border-radius: var(--lm-r-md); overflow: hidden; background: var(--lm-surface); } .lm-table { width: 100%; border-collapse: collapse; font-size: var(--lm-t-md); } .lm-table thead th { text-align: left; font-size: var(--lm-t-xs); font-weight: 600; letter-spacing: .02em; color: var(--lm-ink-3); background: var(--lm-inset); padding: 10px 14px; white-space: nowrap; border-bottom: 1px solid var(--lm-border); } .lm-table th.is-num, .lm-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; } .lm-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--lm-border); color: var(--lm-ink); } .lm-table tbody tr:last-child td { border-bottom: 0; } .lm-table tbody tr { transition: background var(--lm-fast) var(--lm-ease); } .lm-table tbody tr:hover { background: var(--lm-surface-2); } .lm-table__sort { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .lm-table__sort svg { width: 12px; height: 12px; opacity: .6; } .lm-th-you { color: var(--lm-accent-ink); } /* highlight only the non-heat cells so heat-map cells keep their own scale */ .lm-table tr.is-you td:not(.lm-heat) { background: var(--lm-accent-soft); } .lm-table tr.is-you:hover td:not(.lm-heat) { background: var(--lm-accent-soft-2); } .lm-table tr.is-you td.lm-heat { box-shadow: inset 0 0 0 1px var(--lm-accent-soft-2); } /* Heat-map cell: set data-heat="0..7" OR --h: <0..1> via inline style */ .lm-heat { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--lm-ink); position: relative; } .lm-heat[data-heat="0"] { background: var(--lm-heat-0); } .lm-heat[data-heat="1"] { background: var(--lm-heat-1); } .lm-heat[data-heat="2"] { background: var(--lm-heat-2); } .lm-heat[data-heat="3"] { background: var(--lm-heat-3); } .lm-heat[data-heat="4"] { background: var(--lm-heat-4); color: #fff; } .lm-heat[data-heat="5"] { background: var(--lm-heat-5); color: #fff; } .lm-heat[data-heat="6"] { background: var(--lm-heat-6); color: var(--lm-on-heat-hi); } .lm-heat[data-heat="7"] { background: var(--lm-heat-7); color: var(--lm-on-heat-hi); } /* ============================ 10. BARS / DATAVIZ ===================== */ /* Horizontal category bar (citation-sources style) */ .lm-bars { display: flex; flex-direction: column; gap: 12px; } .lm-bar-row { display: grid; grid-template-columns: 150px 1fr 52px; align-items: center; gap: 12px; } .lm-bar-row__label { display: flex; align-items: center; gap: 8px; font-size: var(--lm-t-sm); color: var(--lm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lm-bar-track { height: 10px; background: var(--lm-inset); border-radius: var(--lm-r-full); overflow: hidden; } .lm-bar-fill { height: 100%; border-radius: var(--lm-r-full); background: var(--lm-blue); transition: width var(--lm-slow) var(--lm-ease); } .lm-bar-fill--violet { background: var(--lm-c-violet); } .lm-bar-fill--green { background: var(--lm-accent); } .lm-bar-fill--amber { background: var(--lm-c-amber); } .lm-bar-fill--gradient { background: var(--lm-grad-primary); } .lm-bar-row__val { text-align: right; font-size: var(--lm-t-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lm-ink); } /* Legend */ .lm-legend { display: flex; flex-wrap: wrap; gap: 14px; } .lm-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--lm-t-sm); color: var(--lm-ink-2); } .lm-legend__dot { width: 9px; height: 9px; border-radius: 50%; } /* Progress */ .lm-progress { height: 8px; background: var(--lm-inset); border-radius: var(--lm-r-full); overflow: hidden; } .lm-progress__bar { height: 100%; background: var(--lm-grad-cool); border-radius: var(--lm-r-full); } /* Big score ring — set --p (0..100) */ .lm-ring { --p: 0; --sz: 96px; width: var(--sz); height: var(--sz); border-radius: 50%; background: conic-gradient(var(--lm-accent) calc(var(--p)*1%), var(--lm-inset) 0); display: grid; place-items: center; } .lm-ring__inner { width: calc(var(--sz) - 18px); height: calc(var(--sz) - 18px); border-radius: 50%; background: var(--lm-surface); display: grid; place-items: center; flex-direction: column; } .lm-ring__num { font-family: var(--lm-font-display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ============================ 11. CALENDAR ========================== */ .lm-cal { border: 1px solid var(--lm-border); border-radius: var(--lm-r-md); overflow: hidden; background: var(--lm-surface); } .lm-cal__dow { display: grid; grid-template-columns: repeat(7,1fr); background: var(--lm-inset); border-bottom: 1px solid var(--lm-border); } .lm-cal__dow span { padding: 9px 12px; font-size: var(--lm-t-xs); font-weight: 600; color: var(--lm-ink-3); text-transform: uppercase; letter-spacing: .04em; } .lm-cal__grid { display: grid; grid-template-columns: repeat(7,1fr); } .lm-cal__cell { min-height: 116px; padding: 8px; border-right: 1px solid var(--lm-border); border-bottom: 1px solid var(--lm-border); display: flex; flex-direction: column; gap: 5px; } .lm-cal__cell:nth-child(7n) { border-right: 0; } .lm-cal__cell.is-dim { background: var(--lm-surface-2); } .lm-cal__cell.is-dim .lm-cal__date { color: var(--lm-ink-4); } .lm-cal__date { font-size: var(--lm-t-sm); font-weight: 600; color: var(--lm-ink-2); width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; } .lm-cal__cell.is-today .lm-cal__date { background: var(--lm-accent); color: var(--lm-on-accent); } .lm-event { font-size: var(--lm-t-xs); font-weight: 600; padding: 4px 8px; border-radius: 6px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 2.5px solid; } .lm-event--blue { background: var(--lm-c-blue-soft); color: var(--lm-blue-ink); border-color: var(--lm-c-blue); } .lm-event--green { background: var(--lm-c-green-soft); color: var(--lm-success-ink);border-color: var(--lm-c-green); } .lm-event--violet { background: var(--lm-c-violet-soft); color: #5a3fd6; border-color: var(--lm-c-violet); } .lm-event--amber { background: var(--lm-c-amber-soft); color: var(--lm-warning-ink);border-color: var(--lm-c-amber); } .lm-event--coral { background: var(--lm-c-coral-soft); color: var(--lm-danger-ink); border-color: var(--lm-c-coral); } .lm-event--pink { background: var(--lm-c-pink-soft); color: #c53a7c; border-color: var(--lm-c-pink); } .lm-event--cyan { background: var(--lm-c-cyan-soft); color: #0b7c8c; border-color: var(--lm-c-cyan); } /* ============================ 12. KANBAN ============================ */ .lm-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px,1fr); gap: var(--lm-s4); overflow-x: auto; padding-bottom: 6px; } .lm-kcol { background: var(--lm-inset); border: 1px solid var(--lm-border); border-radius: var(--lm-r-md); padding: 12px; display: flex; flex-direction: column; gap: 10px; } .lm-kcol__head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; } .lm-kcol__title { font-size: var(--lm-t-sm); font-weight: 700; color: var(--lm-ink); } .lm-kcol__count { font-size: var(--lm-t-xs); font-weight: 700; color: var(--lm-ink-3); background: var(--lm-surface); border-radius: var(--lm-r-full); padding: 1px 8px; } .lm-kcol__dot { width: 8px; height: 8px; border-radius: 50%; } .lm-kcard { background: var(--lm-surface); border: 1px solid var(--lm-border); border-radius: var(--lm-r-sm); padding: 12px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--lm-shadow-xs); cursor: pointer; transition: border-color var(--lm-fast) var(--lm-ease), transform var(--lm-fast) var(--lm-ease); } .lm-kcard:hover { border-color: var(--lm-border-strong); transform: translateY(-1px); } .lm-kcard__title { font-size: var(--lm-t-md); font-weight: 600; line-height: 1.4; } .lm-kcard__meta { display: flex; align-items: center; gap: 8px; } .lm-kcard__foot { display: flex; align-items: center; justify-content: space-between; } /* ============================ 13. MODAL / TOAST / EMPTY ============= */ .lm-modal-backdrop { position: fixed; inset: 0; background: rgba(25,26,22,.42); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 50; padding: var(--lm-s4); } .lm-modal { width: 100%; max-width: 460px; background: var(--lm-surface); border: 1px solid var(--lm-border); border-radius: var(--lm-r-lg); box-shadow: var(--lm-shadow-pop); overflow: hidden; } .lm-modal__head { padding: var(--lm-s5) var(--lm-s5) var(--lm-s3); } .lm-modal__title { font-size: var(--lm-t-h3); } .lm-modal__body { padding: 0 var(--lm-s5) var(--lm-s5); color: var(--lm-ink-2); } .lm-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: var(--lm-s4) var(--lm-s5); border-top: 1px solid var(--lm-border); background: var(--lm-surface-2); } .lm-toast { display: inline-flex; align-items: center; gap: 10px; background: var(--lm-ink); color: var(--lm-ink-inverse); padding: 11px 15px; border-radius: var(--lm-r-sm); box-shadow: var(--lm-shadow-pop); font-size: var(--lm-t-sm); font-weight: 500; } .lm-toast__dot { width: 8px; height: 8px; border-radius: 50%; } .lm-toast--success .lm-toast__dot { background: var(--lm-accent); } .lm-toast--error .lm-toast__dot { background: var(--lm-danger); } .lm-empty { text-align: center; padding: var(--lm-s9) var(--lm-s6); border-radius: var(--lm-r-md); background: var(--lm-mist); border: 1px solid var(--lm-border); } .lm-empty__icon { width: 48px; height: 48px; border-radius: 14px; display: inline-grid; place-items: center; margin-bottom: 14px; background: var(--lm-surface); border: 1px solid var(--lm-border); box-shadow: var(--lm-shadow-card); color: var(--lm-accent-ink); } .lm-empty__title { font-family: var(--lm-font-display); font-size: var(--lm-t-h3); font-weight: 700; letter-spacing: -.015em; } .lm-empty__desc { color: var(--lm-ink-2); margin: 6px auto 18px; max-width: 380px; } /* ============================ 14. SHOWCASE / MISC =================== */ /* Browser-chrome framed panel (Profound product-shot device) */ .lm-window { border: 1px solid var(--lm-border); border-radius: var(--lm-r-lg); overflow: hidden; background: var(--lm-surface); box-shadow: var(--lm-shadow-pop); } .lm-window__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--lm-inset); border-bottom: 1px solid var(--lm-border); } .lm-window__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--lm-border-strong); } .lm-window__body { padding: var(--lm-s5); } .lm-divider { height: 1px; background: var(--lm-border); border: 0; margin: var(--lm-s5) 0; } .lm-divider--dash { height: 0; border-top: 1px dashed var(--lm-border-dash); background: none; } /* Grid helpers */ .lm-grid { display: grid; gap: var(--lm-s4); } .lm-grid--2 { grid-template-columns: repeat(2,1fr); } .lm-grid--3 { grid-template-columns: repeat(3,1fr); } .lm-grid--4 { grid-template-columns: repeat(4,1fr); } .lm-row { display: flex; align-items: center; gap: var(--lm-s3); } .lm-row--between { justify-content: space-between; } .lm-row--wrap { flex-wrap: wrap; } .lm-stack { display: flex; flex-direction: column; gap: var(--lm-s4); } @media (max-width: 1080px) { .lm-grid--4 { grid-template-columns: repeat(2,1fr); } .lm-grid--3 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 860px) { .lm-shell { grid-template-columns: 1fr; } .lm-sidebar { display: none; } .lm-page, .lm-topbar { padding-left: var(--lm-s4); padding-right: var(--lm-s4); } .lm-grid--2, .lm-grid--3, .lm-grid--4 { grid-template-columns: 1fr; } .lm-bar-row { grid-template-columns: 110px 1fr 44px; } }