/* ========================================================================== Claude UI — Editorial Component Library Version: 1.0.0 A warm, literary-flavored component system built on top of Tailwind CDN. Usage: 1. Include Tailwind CDN in 2. Include this file AFTER Tailwind 3. Use .c-* classes alongside Tailwind utilities Class prefix: .c- (claude-ui) ========================================================================== */ /* ========================================================================== 1. DESIGN TOKENS ========================================================================== */ :root { /* ---- Surfaces (warm parchment family) ---- */ --c-parchment: oklch(98% 0.005 85); /* page background */ --c-ivory: oklch(100% 0 0); /* card surface */ --c-white: oklch(100% 0 0); /* max contrast surface */ --c-sand: oklch(92% 0.008 85); /* subtle surface / warm sand buttons */ --c-sand-soft: oklch(96% 0.006 85); /* soft elevated surface */ --c-sand-deep: oklch(88% 0.012 85); /* pressed / active sand */ --c-surface-tint: oklch(98% 0.005 85 / 0.88); --c-surface-glass: oklch(100% 0 0 / 0.72); --c-surface-muted: oklch(98% 0.008 85 / 0.62); /* ---- Borders (warm cream family) ---- */ --c-border: oklch(92% 0.008 85); /* hairline */ --c-border-warm: oklch(86% 0.01 85); /* standard border */ --c-border-strong: oklch(78% 0.014 85); /* emphasized border */ --c-border-soft: oklch(86% 0.01 85 / 0.56); --c-border-dark: oklch(12% 0.003 85 / 0.12); /* ---- Ink (warm grays for text) ---- */ --c-ink: oklch(12% 0.003 85); /* primary text, dark surface */ --c-ink-2: oklch(24% 0.004 85); /* dark surface / border */ --c-ink-soft: oklch(38% 0.006 85); /* secondary dark text */ --c-ink-muted: oklch(48% 0.007 85); /* body text, muted */ --c-ink-faint: oklch(62% 0.008 85); /* tertiary text, captions */ --c-ink-silver: oklch(72% 0.01 85); /* text on dark surfaces */ --c-ink-veil: oklch(12% 0.003 85 / 0.38); /* ---- Semantic tiers (Bootstrap-style, OKLCH scale) ---- */ --c-primary: oklch(67% 0.13 39); /* primary action: terracotta */ --c-primary-deep: oklch(56% 0.13 39); --c-primary-soft: oklch(74% 0.1 39); --c-primary-tint: oklch(67% 0.13 39 / 0.13); --c-primary-wash: oklch(92% 0.02 45); --c-primary-border: oklch(67% 0.13 39 / 0.24); --c-primary-ring: oklch(67% 0.13 39 / 0.22); --c-primary-text: var(--c-primary-deep); --c-primary-light: var(--c-primary-wash); --c-primary-base: var(--c-primary); --c-primary-dark: var(--c-primary-deep); --c-default: var(--c-sand); /* default action: warm neutral */ --c-default-deep: var(--c-sand-deep); --c-default-wash: var(--c-surface-muted); --c-default-border: var(--c-border-warm); --c-default-ring: oklch(86% 0.01 85 / 0.44); --c-default-text: var(--c-ink-soft); --c-default-light: var(--c-default-wash); --c-default-base: var(--c-default); --c-default-dark: var(--c-default-deep); --c-success: oklch(61% 0.07 127); /* success: muted green */ --c-success-deep: oklch(48% 0.07 127); --c-success-wash: oklch(92% 0.025 127); --c-success-border: oklch(61% 0.07 127 / 0.26); --c-success-ring: oklch(61% 0.07 127 / 0.22); --c-success-text: var(--c-success-deep); --c-success-light: var(--c-success-wash); --c-success-base: var(--c-success); --c-success-dark: var(--c-success-deep); --c-warning: oklch(68% 0.09 78); /* warning: warm ochre */ --c-warning-deep: oklch(54% 0.09 78); --c-warning-wash: oklch(92% 0.025 78); --c-warning-border: oklch(68% 0.09 78 / 0.28); --c-warning-ring: oklch(68% 0.09 78 / 0.22); --c-warning-text: var(--c-warning-deep); --c-warning-light: var(--c-warning-wash); --c-warning-base: var(--c-warning); --c-warning-dark: var(--c-warning-deep); --c-danger: oklch(55% 0.16 28); /* danger: warm crimson */ --c-danger-deep: oklch(45% 0.16 28); --c-danger-wash: oklch(93% 0.03 28); --c-danger-border: oklch(55% 0.16 28 / 0.24); --c-danger-ring: oklch(55% 0.16 28 / 0.18); --c-danger-text: var(--c-danger-deep); --c-danger-light: var(--c-danger-wash); --c-danger-base: var(--c-danger); --c-danger-dark: var(--c-danger-deep); /* ---- Backward-compatible brand aliases ---- */ --c-brand: var(--c-primary); --c-brand-deep: var(--c-primary-deep); --c-brand-soft: var(--c-primary-soft); --c-brand-tint: var(--c-primary-tint); --c-brand-wash: var(--c-primary-wash); --c-brand-border: var(--c-primary-border); --c-brand-ring: var(--c-primary-ring); --c-accent-terracotta: var(--c-primary); /* ---- Supporting accent (focus and informational surfaces) ---- */ --c-info: oklch(67% 0.09 249); /* calm blue */ --c-info-deep: oklch(54% 0.1 249); --c-info-wash: oklch(92% 0.025 249); --c-info-border: oklch(67% 0.09 249 / 0.24); --c-info-ring: oklch(67% 0.09 249 / 0.22); --c-info-text: var(--c-info-deep); --c-info-light: var(--c-info-wash); --c-info-base: var(--c-info); --c-info-dark: var(--c-info-deep); --c-accent-blue: var(--c-info); --c-accent-green: var(--c-success); /* ---- Shadows (warm ring-based system) ---- */ --c-shadow-ring: 0 0 0 1px oklch(12% 0.003 85 / 0.1); --c-shadow-ring-strong: 0 0 0 1px oklch(12% 0.003 85 / 0.18); --c-shadow-soft: 0 4px 24px oklch(12% 0.003 85 / 0.05); --c-shadow-whisper: 0 18px 40px oklch(12% 0.003 85 / 0.08); --c-shadow-lift: 0 24px 48px oklch(12% 0.003 85 / 0.1); --c-shadow-focus: 0 0 0 3px var(--c-info-ring); --c-shadow-focus-brand: 0 0 0 3px var(--c-brand-ring); /* ---- Radius scale ---- */ --c-radius-sm: 6px; /* inline elements, chips */ --c-radius: 10px; /* default */ --c-radius-md: 14px; /* buttons, inputs */ --c-radius-lg: 18px; /* panels */ --c-radius-xl: 24px; /* cards */ --c-radius-2xl: 32px; /* hero containers */ --c-radius-full: 9999px; /* pills */ /* ---- Spacing scale (8px base) ---- */ --c-space-1: 4px; --c-space-2: 8px; --c-space-3: 12px; --c-space-4: 16px; --c-space-5: 20px; --c-space-6: 24px; --c-space-8: 32px; --c-space-10: 40px; --c-space-12: 48px; --c-space-16: 64px; /* ---- Typography ---- */ --c-font-serif: Georgia, "Times New Roman", "Songti SC", serif; --c-font-sans: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --c-font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* ---- Layout ---- */ --c-container: 1280px; --c-container-wide: 1440px; --c-nav-height: 68px; --c-generator-gap: 1.5rem; --c-generator-left: 1.05fr; --c-generator-right: 0.95fr; --c-generator-control-radius: var(--c-radius-md); --c-generator-panel-radius: var(--c-generator-control-radius); --c-generator-inner-radius: var(--c-generator-control-radius); --c-generator-field-gap: 1.5rem; --c-generator-panel-padding: 1.25rem; --c-generator-status-padding: 0.75rem 1rem; /* ---- Transitions ---- */ --c-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); --c-transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================================== 2. BASE RESET & TYPOGRAPHY ========================================================================== */ html { background: var(--c-parchment); color: var(--c-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; margin: 0; color: var(--c-ink); font-family: var(--c-font-sans); font-size: 16px; line-height: 1.6; background: radial-gradient(circle at 86% -10%, oklch(67% 0.13 39 / 0.08), transparent 32%), radial-gradient(circle at -10% 90%, oklch(61% 0.07 127 / 0.07), transparent 26%), radial-gradient(circle at 102% 64%, oklch(67% 0.09 249 / 0.05), transparent 24%), var(--c-parchment); } h1, h2, h3, h4, h5, h6 { font-family: var(--c-font-serif); font-weight: 500; color: var(--c-ink); letter-spacing: -0.015em; margin: 0; } h1 { font-size: 2.5rem; line-height: 1.12; } h2 { font-size: 2rem; line-height: 1.18; } h3 { font-size: 1.5rem; line-height: 1.22; } h4 { font-size: 1.25rem; line-height: 1.28; } h5 { font-size: 1.0625rem; line-height: 1.35; } h6 { font-size: 0.9375rem; line-height: 1.4; } p { margin: 0 0 1em; color: var(--c-ink-muted); line-height: 1.6; } p:last-child { margin-bottom: 0; } a { color: var(--c-ink-2); text-decoration: none; transition: color var(--c-transition); } a:hover { color: var(--c-ink); } code, kbd, samp, pre { font-family: var(--c-font-mono); font-size: 0.9em; } ::selection { background: var(--c-brand-tint); color: var(--c-ink); } .hero-icon { display: inline-block; flex-shrink: 0; vertical-align: -0.125em; background-color: currentColor; -webkit-mask: var(--hero-icon-url) no-repeat center / contain; mask: var(--hero-icon-url) no-repeat center / contain; } /* Scrollbar (webkit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--c-radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--c-ink-faint); } /* ========================================================================== 3. LAYOUT PRIMITIVES These are low-level building blocks. Use them instead of writing custom flex/grid CSS every time. ========================================================================== */ /* Container — centered, max-width. Use .c-container-wide for 1440. */ .c-container { width: 100%; max-width: var(--c-container); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .c-container-wide { max-width: var(--c-container-wide); } .c-container-narrow { max-width: 760px; } /* Stack — vertical spacing between direct children. Set via --gap. */ .c-stack { display: flex; flex-direction: column; gap: var(--gap, 1rem); } .c-stack-sm { --gap: 0.5rem; } .c-stack-md { --gap: 1rem; } .c-stack-lg { --gap: 1.5rem; } .c-stack-xl { --gap: 2rem; } /* Cluster — horizontal flex with wrapping, consistent gap. For toolbars, tag lists. */ .c-cluster { display: flex; flex-wrap: wrap; gap: var(--gap, 0.5rem); align-items: center; } .c-cluster-sm { --gap: 0.25rem; } .c-cluster-md { --gap: 0.5rem; } .c-cluster-lg { --gap: 1rem; } .c-cluster-between { justify-content: space-between; } .c-cluster-end { justify-content: flex-end; } /* Grid — responsive auto-fit grid. Set min column width via --min. */ .c-grid { display: grid; gap: var(--gap, 1rem); grid-template-columns: repeat(auto-fit, minmax(var(--min, 240px), 1fr)); } .c-grid-2 { grid-template-columns: repeat(2, 1fr); } .c-grid-3 { grid-template-columns: repeat(3, 1fr); } .c-grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .c-grid-2, .c-grid-3, .c-grid-4 { grid-template-columns: 1fr; } } /* Sidebar layout — main content + right/left sidebar that collapses on mobile */ .c-sidebar-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; } .c-sidebar-layout--left { grid-template-columns: 280px 1fr; } @media (max-width: 960px) { .c-sidebar-layout, .c-sidebar-layout--left { grid-template-columns: 1fr; } } /* Divider */ .c-divider { height: 1px; background: var(--c-border-warm); border: 0; margin: 1.5rem 0; } .c-divider-vertical { width: 1px; height: auto; align-self: stretch; background: var(--c-border-warm); margin: 0 0.5rem; } /* ========================================================================== 4. APP SHELL (Navigation, Main, Footer) Drop these on every page for consistent framing. ========================================================================== */ .c-nav { position: sticky; top: 0; z-index: 50; background: var(--c-surface-tint); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--c-border-dark); } .c-nav__inner { max-width: var(--c-container-wide); margin: 0 auto; padding: 0.9rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; min-height: var(--c-nav-height); } .c-brand { display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none; } .c-brand__eyebrow { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-faint); line-height: 1; } .c-brand__title { font-family: var(--c-font-serif); font-size: 1.5rem; line-height: 1.1; color: var(--c-ink); letter-spacing: -0.015em; } .c-brand__meta { font-size: 0.86rem; color: var(--c-ink-muted); } .c-nav__links { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; } .c-nav__link { display: inline-flex; align-items: center; padding: 0.55rem 0.95rem; border-radius: var(--c-radius-full); border: 1px solid transparent; color: var(--c-ink-muted); font-size: 0.94rem; font-weight: 500; text-decoration: none; transition: all var(--c-transition); } .c-nav__link:hover { background: var(--c-surface-glass); color: var(--c-ink); } .c-nav__link.is-active { background: var(--c-ivory); border-color: var(--c-brand-border); color: var(--c-ink); box-shadow: var(--c-shadow-ring), 0 6px 18px oklch(12% 0.003 85 / 0.04); } .c-main { flex: 1; padding: 2rem 1.5rem 3rem; } .c-main__inner { max-width: var(--c-container-wide); margin: 0 auto; } .c-footer { border-top: 1px solid var(--c-border-dark); background: var(--c-surface-tint); } .c-footer__inner { max-width: var(--c-container-wide); margin: 0 auto; padding: 1.2rem 1.5rem; display: flex; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap; color: var(--c-ink-faint); font-size: 0.86rem; } /* Workbench shell — Claude-inspired admin layout for TCC */ .c-workbench-shell { display: grid; grid-template-columns: var(--c-workbench-sidebar-width, 236px) minmax(0, 1fr); min-height: 100vh; background: radial-gradient(circle at 100% 0%, oklch(67% 0.09 249 / 0.045), transparent 28%), var(--c-parchment); } .c-workbench-shell.is-sidebar-collapsed { grid-template-columns: 72px minmax(0, 1fr); } .c-workbench-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--c-border-dark); background: oklch(100% 0 0 / 0.94); box-shadow: 10px 0 32px oklch(12% 0.003 85 / 0.03); transition: width var(--c-transition); } .c-workbench-brand { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1.1rem 0.9rem 0.9rem; } .c-workbench-brand__mark { display: flex; min-width: 0; flex-direction: column; gap: 0.12rem; } .c-workbench-brand__title { font-family: var(--c-font-serif); font-size: 1.5rem; line-height: 1.1; color: var(--c-ink); } .c-workbench-brand__meta { font-size: 0.82rem; color: var(--c-ink-muted); white-space: nowrap; } .c-sidebar-toggle { display: inline-flex; width: 2.15rem; height: 2.15rem; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--c-border-warm); border-radius: var(--c-radius); background: var(--c-white); color: var(--c-ink-soft); transition: background var(--c-transition), border-color var(--c-transition), color var(--c-transition); } .c-sidebar-toggle:hover { border-color: var(--c-border-strong); background: var(--c-ivory); color: var(--c-ink); } .c-workbench-nav { flex: 1; overflow-y: auto; padding: 0.5rem 0.55rem 1rem; } .c-workbench-nav__section { padding: 0.6rem 0; } .c-workbench-nav__label { margin: 0 0 0.25rem; padding: 0 0.55rem; font-size: 0.75rem; font-weight: 600; color: var(--c-ink-faint); } .c-workbench-nav__item { display: flex; align-items: center; gap: 0.65rem; min-height: 2.45rem; margin: 0.12rem 0; padding: 0.55rem 0.6rem; border: 1px solid transparent; border-radius: var(--c-radius); color: var(--c-ink-soft); font-size: 0.95rem; font-weight: 500; transition: background var(--c-transition), border-color var(--c-transition), color var(--c-transition); } .c-workbench-nav__item:hover { background: var(--c-surface-muted); color: var(--c-ink); } .c-workbench-nav__item.is-active { border-color: var(--c-brand-border); background: var(--c-white); color: var(--c-ink); box-shadow: var(--c-shadow-ring), 0 8px 24px oklch(12% 0.003 85 / 0.05); } .c-workbench-account { display: flex; align-items: center; gap: 0.75rem; margin: 0.65rem; padding: 0.75rem 0.55rem; border-top: 1px solid var(--c-border-dark); } .c-workbench-account__avatar { display: inline-flex; width: 2.4rem; height: 2.4rem; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--c-radius-full); background: var(--c-ink-2); color: var(--c-ivory); font-weight: 700; } .c-workbench-account__name { margin: 0; color: var(--c-ink); font-size: 0.9rem; font-weight: 600; } .c-workbench-account__meta { margin: 0; color: var(--c-ink-faint); font-size: 0.78rem; } .c-workbench-main { min-width: 0; display: flex; min-height: 100vh; flex-direction: column; } .c-workbench-sidebar__resizer { position: absolute; top: 0; right: -4px; bottom: 0; z-index: 20; width: 8px; cursor: col-resize; touch-action: none; } .c-workbench-sidebar__resizer::after { content: ""; position: absolute; top: 0; right: 3px; bottom: 0; width: 2px; background: transparent; transition: background var(--c-transition); } .c-workbench-sidebar__resizer:hover::after, .is-resizing-sidebar .c-workbench-sidebar__resizer::after { background: var(--c-info); } body.is-resizing-sidebar { cursor: col-resize; user-select: none; } .c-workbench-shell.is-sidebar-collapsed .c-workbench-brand { align-items: center; justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; } .c-workbench-shell.is-sidebar-collapsed .c-workbench-brand__mark { display: none; } .c-workbench-shell.is-sidebar-collapsed .c-workbench-nav { padding-left: 0.5rem; padding-right: 0.5rem; } .c-workbench-shell.is-sidebar-collapsed .c-workbench-nav__label, .c-workbench-shell.is-sidebar-collapsed .c-workbench-nav__item span:not(.hero-icon), .c-workbench-shell.is-sidebar-collapsed .c-workbench-account__name, .c-workbench-shell.is-sidebar-collapsed .c-workbench-account__meta { display: none; } .c-workbench-shell.is-sidebar-collapsed .c-workbench-nav__section { padding: 0.35rem 0; } .c-workbench-shell.is-sidebar-collapsed .c-workbench-nav__item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } .c-workbench-shell.is-sidebar-collapsed .c-workbench-account { justify-content: center; margin-left: 0.5rem; margin-right: 0.5rem; padding-left: 0; padding-right: 0; } .c-workbench-shell.is-sidebar-collapsed .c-workbench-sidebar__resizer { display: none; } .c-status-dot { width: 0.5rem; height: 0.5rem; border-radius: var(--c-radius-full); background: var(--c-warning); } .c-status-dot.is-online { background: var(--c-success); } .c-workbench-content { width: 100%; max-width: 1320px; margin: 0 auto; padding: 2rem; } .c-page-frame { width: 100%; } .c-admin-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-border-warm); } .c-admin-page-header__text { max-width: 760px; } .c-admin-page-header__kicker { margin: 0 0 0.45rem; color: var(--c-ink-faint); font-size: 0.78rem; font-weight: 650; } .c-admin-page-header__title { margin: 0; font-size: 2rem; line-height: 1.18; color: var(--c-ink); } .c-admin-page-header__desc { margin: 0.6rem 0 0; max-width: 680px; color: var(--c-ink-muted); font-size: 0.98rem; line-height: 1.7; } .c-admin-page-header__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; } .c-workbench-welcome { min-height: calc(100vh - 8.25rem); display: grid; place-items: center; padding: 2rem 0; } .c-workbench-welcome__inner { width: min(820px, 100%); text-align: center; } .c-workbench-welcome__title { margin: 0; font-size: 2.35rem; line-height: 1.18; } .c-workbench-welcome__desc { margin: 0.9rem auto 0; max-width: 620px; color: var(--c-ink-muted); font-size: 1rem; line-height: 1.75; } .c-workbench-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 2rem; } .c-workbench-quick-link { display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.4rem; border: 1px solid var(--c-border-warm); border-radius: var(--c-radius); background: var(--c-surface-glass); color: var(--c-ink-soft); font-size: 0.9rem; font-weight: 600; transition: background var(--c-transition), border-color var(--c-transition), color var(--c-transition), transform var(--c-transition); } .c-workbench-quick-link:hover { border-color: var(--c-border-strong); background: var(--c-white); color: var(--c-ink); transform: translateY(-1px); } /* ========================================================================== 5. PAGE HEADERS Standard patterns for the top of content pages. ========================================================================== */ .c-page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--c-border-warm); } .c-page-header__title { font-family: var(--c-font-serif); font-size: 2rem; font-weight: 500; margin: 0 0 0.4rem; letter-spacing: -0.015em; color: var(--c-ink); } .c-page-header__subtitle { color: var(--c-ink-muted); font-size: 1rem; margin: 0; max-width: 58ch; } .c-page-header__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; } /* Overline — small uppercase label above titles */ .c-overline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem; border-radius: var(--c-radius-full); background: var(--c-brand-wash); border: 1px solid var(--c-brand-border); color: var(--c-brand-deep); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; } /* Breadcrumb */ .c-breadcrumb { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.86rem; color: var(--c-ink-faint); margin-bottom: 1rem; } .c-breadcrumb a { color: var(--c-ink-muted); } .c-breadcrumb a:hover { color: var(--c-ink); } .c-breadcrumb__sep { color: var(--c-ink-faint); opacity: 0.6; } .c-breadcrumb__current { color: var(--c-ink); font-weight: 500; } /* ========================================================================== 6. CARDS & PANELS ========================================================================== */ /* Standard card — the workhorse */ .c-card { background: var(--c-ivory); border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-xl); box-shadow: var(--c-shadow-ring), var(--c-shadow-soft); overflow: hidden; } .c-card__head { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--c-border); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .c-card__title { font-family: var(--c-font-serif); font-size: 1.15rem; font-weight: 500; color: var(--c-ink); margin: 0; } .c-card__subtitle { font-size: 0.86rem; color: var(--c-ink-faint); margin: 0.15rem 0 0; } .c-card__body { padding: 1.5rem; } .c-card__foot { padding: 1rem 1.5rem; border-top: 1px solid var(--c-border); background: var(--c-surface-muted); display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; } .c-card--flush .c-card__body { padding: 0; } .c-card--elevated { box-shadow: var(--c-shadow-ring), var(--c-shadow-whisper); } /* VisualWaterfall — compact media cards for image/video browsing */ .c-visual-waterfall { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--c-visual-waterfall-min, 11.75rem), var(--c-visual-waterfall-max, 14.25rem))); justify-content: start; align-items: start; gap: var(--c-visual-waterfall-gap, 1.35rem); } .c-visual-waterfall__item { display: flex; flex-direction: column; border: 1px solid var(--c-border-warm); border-radius: var(--c-visual-waterfall-radius, 14px); background: var(--c-ivory); box-shadow: 0 1px 2px oklch(18% 0.01 80 / 0.07); padding: var(--c-visual-waterfall-padding, 0.45rem); transition: border-color var(--c-transition), box-shadow var(--c-transition), transform var(--c-transition); } .c-visual-waterfall__item:hover { border-color: var(--c-border-strong); box-shadow: 0 12px 28px oklch(18% 0.01 80 / 0.11); transform: translateY(-1px); } .c-visual-waterfall__media { display: block; position: relative; width: 100%; aspect-ratio: var(--c-visual-waterfall-media-ratio, 4 / 5); overflow: hidden; border-radius: var(--c-visual-waterfall-media-radius, 10px); background: var(--c-visual-waterfall-media-bg, oklch(18% 0.01 80)); } button.c-visual-waterfall__media { border: 0; padding: 0; color: inherit; font: inherit; text-align: inherit; cursor: pointer; } .c-visual-waterfall__media img, .c-visual-waterfall__media video { display: block; width: 100%; height: 100%; object-fit: cover; } .c-visual-waterfall__tags { position: absolute; left: 0.55rem; top: 0.55rem; z-index: 2; display: flex; max-width: calc(100% - 1.1rem); flex-wrap: wrap; gap: 0.35rem; } .c-visual-waterfall__tag { max-width: 100%; overflow: hidden; border-radius: var(--c-radius-full); background: oklch(18% 0.01 80 / 0.66); padding: 0.18rem 0.48rem; color: white; font-size: 0.68rem; font-weight: 750; line-height: 1.1rem; text-overflow: ellipsis; white-space: nowrap; } .c-visual-waterfall__body { padding: var(--c-visual-waterfall-body-padding, 0.65rem 0.2rem 0.18rem); } .c-visual-waterfall__title { overflow: hidden; color: var(--c-ink); font-size: var(--c-visual-waterfall-title-size, 0.875rem); font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .c-visual-waterfall__subtitle { margin-top: 0.25rem; overflow: hidden; color: var(--c-ink-faint); font-size: var(--c-visual-waterfall-subtitle-size, 0.75rem); line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } /* Generator layout — two-pane creation screens with left inputs and right results */ .c-generator-layout { display: grid; grid-template-columns: minmax(0, var(--c-generator-left)) minmax(0, var(--c-generator-right)); gap: var(--c-generator-gap); } .c-generator-column { display: flex; flex-direction: column; gap: var(--c-generator-gap); min-width: 0; } .c-generator-form { display: flex; flex-direction: column; gap: var(--c-generator-field-gap); } .c-generator-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .c-generator-choice-panel { border: 1px solid var(--c-border-warm); border-radius: var(--c-generator-panel-radius); background: var(--c-surface-muted); padding: var(--c-generator-panel-padding); } .c-generator-choice-panel__row { display: flex; flex-direction: column; gap: 1rem; } .c-generator-choice-panel__kicker, .c-generator-eyebrow { margin: 0; color: var(--c-ink-faint); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .c-generator-choice-panel__title { margin: 0.5rem 0 0; color: var(--c-ink); font-family: var(--c-font-serif); font-size: 1.12rem; font-weight: 500; line-height: 1.35; } .c-generator-choice-panel__meta { margin: 0.5rem 0 0; color: var(--c-ink-muted); font-size: 0.9rem; line-height: 1.6; } .c-generator-selection-card { margin-top: 1.25rem; border: 1px solid var(--c-border-warm); border-radius: var(--c-generator-inner-radius); background: var(--c-ivory); padding: 1rem; } .c-generator-status-card, .c-generator-soft-panel { border: 1px solid var(--c-border-warm); border-radius: var(--c-generator-inner-radius); background: var(--c-surface-muted); padding: var(--c-generator-status-padding); } .c-generator-status-card__label { margin: 0; color: var(--c-ink-faint); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; } .c-generator-status-card__value { margin: 0.5rem 0 0; color: var(--c-ink); font-size: 0.9rem; font-weight: 700; } .c-generator-empty { border: 1px dashed var(--c-border-strong); border-radius: var(--c-generator-inner-radius); background: var(--c-surface-muted); padding: 1.25rem 1rem; color: var(--c-ink-faint); font-size: 0.9rem; } .c-generator-history-toggle { appearance: none; width: 100%; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; } .c-generator-history-toggle__inner { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; } .c-generator-history-toggle__meta { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--c-ink-faint); font-size: 0.78rem; } .c-generator-history-card { display: block; border: 1px solid var(--c-border-warm); border-radius: var(--c-generator-control-radius); background: var(--c-ivory); padding: 0.75rem 1rem; transition: background var(--c-transition), border-color var(--c-transition), transform var(--c-transition); } .c-generator-history-card:hover { border-color: var(--c-border-strong); background: var(--c-surface-muted); transform: translateY(-1px); } .c-generator-status-line { display: flex; min-width: 0; align-items: center; gap: 0.5rem; } .c-generator-status-tag { display: inline-flex; align-items: center; border: 1px solid var(--c-border); border-radius: var(--c-radius-full); padding: 0.125rem 0.5rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0; line-height: 1.15; white-space: nowrap; } .c-generator-status-tag--pending { background: var(--c-warning-wash); border-color: var(--c-warning-border); color: var(--c-warning-text); } .c-generator-status-tag--succeeded { background: var(--c-success-wash); border-color: var(--c-success-border); color: var(--c-success-text); } .c-generator-status-tag--failed { background: var(--c-danger-wash); border-color: var(--c-danger-border); color: var(--c-danger-text); } .c-generator-loading-panel { margin-top: 1rem; } .c-generator-loading-card { border: 1px solid var(--c-border-warm); border-radius: var(--c-generator-inner-radius); background: var(--c-surface-muted); padding: 2rem 1.25rem; } .c-generator-loading-card__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; } .c-generator-spinner { width: 2.5rem; height: 2.5rem; border: 4px solid var(--c-border-warm); border-top-color: var(--c-generator-spinner-color, var(--c-primary)); border-radius: var(--c-radius-full); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .c-generator-loading-card__title { margin: 0; color: var(--c-ink); font-size: 0.9rem; font-weight: 700; } .c-generator-loading-card__text { margin: 0.25rem 0 0; color: var(--c-ink-faint); font-size: 0.9rem; } .c-generator-loading-card__warning { margin: 0.25rem 0 0; color: var(--c-warning-text); font-size: 0.78rem; } .c-generator-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; width: 100%; } .c-generator-mode-switch__item { display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.75rem; min-height: 4.75rem; border: 1px solid var(--c-border-warm); border-radius: var(--c-generator-control-radius); background: var(--c-ivory); color: var(--c-ink-muted); cursor: pointer; padding: 0.85rem 1rem; text-align: left; transition: background var(--c-transition), border-color var(--c-transition), box-shadow var(--c-transition), color var(--c-transition), transform var(--c-transition); } .c-generator-mode-switch__item:hover { border-color: var(--c-border-strong); background: var(--c-surface-muted); transform: translateY(-1px); } .c-generator-mode-switch__item.is-active { background: var(--c-brand-wash); border-color: var(--c-brand-border); color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-brand-ring); } .c-generator-mode-switch__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: var(--c-radius-md); background: var(--c-sand-soft); color: var(--c-ink-muted); } .c-generator-mode-switch__item.is-active .c-generator-mode-switch__icon { background: var(--c-brand-tint); color: var(--c-brand-deep); } .c-generator-mode-switch__content { display: flex; min-width: 0; flex-direction: column; gap: 0.2rem; } .c-generator-mode-switch__label { color: currentColor; font-size: 0.95rem; font-weight: 800; line-height: 1.2; } .c-generator-mode-switch__hint { color: var(--c-ink-faint); font-size: 0.78rem; font-weight: 500; line-height: 1.35; } .c-generator-mode-switch__item.is-active .c-generator-mode-switch__hint { color: var(--c-ink-muted); } @media (min-width: 640px) { .c-generator-choice-panel__row { flex-direction: row; align-items: flex-start; justify-content: space-between; } } /* Workflow layout — guided multi-stage production screens */ .c-workflow-shell { display: grid; grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr); gap: var(--c-generator-gap); align-items: start; } .c-workflow-rail { position: sticky; top: calc(var(--c-space-6) + 0.5rem); border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-lg); background: var(--c-surface-glass); box-shadow: var(--c-shadow-soft); padding: 1rem; } .c-workflow-rail__head { border-bottom: 1px solid var(--c-border); padding-bottom: 1rem; } .c-workflow-rail__head h2 { margin-top: 0.35rem; font-family: var(--c-font-serif); font-size: 1.15rem; line-height: 1.3; } .c-workflow-steps { position: relative; display: grid; gap: 0.35rem; margin: 1rem 0 0; padding: 0; list-style: none; } .c-workflow-steps::before { content: ""; position: absolute; left: 1.1rem; top: 1.4rem; bottom: 1.4rem; width: 1px; background: var(--c-border-warm); } .c-workflow-step { position: relative; z-index: 1; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.75rem; align-items: center; border: 1px solid transparent; border-radius: var(--c-radius-md); padding: 0.65rem; color: var(--c-ink-muted); } .c-workflow-step__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-md); background: var(--c-ivory); color: var(--c-ink-faint); } .c-workflow-step strong { display: block; color: currentColor; font-size: 0.9rem; line-height: 1.25; } .c-workflow-step small { display: block; margin-top: 0.15rem; color: var(--c-ink-faint); font-size: 0.74rem; line-height: 1.35; } .c-workflow-step.is-active { border-color: var(--c-brand-border); background: var(--c-brand-wash); color: var(--c-ink); } .c-workflow-step.is-active .c-workflow-step__icon { border-color: var(--c-brand-border); background: var(--c-brand-tint); color: var(--c-brand-deep); } .c-workflow-step.is-complete .c-workflow-step__icon { border-color: var(--c-success-border); background: var(--c-success-wash); color: var(--c-success-text); } .c-workflow-stage-stack { display: grid; gap: var(--c-generator-gap); min-width: 0; } .c-workflow-stage { border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-lg); background: var(--c-ivory); box-shadow: var(--c-shadow-soft); overflow: hidden; } .c-workflow-stage.is-active { border-color: var(--c-brand-border); box-shadow: var(--c-shadow-ring), var(--c-shadow-whisper); } .c-workflow-stage.is-locked { background: var(--c-surface-muted); } .c-workflow-stage__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--c-border); padding: 1.25rem; } .c-workflow-stage__head h2 { margin-top: 0.35rem; font-family: var(--c-font-serif); font-size: 1.35rem; line-height: 1.25; } .c-workflow-stage__head p:not(.c-generator-eyebrow) { margin-top: 0.45rem; color: var(--c-ink-muted); font-size: 0.92rem; } .c-workflow-stage__body { padding: 1.25rem; } .c-workflow-placeholder { display: grid; gap: 0.75rem; min-height: 8rem; border: 1px dashed var(--c-border-strong); border-radius: var(--c-generator-inner-radius); background: var(--c-surface-muted); padding: 1.25rem; } .c-workflow-placeholder .c-skeleton { max-width: 100%; } .c-workflow-placeholder .c-skeleton--title { width: 44%; } .c-workflow-placeholder .c-skeleton--text:nth-child(2) { width: 82%; } .c-workflow-placeholder .c-skeleton--text:nth-child(3) { width: 64%; } .c-workflow-product-summary { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; align-items: start; } .c-workflow-product-summary__media { display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; overflow: hidden; border: 1px solid var(--c-border-warm); border-radius: var(--c-generator-inner-radius); background: var(--c-surface-muted); color: var(--c-ink-faint); font-size: 0.75rem; } .c-workflow-check-row { display: flex; gap: 0.75rem; align-items: flex-start; border: 1px solid var(--c-border-warm); border-radius: var(--c-generator-inner-radius); background: var(--c-surface-muted); padding: 1rem; cursor: pointer; } .c-workflow-check-row input { margin-top: 0.25rem; } .c-workflow-check-row strong { display: block; color: var(--c-ink); font-size: 0.92rem; } .c-workflow-check-row small { display: block; margin-top: 0.25rem; color: var(--c-ink-muted); font-size: 0.82rem; line-height: 1.45; } .c-workflow-result-note { border: 1px solid var(--c-success-border); border-radius: var(--c-generator-inner-radius); background: var(--c-success-wash); padding: 1rem; } .c-workflow-picker-item { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; align-items: center; width: 100%; border: 1px solid var(--c-border-warm); border-radius: var(--c-generator-inner-radius); background: var(--c-ivory); padding: 0.8rem; text-align: left; transition: border-color var(--c-transition), background var(--c-transition), transform var(--c-transition); } .c-workflow-picker-item:hover { border-color: var(--c-border-strong); background: var(--c-surface-muted); transform: translateY(-1px); } .c-workflow-picker-item__media { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; overflow: hidden; border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-md); background: var(--c-surface-muted); color: var(--c-ink-faint); font-size: 0.7rem; } .c-workflow-picker-item__media img { width: 100%; height: 100%; object-fit: cover; } .c-workflow-branch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.25rem; } .c-workflow-branch-card { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--c-border-warm); border-radius: var(--c-generator-inner-radius); background: var(--c-ivory); padding: 1rem; } .c-workflow-branch-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .c-workflow-branch-check { display: inline-flex; min-width: 0; align-items: center; gap: 0.5rem; color: var(--c-ink); font-size: 0.86rem; font-weight: 800; line-height: 1.25; } .c-workflow-branch-identifier { max-width: 100%; overflow: hidden; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .c-workflow-branch-identifier:hover { color: var(--c-brand-deep); text-decoration: underline; text-underline-offset: 3px; } .c-workflow-branch-card h3 { margin-top: 0.85rem; font-family: var(--c-font-sans); font-size: 1rem; font-weight: 800; line-height: 1.35; } .c-workflow-branch-card p { display: -webkit-box; min-height: 4.8rem; margin-top: 0.55rem; overflow: hidden; color: var(--c-ink-muted); font-size: 0.86rem; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .c-workflow-cover-slot { display: flex; align-items: center; aspect-ratio: 4 / 5; justify-content: center; margin-top: 1rem; overflow: hidden; border: 1px dashed var(--c-border-strong); border-radius: var(--c-generator-inner-radius); background: var(--c-surface-muted); color: var(--c-ink-faint); font-size: 0.86rem; } .c-workflow-cover-slot.has-media { border-style: solid; background: var(--c-ink); } .c-workflow-cover-slot button { display: block; width: 100%; border: 0; background: transparent; cursor: zoom-in; padding: 0; } .c-workflow-cover-slot img { aspect-ratio: 4 / 5; width: 100%; height: 100%; object-fit: cover; } .c-workflow-url-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; } .c-workflow-url-control > button { min-height: 2.625rem; } .c-workflow-video-panel { margin-top: 1rem; border-top: 1px solid var(--c-border); padding-top: 1rem; } .c-workflow-video-panel.is-disabled { opacity: 0.62; } .c-workflow-script-form { gap: 1rem; } .c-workflow-script-form .c-textarea { min-height: 7rem; } .c-workflow-script-advanced:not(.hidden) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-top: 0.15rem; } .c-workflow-script-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; padding-top: 0.15rem; } .c-workflow-button-group { display: inline-flex; width: 100%; align-items: stretch; margin-top: 0.85rem; } .c-workflow-button-group button { flex: 1 1 0; min-height: 2.45rem; border-radius: 0; } .c-workflow-button-group button + button { margin-left: -1px; } .c-workflow-button-group button:first-child { border-bottom-left-radius: var(--c-radius-md); border-top-left-radius: var(--c-radius-md); } .c-workflow-button-group button:last-child { border-bottom-right-radius: var(--c-radius-md); border-top-right-radius: var(--c-radius-md); } .c-workflow-button-group button:hover { position: relative; z-index: 1; } .c-workflow-button-group button:focus-visible { position: relative; z-index: 2; } @media (max-width: 1180px) { .c-workflow-shell { grid-template-columns: 1fr; } .c-workflow-rail { position: static; } .c-workflow-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } .c-workflow-steps::before { display: none; } .c-workflow-step { grid-template-columns: 1fr; justify-items: center; text-align: center; } } @media (max-width: 900px) { .c-workflow-branch-grid { grid-template-columns: 1fr; } .c-workflow-script-advanced:not(.hidden) { grid-template-columns: 1fr; } .c-workflow-script-actions { align-items: stretch; flex-direction: column; } .c-workflow-script-actions button { width: 100%; } } @media (max-width: 640px) { .c-workflow-stage__head { flex-direction: column; } .c-workflow-steps { grid-template-columns: 1fr; } .c-workflow-step { grid-template-columns: 2.2rem minmax(0, 1fr); justify-items: start; text-align: left; } .c-workflow-product-summary { grid-template-columns: 1fr; } } /* Muted panel — less emphasis than card */ .c-panel { background: var(--c-surface-muted); border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-lg); padding: 1.25rem; } /* Accordion — stacked disclosure blocks for grouped secondary content */ .c-accordion { display: grid; gap: 0.65rem; } .c-accordion__item { border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-lg); background: var(--c-ivory); box-shadow: var(--c-shadow-ring); overflow: hidden; } .c-accordion__button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; border: 0; background: var(--c-surface-muted); color: var(--c-ink); cursor: pointer; font: inherit; font-weight: 750; padding: 1rem 1.1rem; text-align: left; transition: background var(--c-transition), color var(--c-transition); } .c-accordion__button:hover { background: var(--c-brand-wash); color: var(--c-brand-deep); } .c-accordion__icon { color: var(--c-ink-faint); transition: transform var(--c-transition), color var(--c-transition); } .c-accordion__item.is-open .c-accordion__icon { color: var(--c-brand-deep); transform: rotate(180deg); } .c-accordion__body { display: none; border-top: 1px solid var(--c-border); color: var(--c-ink-muted); padding: 1rem 1.1rem; } .c-accordion__item.is-open .c-accordion__body { display: block; } /* Dark hero card — use for prominent feature blocks */ .c-hero-dark { background: radial-gradient(circle at top right, oklch(67% 0.13 39 / 0.22), transparent 34%), radial-gradient(circle at bottom left, oklch(67% 0.09 249 / 0.12), transparent 36%), linear-gradient(180deg, oklch(18% 0.004 85) 0%, var(--c-ink) 100%); color: var(--c-ivory); border: 1px solid oklch(24% 0.004 85 / 0.8); border-radius: var(--c-radius-2xl); padding: 2.5rem; box-shadow: var(--c-shadow-lift); } .c-hero-dark h1, .c-hero-dark h2, .c-hero-dark h3, .c-hero-dark p, .c-hero-dark span { color: inherit; } .c-hero-dark p { color: var(--c-ink-silver); } .c-hero-dark .c-overline { background: oklch(98% 0.005 85 / 0.08); border-color: oklch(98% 0.005 85 / 0.14); color: var(--c-ink-silver); } /* Metric card — for dashboards */ .c-metric { background: linear-gradient(180deg, oklch(100% 0 0 / 0.9), oklch(98% 0.005 85 / 0.96)); border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-xl); padding: 1.25rem 1.5rem; box-shadow: var(--c-shadow-ring), var(--c-shadow-soft); } .c-metric__label { font-size: 0.82rem; color: var(--c-ink-faint); letter-spacing: 0.02em; margin: 0 0 0.4rem; text-transform: uppercase; font-weight: 600; } .c-metric__value { font-family: var(--c-font-sans); font-size: 1.875rem; font-weight: 600; color: var(--c-ink); line-height: 1.2; margin: 0; letter-spacing: -0.02em; } .c-metric__delta { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; font-size: 0.82rem; font-weight: 600; } .c-metric__delta--up { color: var(--c-success-deep); } .c-metric__delta--down { color: var(--c-danger); } .c-metric--default { background: linear-gradient(180deg, var(--c-default-wash), oklch(98% 0.005 85 / 0.96)); } .c-metric--primary, .c-metric--accent { background: linear-gradient(180deg, var(--c-primary-wash), oklch(98% 0.005 85 / 0.96)); } .c-metric--info { background: linear-gradient(180deg, var(--c-info-wash), oklch(98% 0.005 85 / 0.96)); } .c-metric--success { background: linear-gradient(180deg, var(--c-success-wash), oklch(98% 0.005 85 / 0.96)); } .c-metric--warning { background: linear-gradient(180deg, var(--c-warning-wash), oklch(98% 0.005 85 / 0.96)); } .c-metric--danger { background: linear-gradient(180deg, var(--c-danger-wash), oklch(98% 0.005 85 / 0.96)); } /* ========================================================================== 7. BUTTONS ========================================================================== */ .c-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.55rem 1rem; border-radius: var(--c-radius-md); border: 1px solid var(--c-default-border); background: var(--c-default); color: var(--c-default-text); font-family: var(--c-font-sans); font-size: 0.92rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: all var(--c-transition); box-shadow: var(--c-shadow-ring); white-space: nowrap; user-select: none; } .c-btn:hover { background: var(--c-default-deep); color: var(--c-ink); transform: translateY(-1px); box-shadow: var(--c-shadow-ring-strong), var(--c-shadow-soft); } .c-btn:active { transform: translateY(0); } .c-btn:focus-visible { outline: none; box-shadow: var(--c-shadow-ring), 0 0 0 3px var(--c-default-ring); } .c-btn:disabled, .c-btn.is-disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } /* Primary / brand */ .c-btn--primary { background: var(--c-primary); color: var(--c-ivory); border-color: var(--c-primary-border); } .c-btn--primary:hover { background: var(--c-primary-deep); color: var(--c-ivory); } .c-btn--primary:focus-visible { box-shadow: var(--c-shadow-focus-brand); } /* Default */ .c-btn--default { background: var(--c-default); color: var(--c-default-text); border-color: var(--c-default-border); } .c-btn--default:hover { background: var(--c-default-deep); color: var(--c-ink); } .c-btn--default:focus-visible { box-shadow: var(--c-shadow-ring), 0 0 0 3px var(--c-default-ring); } /* Dark */ .c-btn--dark { background: var(--c-ink); color: var(--c-ivory); border-color: oklch(24% 0.004 85 / 0.8); } .c-btn--dark:hover { background: var(--c-ink-2); color: var(--c-ivory); } /* Ghost / subtle */ .c-btn--ghost { background: transparent; color: var(--c-ink-muted); box-shadow: none; border-color: var(--c-border-warm); } .c-btn--ghost:hover { background: var(--c-surface-glass); color: var(--c-ink); box-shadow: var(--c-shadow-ring); } /* Outline */ .c-btn--outline { background: transparent; color: var(--c-ink-soft); border-color: var(--c-border-warm); box-shadow: none; } .c-btn--outline:hover { background: var(--c-ivory); border-color: var(--c-border-strong); color: var(--c-ink); } /* Semantic */ .c-btn--success { background: var(--c-success); color: var(--c-ivory); border-color: var(--c-success-border); } .c-btn--success:hover { background: var(--c-success-deep); color: var(--c-ivory); } .c-btn--info { background: var(--c-info); color: var(--c-ivory); border-color: var(--c-info-border); } .c-btn--info:hover { background: var(--c-info-deep); color: var(--c-ivory); } .c-btn--info:focus-visible { box-shadow: var(--c-shadow-ring), 0 0 0 3px var(--c-info-ring); } .c-btn--warning { background: var(--c-warning); color: var(--c-ivory); border-color: var(--c-warning-border); } .c-btn--warning:hover { background: var(--c-warning-deep); color: var(--c-ivory); } .c-btn--danger { background: var(--c-danger); color: var(--c-ivory); border-color: var(--c-danger-border); } .c-btn--danger:hover { background: var(--c-danger-deep); color: var(--c-ivory); } /* Sizes */ .c-btn--sm { min-height: 2rem; padding: 0.35rem 0.75rem; font-size: 0.84rem; border-radius: var(--c-radius); } .c-btn--lg { min-height: 3rem; padding: 0.8rem 1.4rem; font-size: 1rem; border-radius: var(--c-radius-md); } .c-btn--block { width: 100%; display: flex; } /* Icon button — square, for single icons */ .c-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: var(--c-radius); border: 1px solid var(--c-border-warm); background: var(--c-ivory); color: var(--c-ink-muted); cursor: pointer; transition: all var(--c-transition); box-shadow: var(--c-shadow-ring); } .c-btn-icon:hover { background: var(--c-white); color: var(--c-ink); border-color: var(--c-border-strong); } .c-btn-icon--sm { width: 2rem; height: 2rem; } .c-btn-icon--lg { width: 3rem; height: 3rem; } /* Button group — segmented control */ .c-btn-group { display: inline-flex; background: var(--c-sand); border-radius: var(--c-radius-md); padding: 3px; gap: 2px; box-shadow: var(--c-shadow-ring); } .c-btn-group > .c-btn-group__item { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 0.85rem; border-radius: calc(var(--c-radius-md) - 3px); background: transparent; border: 0; color: var(--c-ink-muted); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all var(--c-transition); white-space: nowrap; } .c-btn-group > .c-btn-group__item:hover { color: var(--c-ink); } .c-btn-group > .c-btn-group__item.is-active { background: var(--c-ivory); color: var(--c-ink); box-shadow: var(--c-shadow-ring-strong), var(--c-shadow-soft); } /* ========================================================================== 8. CHIPS / BADGES / TAGS ========================================================================== */ .c-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.7rem; border-radius: var(--c-radius-full); border: 1px solid var(--c-border-warm); background: var(--c-surface-glass); color: var(--c-ink-muted); font-size: 0.76rem; font-weight: 600; line-height: 1.2; white-space: nowrap; } .c-chip--default { background: var(--c-default-wash); border-color: var(--c-default-border); color: var(--c-default-text); } .c-chip--primary, .c-chip--accent { background: var(--c-primary-wash); border-color: var(--c-primary-border); color: var(--c-primary-text); } .c-chip--info { background: var(--c-info-wash); border-color: var(--c-info-border); color: var(--c-info-deep); } .c-chip--success { background: var(--c-success-wash); border-color: var(--c-success-border); color: var(--c-success-text); } .c-chip--warning { background: var(--c-warning-wash); border-color: var(--c-warning-border); color: var(--c-warning-text); } .c-chip--danger { background: var(--c-danger-wash); border-color: var(--c-danger-border); color: var(--c-danger-text); } .c-chip--dark { background: var(--c-ink); border-color: var(--c-ink-2); color: var(--c-ivory); } /* Dot indicator — precede chip text */ .c-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: var(--c-radius-full); background: var(--c-ink-faint); } .c-dot--success { background: var(--c-success); } .c-dot--warning { background: var(--c-warning); } .c-dot--danger { background: var(--c-danger); } .c-dot--brand { background: var(--c-brand); } .c-dot--primary { background: var(--c-primary); } .c-dot--default { background: var(--c-default-deep); } .c-dot--info { background: var(--c-info); } /* Tone scale — semantic color swatches with light / base / dark brightness */ .c-tone { --c-tone-light: var(--c-default-light); --c-tone-base: var(--c-default-base); --c-tone-dark: var(--c-default-dark); --c-tone-border: var(--c-default-border); --c-tone-text: var(--c-default-text); --c-tone-contrast: var(--c-ink); --c-tone-deep-contrast: var(--c-ink); display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; min-width: 4.2rem; border: 1px solid var(--c-tone-border); border-radius: var(--c-radius); background: var(--c-tone-light); color: var(--c-tone-text); font-size: 0.74rem; font-weight: 750; line-height: 1; text-align: center; } .c-tone--default { --c-tone-light: var(--c-default-light); --c-tone-base: var(--c-default-base); --c-tone-dark: var(--c-default-dark); --c-tone-border: var(--c-default-border); --c-tone-text: var(--c-default-text); --c-tone-contrast: var(--c-ink); --c-tone-deep-contrast: var(--c-ink); } .c-tone--primary { --c-tone-light: var(--c-primary-light); --c-tone-base: var(--c-primary-base); --c-tone-dark: var(--c-primary-dark); --c-tone-border: var(--c-primary-border); --c-tone-text: var(--c-primary-text); --c-tone-contrast: var(--c-ivory); --c-tone-deep-contrast: var(--c-ivory); } .c-tone--success { --c-tone-light: var(--c-success-light); --c-tone-base: var(--c-success-base); --c-tone-dark: var(--c-success-dark); --c-tone-border: var(--c-success-border); --c-tone-text: var(--c-success-text); --c-tone-contrast: var(--c-ivory); --c-tone-deep-contrast: var(--c-ivory); } .c-tone--info { --c-tone-light: var(--c-info-light); --c-tone-base: var(--c-info-base); --c-tone-dark: var(--c-info-dark); --c-tone-border: var(--c-info-border); --c-tone-text: var(--c-info-text); --c-tone-contrast: var(--c-ivory); --c-tone-deep-contrast: var(--c-ivory); } .c-tone--warning { --c-tone-light: var(--c-warning-light); --c-tone-base: var(--c-warning-base); --c-tone-dark: var(--c-warning-dark); --c-tone-border: var(--c-warning-border); --c-tone-text: var(--c-warning-text); --c-tone-contrast: var(--c-ink); --c-tone-deep-contrast: var(--c-ivory); } .c-tone--danger { --c-tone-light: var(--c-danger-light); --c-tone-base: var(--c-danger-base); --c-tone-dark: var(--c-danger-dark); --c-tone-border: var(--c-danger-border); --c-tone-text: var(--c-danger-text); --c-tone-contrast: var(--c-ivory); --c-tone-deep-contrast: var(--c-ivory); } .c-tone--light { background: var(--c-tone-light); color: var(--c-tone-text); } .c-tone--base { background: var(--c-tone-base); color: var(--c-tone-contrast); } .c-tone--dark { background: var(--c-tone-dark); border-color: var(--c-tone-dark); color: var(--c-tone-deep-contrast); } /* ========================================================================== 9. FORM ELEMENTS ========================================================================== */ /* Form row — label + control + help text */ .c-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; } .c-field:last-child { margin-bottom: 0; } .c-label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.86rem; font-weight: 600; color: var(--c-ink-soft); line-height: 1.3; } .c-label--required::after { content: "*"; color: var(--c-danger); margin-left: 0.15rem; } .c-help { font-size: 0.8rem; color: var(--c-ink-faint); line-height: 1.45; } .c-field.has-error .c-help { color: var(--c-danger); } /* Input / select / textarea — unified styling */ .c-input, .c-select, .c-textarea { display: block; width: 100%; min-height: 2.75rem; padding: 0.55rem 0.85rem; border-radius: var(--c-radius-md); border: 1px solid var(--c-border-warm); background: var(--c-ivory); color: var(--c-ink); font-family: var(--c-font-sans); font-size: 0.94rem; line-height: 1.4; box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.7); transition: border-color var(--c-transition), box-shadow var(--c-transition), background var(--c-transition); } .c-input::placeholder, .c-textarea::placeholder { color: var(--c-ink-faint); } .c-input:focus, .c-select:focus, .c-textarea:focus { outline: none; border-color: var(--c-info); background: var(--c-white); box-shadow: var(--c-shadow-focus), inset 0 1px 0 oklch(100% 0 0 / 0.7); } .c-input:disabled, .c-select:disabled, .c-textarea:disabled { background: var(--c-surface-muted); color: var(--c-ink-faint); cursor: not-allowed; } .c-field.has-error .c-input, .c-field.has-error .c-select, .c-field.has-error .c-textarea { border-color: var(--c-danger); box-shadow: 0 0 0 3px var(--c-danger-ring); } .c-textarea { min-height: 6rem; resize: vertical; line-height: 1.55; } /* Native select arrow */ .c-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2387867f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.5rem; appearance: none; } /* Sizes */ .c-input--sm, .c-select--sm { min-height: 2.25rem; padding: 0.35rem 0.7rem; font-size: 0.86rem; border-radius: var(--c-radius); } .c-input--lg, .c-select--lg { min-height: 3.2rem; padding: 0.8rem 1rem; font-size: 1rem; } /* Input with icon */ .c-input-wrap { position: relative; display: flex; align-items: center; } .c-input-wrap > .c-input { padding-left: 2.5rem; } .c-input-wrap > .c-input-wrap__icon { position: absolute; left: 0.85rem; color: var(--c-ink-faint); width: 1.1rem; height: 1.1rem; pointer-events: none; } .c-input-wrap--trailing > .c-input { padding-left: 0.85rem; padding-right: 2.5rem; } .c-input-wrap--trailing > .c-input-wrap__icon { left: auto; right: 0.85rem; } /* Checkbox / radio — custom styled */ .c-check { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; font-size: 0.92rem; color: var(--c-ink); user-select: none; } .c-check input[type="checkbox"], .c-check input[type="radio"] { appearance: none; width: 1.15rem; height: 1.15rem; border: 1px solid var(--c-border-strong); background: var(--c-ivory); border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--c-transition); position: relative; } .c-check input[type="radio"] { border-radius: var(--c-radius-full); } .c-check input[type="checkbox"]:checked { background: var(--c-brand); border-color: var(--c-brand); } .c-check input[type="checkbox"]:checked::after { content: ""; width: 0.38rem; height: 0.65rem; border: solid var(--c-ivory); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } .c-check input[type="radio"]:checked { background: var(--c-brand); border-color: var(--c-brand); } .c-check input[type="radio"]:checked::after { content: ""; width: 0.4rem; height: 0.4rem; border-radius: var(--c-radius-full); background: var(--c-ivory); } .c-check input:focus-visible { box-shadow: var(--c-shadow-focus); } /* Switch */ .c-switch { display: inline-flex; align-items: center; gap: 0.65rem; cursor: pointer; user-select: none; } .c-switch input { display: none; } .c-switch__track { width: 2.4rem; height: 1.35rem; background: var(--c-border-strong); border-radius: var(--c-radius-full); position: relative; transition: background var(--c-transition); flex-shrink: 0; } .c-switch__track::after { content: ""; position: absolute; left: 2px; top: 2px; width: 1.05rem; height: 1.05rem; background: var(--c-white); border-radius: var(--c-radius-full); box-shadow: 0 1px 3px oklch(12% 0.003 85 / 0.2); transition: transform var(--c-transition); } .c-switch input:checked + .c-switch__track { background: var(--c-brand); } .c-switch input:checked + .c-switch__track::after { transform: translateX(1.05rem); } /* Input group — prefix/suffix addons */ .c-input-group { display: flex; align-items: stretch; border-radius: var(--c-radius-md); box-shadow: inset 0 0 0 1px var(--c-border-warm); background: var(--c-ivory); overflow: hidden; } .c-input-group > .c-input { border: 0; background: transparent; box-shadow: none; border-radius: 0; } .c-input-group > .c-input:focus { box-shadow: none; } .c-input-group:focus-within { box-shadow: inset 0 0 0 1px var(--c-info), var(--c-shadow-focus); background: var(--c-white); } .c-input-group__addon { display: inline-flex; align-items: center; padding: 0 0.85rem; background: var(--c-surface-muted); color: var(--c-ink-muted); font-size: 0.88rem; white-space: nowrap; border-right: 1px solid var(--c-border); } .c-input-group__addon:last-child { border-right: 0; border-left: 1px solid var(--c-border); } /* ========================================================================== 10. TABLES (Native) — for static data. DataTable overrides below. ========================================================================== */ .c-table-wrap { background: var(--c-ivory); border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-xl); box-shadow: var(--c-shadow-ring), var(--c-shadow-soft); overflow: hidden; } .c-table-wrap__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--c-border); flex-wrap: wrap; } .c-table-wrap__title { font-family: var(--c-font-serif); font-size: 1.15rem; font-weight: 500; margin: 0; } .c-table-wrap__toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .c-table-wrap__scroll { overflow-x: auto; } .c-table-wrap__foot { padding: 0.9rem 1.5rem; border-top: 1px solid var(--c-border); background: var(--c-surface-muted); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.86rem; color: var(--c-ink-muted); } .c-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; color: var(--c-ink-soft); } .c-table thead th { padding: 0.95rem 1.25rem; text-align: left; background: var(--c-sand); color: var(--c-ink-muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--c-border-warm); white-space: nowrap; } .c-table tbody td { padding: 0.95rem 1.25rem; vertical-align: middle; border-bottom: 1px solid var(--c-border-soft); } .c-table tbody tr:last-child td { border-bottom: 0; } .c-table tbody tr:hover td { background: var(--c-sand-soft); } .c-table--compact thead th, .c-table--compact tbody td { padding: 0.6rem 0.9rem; } .c-table--striped tbody tr:nth-child(even) td { background: var(--c-surface-muted); } .c-table--fixed { table-layout: fixed; } .c-table--fixed th, .c-table--fixed td { overflow: hidden; } .c-table-cell-truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .c-table-cell-truncate--sm { max-width: 22ch; } .c-table-cell-truncate--md { max-width: 34ch; } .c-table-cell-truncate--lg { max-width: 48ch; } .c-table-actions { display: flex; gap: 0.5rem; justify-content: flex-start; white-space: nowrap; } .c-table--fixed th:last-child, .c-table--fixed td:last-child { padding-right: 2rem; } /* Empty state inside table wrap */ .c-empty { padding: 4rem 1.5rem; text-align: center; color: var(--c-ink-faint); } .c-empty__icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--c-radius-full); background: var(--c-brand-wash); color: var(--c-brand-deep); } .c-empty__title { font-family: var(--c-font-serif); font-size: 1.15rem; color: var(--c-ink); margin: 0 0 0.4rem; font-weight: 500; } .c-empty__text { max-width: 40ch; margin: 0 auto 1.25rem; color: var(--c-ink-muted); } /* ========================================================================== 11. MODAL / DIALOG Works with Bootstrap modal or custom open/close via .is-open. ========================================================================== */ .c-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: flex-start; justify-content: center; padding: 3rem 1rem; background: oklch(12% 0.003 85 / 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow-y: auto; } .c-modal.is-open { display: flex; } .c-modal__dialog { width: 100%; max-width: 560px; background: var(--c-ivory); border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-xl); box-shadow: var(--c-shadow-lift); overflow: hidden; animation: cModalIn 200ms cubic-bezier(0.2, 0.8, 0.2, 1); } .c-modal__dialog--lg { max-width: 800px; } .c-modal__dialog--xl { max-width: 1080px; } .c-modal__dialog--workflow { max-width: 860px; } .c-modal__dialog--workflow-sm { max-width: 720px; } .c-modal__dialog--workflow-preview { max-width: 760px; } @keyframes cModalIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .c-modal__head { padding: 1.25rem 1.5rem; background: radial-gradient(circle at top right, oklch(67% 0.13 39 / 0.1), transparent 40%), linear-gradient(180deg, oklch(100% 0 0 / 0.86), oklch(92% 0.008 85 / 0.8)); border-bottom: 1px solid var(--c-border-warm); display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .c-modal__title { font-family: var(--c-font-serif); font-size: 1.25rem; font-weight: 500; margin: 0; color: var(--c-ink); } .c-modal__subtitle { margin: 0.2rem 0 0; font-size: 0.86rem; color: var(--c-ink-muted); } .c-modal__close { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; border-radius: var(--c-radius); color: var(--c-ink-faint); cursor: pointer; transition: all var(--c-transition); flex-shrink: 0; } .c-modal__close:hover { background: var(--c-sand); color: var(--c-ink); } .c-modal__body { padding: 1.5rem; } .c-modal__foot { padding: 1rem 1.5rem; border-top: 1px solid var(--c-border); background: var(--c-surface-muted); display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; } .c-modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; } /* ========================================================================== 12. ALERTS / INLINE MESSAGES ========================================================================== */ .c-alert { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: var(--c-radius-lg); border: 1px solid var(--c-border-warm); background: var(--c-ivory); color: var(--c-ink-soft); font-size: 0.92rem; } .c-alert__icon { flex-shrink: 0; width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; } .c-alert__title { font-weight: 600; color: var(--c-ink); margin: 0 0 0.2rem; } .c-alert__body { line-height: 1.5; } .c-alert--default { background: var(--c-default-wash); border-color: var(--c-default-border); color: var(--c-default-text); } .c-alert--default .c-alert__title { color: var(--c-ink); } .c-alert--primary { background: var(--c-primary-wash); border-color: var(--c-primary-border); color: var(--c-primary-text); } .c-alert--primary .c-alert__title { color: var(--c-primary-text); } .c-alert--info { background: var(--c-info-wash); border-color: var(--c-info-border); color: var(--c-info-deep); } .c-alert--info .c-alert__title { color: var(--c-info-deep); } .c-alert--success { background: var(--c-success-wash); border-color: var(--c-success-border); color: var(--c-success-text); } .c-alert--success .c-alert__title { color: var(--c-success-text); } .c-alert--warning { background: var(--c-warning-wash); border-color: var(--c-warning-border); color: var(--c-warning-text); } .c-alert--warning .c-alert__title { color: var(--c-warning-text); } .c-alert--danger { background: var(--c-danger-wash); border-color: var(--c-danger-border); color: var(--c-danger-text); } .c-alert--danger .c-alert__title { color: var(--c-danger-text); } /* ========================================================================== 13. TABS ========================================================================== */ .c-tabs { display: flex; gap: 0.25rem; padding: 0.25rem; background: var(--c-surface-muted); border-radius: var(--c-radius-md); border: 1px solid var(--c-border); width: fit-content; } .c-tabs__item { padding: 0.5rem 0.95rem; border-radius: var(--c-radius); background: transparent; border: 0; color: var(--c-ink-muted); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all var(--c-transition); } .c-tabs__item:hover { color: var(--c-ink); } .c-tabs__item.is-active { background: var(--c-ivory); color: var(--c-ink); box-shadow: var(--c-shadow-ring), var(--c-shadow-soft); } /* Underline tabs — alternative style */ .c-tabs--underline { background: transparent; border: 0; border-bottom: 1px solid var(--c-border-warm); border-radius: 0; padding: 0; gap: 0.5rem; } .c-tabs--underline .c-tabs__item { background: transparent; border-radius: 0; padding: 0.75rem 0.25rem; margin-bottom: -1px; border-bottom: 2px solid transparent; box-shadow: none; } .c-tabs--underline .c-tabs__item.is-active { background: transparent; border-bottom-color: var(--c-brand); box-shadow: none; color: var(--c-brand-deep); } /* ========================================================================== 14. PAGINATION ========================================================================== */ .c-pagination { display: inline-flex; gap: 0.25rem; align-items: center; } .c-pagination__item { min-width: 2.25rem; height: 2.25rem; padding: 0 0.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--c-radius); border: 1px solid transparent; background: transparent; color: var(--c-ink-muted); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all var(--c-transition); text-decoration: none; } .c-pagination__item:hover { background: var(--c-surface-glass); border-color: var(--c-border-warm); color: var(--c-ink); } .c-pagination__item.is-active { background: var(--c-brand-wash); border-color: var(--c-brand-border); color: var(--c-brand-deep); } .c-pagination__item.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* ========================================================================== 15. TOAST / NOTIFICATION ========================================================================== */ .c-toast-host { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); z-index: 2147483647; display: flex; flex-direction: column; gap: 0.6rem; width: min(360px, calc(100vw - 2rem)); pointer-events: none; } .c-toast { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 1rem; background: var(--c-ivory); border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-md); box-shadow: var(--c-shadow-ring), var(--c-shadow-whisper); color: var(--c-ink-soft); font-size: 0.9rem; pointer-events: auto; animation: cToastIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes cToastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } .c-toast.is-leaving { animation: cToastOut 180ms cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes cToastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(16px); } } .c-toast__icon { flex-shrink: 0; width: 1.2rem; height: 1.2rem; margin-top: 0.1rem; } .c-toast__body { min-width: 0; } .c-toast__message { color: currentColor; line-height: 1.45; overflow-wrap: anywhere; } .c-toast--default { background: var(--c-default-light); border-color: var(--c-default-border); color: var(--c-default-text); } .c-toast--primary { background: var(--c-primary-light); border-color: var(--c-primary-border); color: var(--c-primary-text); } .c-toast--success { background: var(--c-success-light); border-color: var(--c-success-border); color: var(--c-success-text); } .c-toast--info { background: var(--c-info-light); border-color: var(--c-info-border); color: var(--c-info-text); } .c-toast--warning { background: var(--c-warning-light); border-color: var(--c-warning-border); color: var(--c-warning-text); } .c-toast--danger { background: var(--c-danger-light); border-color: var(--c-danger-border); color: var(--c-danger-text); } .c-toast--default .c-toast__icon, .c-toast--default strong, .c-toast--default .c-faint { color: var(--c-default-text) !important; } .c-toast--primary .c-toast__icon, .c-toast--primary strong, .c-toast--primary .c-faint { color: var(--c-primary-text) !important; } .c-toast--success .c-toast__icon, .c-toast--success strong, .c-toast--success .c-faint, .c-toast--info .c-toast__icon, .c-toast--info strong, .c-toast--info .c-faint, .c-toast--warning .c-toast__icon, .c-toast--warning strong, .c-toast--warning .c-faint, .c-toast--danger .c-toast__icon, .c-toast--danger strong, .c-toast--danger .c-faint { color: currentColor !important; } @media (prefers-reduced-motion: reduce) { .c-toast, .c-toast.is-leaving { animation: none; } } /* ========================================================================== 16. LOADING / SPINNER ========================================================================== */ .c-spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid var(--c-brand-border); border-top-color: var(--c-brand); border-radius: var(--c-radius-full); animation: cSpin 0.8s linear infinite; } .c-spinner--lg { width: 2.25rem; height: 2.25rem; border-width: 3px; } .c-spinner--sm { width: 0.95rem; height: 0.95rem; border-width: 2px; } @keyframes cSpin { to { transform: rotate(360deg); } } .c-loading-overlay { position: fixed; inset: 0; z-index: 1500; display: none; align-items: center; justify-content: center; background: oklch(12% 0.003 85 / 0.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .c-loading-overlay.is-open { display: flex; } .c-skeleton { display: block; background: linear-gradient( 90deg, oklch(92% 0.008 85 / 0.62) 0%, oklch(98% 0.005 85 / 0.82) 50%, oklch(92% 0.008 85 / 0.62) 100% ); background-size: 200% 100%; border-radius: var(--c-radius); animation: cSkeleton 1.4s ease-in-out infinite; } .c-skeleton--text { height: 1em; } .c-skeleton--title { height: 1.5em; } @keyframes cSkeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ========================================================================== 17. AVATAR ========================================================================== */ .c-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--c-radius-full); background: var(--c-sand); color: var(--c-ink-soft); font-weight: 600; font-size: 0.9rem; overflow: hidden; flex-shrink: 0; border: 1px solid var(--c-border-warm); } .c-avatar img { width: 100%; height: 100%; object-fit: cover; } .c-avatar--sm { width: 2rem; height: 2rem; font-size: 0.75rem; } .c-avatar--lg { width: 3.25rem; height: 3.25rem; font-size: 1.05rem; } .c-avatar--brand { background: var(--c-brand-wash); color: var(--c-brand-deep); } .c-avatar-group { display: inline-flex; } .c-avatar-group > .c-avatar { margin-left: -0.5rem; border: 2px solid var(--c-parchment); } .c-avatar-group > .c-avatar:first-child { margin-left: 0; } /* ========================================================================== 18. DROPDOWN MENU ========================================================================== */ .c-dropdown { position: relative; display: inline-block; } .c-dropdown__menu { position: absolute; top: calc(100% + 0.4rem); right: 0; min-width: 200px; background: var(--c-ivory); border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-md); box-shadow: var(--c-shadow-ring), var(--c-shadow-whisper); padding: 0.35rem; z-index: 500; display: none; animation: cDropdownIn 160ms cubic-bezier(0.2, 0.8, 0.2, 1); } .c-dropdown.is-open > .c-dropdown__menu { display: block; } @keyframes cDropdownIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .c-dropdown__item { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.75rem; border-radius: var(--c-radius); color: var(--c-ink-soft); font-size: 0.9rem; text-decoration: none; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; transition: all var(--c-transition); } .c-dropdown__item:hover { background: var(--c-brand-wash); color: var(--c-brand-deep); } .c-dropdown__item--danger:hover { background: var(--c-danger-wash); color: var(--c-danger-deep); } .c-dropdown__divider { height: 1px; background: var(--c-border); margin: 0.35rem 0; } .c-dropdown__header { padding: 0.45rem 0.75rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink-faint); font-weight: 600; } /* ========================================================================== 19. TIMELINE ========================================================================== */ .c-timeline { position: relative; padding-left: 1.5rem; } .c-timeline::before { content: ""; position: absolute; left: 0.45rem; top: 0.4rem; bottom: 0.4rem; width: 1px; background: var(--c-border-warm); } .c-timeline__item { position: relative; padding-bottom: 1.5rem; } .c-timeline__item::before { content: ""; position: absolute; left: -1.5rem; top: 0.35rem; width: 0.95rem; height: 0.95rem; border-radius: var(--c-radius-full); background: var(--c-ivory); border: 2px solid var(--c-border-strong); } .c-timeline__item--brand::before { border-color: var(--c-brand); background: var(--c-brand-wash); } .c-timeline__item--success::before { border-color: var(--c-success); background: var(--c-success-wash); } .c-timeline__item--danger::before { border-color: var(--c-danger); background: var(--c-danger-wash); } .c-timeline__meta { font-size: 0.78rem; color: var(--c-ink-faint); letter-spacing: 0.02em; margin-bottom: 0.2rem; } .c-timeline__title { font-size: 0.95rem; font-weight: 600; color: var(--c-ink); margin: 0 0 0.2rem; } .c-timeline__text { color: var(--c-ink-muted); font-size: 0.88rem; margin: 0; } /* ========================================================================== 20. PROGRESS BAR ========================================================================== */ .c-progress { height: 0.5rem; background: var(--c-surface-muted); border-radius: var(--c-radius-full); overflow: hidden; } .c-progress__bar { height: 100%; background: var(--c-brand); border-radius: inherit; transition: width 320ms ease; } .c-progress--sm { height: 0.3rem; } .c-progress--lg { height: 0.75rem; } .c-progress__bar--info { background: var(--c-info); } .c-progress__bar--success { background: var(--c-success); } .c-progress__bar--warning { background: var(--c-warning); } .c-progress__bar--danger { background: var(--c-danger); } /* ========================================================================== 21. KBD ========================================================================== */ .c-kbd { display: inline-flex; align-items: center; min-width: 1.5rem; padding: 0.1rem 0.45rem; font-family: var(--c-font-mono); font-size: 0.8rem; color: var(--c-ink-soft); background: var(--c-ivory); border: 1px solid var(--c-border-warm); border-bottom-width: 2px; border-radius: var(--c-radius); line-height: 1.3; } /* ========================================================================== 22. THIRD-PARTY OVERRIDES DataTable, Select2, Dropzone, Flatpickr, Toastr ========================================================================== */ /* ----- DataTables.net ----- */ table.dataTable { border-collapse: collapse !important; width: 100% !important; color: var(--c-ink-soft) !important; background: transparent !important; } table.dataTable thead th { padding: 0.95rem 1.25rem !important; background: var(--c-sand) !important; color: var(--c-ink-muted) !important; font-size: 0.78rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; border-bottom: 1px solid var(--c-border-warm) !important; border-top: 0 !important; text-align: left !important; } table.dataTable tbody td { padding: 0.95rem 1.25rem !important; color: var(--c-ink-soft) !important; border-bottom: 1px solid var(--c-border-soft) !important; vertical-align: middle !important; background: transparent !important; } table.dataTable tbody tr:hover td, table.dataTable tbody tr.odd:hover td, table.dataTable tbody tr.even:hover td { background: var(--c-sand-soft) !important; } table.dataTable tbody tr.selected td { background: var(--c-brand-wash) !important; color: var(--c-brand-deep) !important; } /* Sort indicators */ table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { cursor: pointer; position: relative; } table.dataTable thead .sorting::before, table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after { opacity: 0.4 !important; color: var(--c-ink-muted) !important; } /* DataTables wrapper controls */ .dataTables_wrapper { padding: 0 !important; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { color: var(--c-ink-muted) !important; font-size: 0.86rem !important; padding: 0.75rem 1.25rem !important; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { min-height: 2.25rem !important; padding: 0.4rem 0.75rem !important; margin-left: 0.5rem !important; border: 1px solid var(--c-border-warm) !important; border-radius: var(--c-radius) !important; background: var(--c-ivory) !important; color: var(--c-ink) !important; font-size: 0.88rem !important; box-shadow: none !important; } .dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus { outline: none !important; border-color: var(--c-info) !important; box-shadow: var(--c-shadow-focus) !important; } /* Pagination buttons */ .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 2.25rem !important; height: 2.25rem !important; padding: 0 0.7rem !important; margin: 0 2px !important; border-radius: var(--c-radius) !important; border: 1px solid transparent !important; background: transparent !important; color: var(--c-ink-muted) !important; font-size: 0.88rem !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) { background: var(--c-surface-glass) !important; border-color: var(--c-border-warm) !important; color: var(--c-ink) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--c-brand-wash) !important; border-color: var(--c-brand-border) !important; color: var(--c-brand-deep) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.4 !important; cursor: not-allowed !important; } /* When DataTable is wrapped in .c-table-wrap, remove extra padding */ .c-table-wrap table.dataTable { margin: 0 !important; } .c-table-wrap table.dataTable.c-table--fixed { table-layout: fixed; } .c-table-wrap .dataTables_wrapper .dataTables_length, .c-table-wrap .dataTables_wrapper .dataTables_filter { padding: 1rem 1.25rem 0.5rem !important; } .c-table-wrap .dataTables_wrapper .dataTables_info, .c-table-wrap .dataTables_wrapper .dataTables_paginate { padding: 0.75rem 1.25rem !important; } /* ----- Select2 ----- */ .select2-container { width: 100% !important; } .select2-container .select2-selection--single, .select2-container .select2-selection--multiple { min-height: 2.75rem !important; border: 1px solid var(--c-border-warm) !important; border-radius: var(--c-radius-md) !important; background: var(--c-ivory) !important; box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.7) !important; padding: 0.35rem 0.85rem !important; transition: border-color var(--c-transition), box-shadow var(--c-transition), background var(--c-transition) !important; } .select2-container--default .select2-selection--single { display: flex !important; align-items: center !important; padding: 0 2.5rem 0 0.85rem !important; } .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--multiple .select2-selection__rendered { display: block !important; width: 100% !important; color: var(--c-ink) !important; line-height: 1.4 !important; text-align: left !important; padding: 0 !important; margin: 0 !important; font-size: 0.94rem !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .select2-container--default .select2-selection--single .select2-selection__placeholder, .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: var(--c-ink-faint) !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; right: 10px !important; top: 0 !important; display: flex !important; align-items: center !important; width: 20px !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--c-ink-faint) transparent transparent transparent !important; } .select2-container--default .select2-selection--single .select2-selection__clear { position: absolute !important; right: 1.8rem !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; color: var(--c-ink-faint) !important; } /* Focus */ .select2-container--open .select2-selection--single, .select2-container--open .select2-selection--multiple, .select2-container--focus .select2-selection--multiple { border-color: var(--c-info) !important; background: var(--c-white) !important; box-shadow: var(--c-shadow-focus), inset 0 1px 0 oklch(100% 0 0 / 0.7) !important; } /* Disabled */ .select2-container--default.select2-container--disabled .select2-selection--single, .select2-container--default.select2-container--disabled .select2-selection--multiple { background: var(--c-surface-muted) !important; color: var(--c-ink-faint) !important; cursor: not-allowed !important; } /* Dropdown */ .select2-dropdown { border: 1px solid var(--c-border-warm) !important; border-radius: var(--c-radius-md) !important; background: var(--c-ivory) !important; box-shadow: var(--c-shadow-ring), var(--c-shadow-whisper) !important; overflow: hidden !important; margin-top: 0.4rem !important; } .select2-search--dropdown .select2-search__field { border: 1px solid var(--c-border-warm) !important; border-radius: var(--c-radius) !important; padding: 0.55rem 0.75rem !important; font-size: 0.9rem !important; background: var(--c-surface-tint) !important; } .select2-search--dropdown .select2-search__field:focus { outline: none !important; border-color: var(--c-info) !important; box-shadow: var(--c-shadow-focus) !important; } .select2-results__option { padding: 0.62rem 0.9rem !important; font-size: 0.9rem !important; color: var(--c-ink-soft) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--c-brand-wash) !important; color: var(--c-brand-deep) !important; } .select2-container--default .select2-results__option[aria-selected=true] { background: var(--c-brand) !important; color: var(--c-ivory) !important; } /* Multi-select tags */ .select2-container--default .select2-selection--multiple { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 0.3rem !important; padding: 0.3rem 2rem 0.3rem 0.6rem !important; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 0.3rem !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice { display: inline-flex !important; align-items: center !important; gap: 0.3rem !important; margin: 0 !important; padding: 0.25rem 0.55rem !important; border-radius: var(--c-radius-full) !important; border: 1px solid var(--c-brand-border) !important; background: var(--c-brand-wash) !important; color: var(--c-brand-deep) !important; font-size: 0.76rem !important; font-weight: 600 !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { position: static !important; margin: 0 !important; border: none !important; background: transparent !important; color: var(--c-brand-deep) !important; font-size: 0.95rem !important; line-height: 1 !important; padding: 0 !important; } .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { margin: 0 !important; min-height: 1.5rem !important; font-size: 0.9rem !important; color: var(--c-ink) !important; padding: 0 !important; } /* ----- Dropzone.js ----- */ .dropzone, .c-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 12rem; padding: 2rem 1.5rem; background: var(--c-surface-muted); border: 2px dashed var(--c-border-strong) !important; border-radius: var(--c-radius-xl) !important; transition: border-color var(--c-transition), background var(--c-transition); cursor: pointer; text-align: center; } .dropzone:hover, .c-dropzone:hover, .dropzone.dz-drag-hover, .c-dropzone.is-drag-over { border-color: var(--c-brand) !important; background: var(--c-brand-wash); } .dropzone .dz-message, .c-dropzone__message { font-family: var(--c-font-serif); font-size: 1.15rem; font-weight: 500; color: var(--c-ink); margin: 0.75rem 0 0.25rem; } .c-dropzone__hint { font-size: 0.86rem; color: var(--c-ink-faint); margin: 0; } .c-dropzone__icon { width: 2.5rem; height: 2.5rem; color: var(--c-brand); margin-bottom: 0.25rem; } /* Dropzone preview */ .dropzone .dz-preview { min-height: 120px !important; margin: 0.5rem !important; border-radius: var(--c-radius-md) !important; overflow: hidden; background: var(--c-ivory) !important; border: 1px solid var(--c-border-warm) !important; box-shadow: var(--c-shadow-ring) !important; } .dropzone .dz-preview .dz-image { border-radius: var(--c-radius-md) !important; } .dropzone .dz-preview .dz-progress { height: 0.35rem !important; background: var(--c-surface-muted) !important; border-radius: var(--c-radius-full) !important; overflow: hidden; border: 0 !important; } .dropzone .dz-preview .dz-progress .dz-upload { background: var(--c-brand) !important; } .dropzone .dz-preview .dz-error-message { background: var(--c-danger) !important; border-radius: var(--c-radius) !important; } /* ----- Flatpickr ----- */ .flatpickr-calendar { background: var(--c-ivory) !important; border: 1px solid var(--c-border-warm) !important; border-radius: var(--c-radius-md) !important; box-shadow: var(--c-shadow-ring), var(--c-shadow-whisper) !important; font-family: var(--c-font-sans) !important; } .flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--c-border-warm) !important; } .flatpickr-months .flatpickr-month { color: var(--c-ink) !important; fill: var(--c-ink) !important; } .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { color: var(--c-ink) !important; font-weight: 600 !important; } .flatpickr-weekday { color: var(--c-ink-faint) !important; font-weight: 600 !important; font-size: 0.78rem !important; } .flatpickr-day { color: var(--c-ink-soft) !important; border-radius: var(--c-radius) !important; border: 0 !important; } .flatpickr-day:hover { background: var(--c-sand) !important; color: var(--c-ink) !important; } .flatpickr-day.today { border: 1px solid var(--c-brand) !important; color: var(--c-brand-deep) !important; font-weight: 600 !important; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--c-brand) !important; border-color: var(--c-brand) !important; color: var(--c-ivory) !important; } .flatpickr-day.inRange { background: var(--c-brand-wash) !important; color: var(--c-brand-deep) !important; box-shadow: -5px 0 0 var(--c-brand-wash), 5px 0 0 var(--c-brand-wash) !important; } /* ----- Toastr ----- */ #toast-container > .toast { background-color: var(--c-ivory) !important; border: 1px solid var(--c-border-warm) !important; border-radius: var(--c-radius-md) !important; box-shadow: var(--c-shadow-ring), var(--c-shadow-whisper) !important; color: var(--c-ink-soft) !important; opacity: 1 !important; background-image: none !important; padding: 0.85rem 1rem !important; } #toast-container > .toast-success { border-left: 4px solid var(--c-success) !important; } #toast-container > .toast-warning { border-left: 4px solid var(--c-warning) !important; } #toast-container > .toast-error { border-left: 4px solid var(--c-danger) !important; } #toast-container > .toast-info { border-left: 4px solid var(--c-info) !important; } #toast-container > .toast .toast-title { color: var(--c-ink) !important; font-weight: 600 !important; } #toast-container > .toast .toast-message { color: var(--c-ink-muted) !important; } /* ========================================================================== 23. TAILWIND COMPATIBILITY LAYER Remaps common Tailwind color classes to Claude's warm palette so that AI-generated code using Tailwind defaults still looks on-brand. ========================================================================== */ /* Grays → warm grays */ .text-gray-900, .text-neutral-900, .text-slate-900, .text-zinc-900, .text-stone-900 { color: var(--c-ink) !important; } .text-gray-800, .text-gray-700, .text-neutral-700, .text-slate-700, .text-stone-800, .text-stone-700 { color: var(--c-ink-soft) !important; } .text-gray-600, .text-gray-500, .text-neutral-500, .text-slate-500, .text-stone-600, .text-stone-500 { color: var(--c-ink-muted) !important; } .text-gray-400, .text-neutral-400, .text-slate-400, .text-stone-400, .text-stone-300 { color: var(--c-ink-faint) !important; } .bg-gray-50, .bg-neutral-50, .bg-slate-50, .bg-stone-50, .bg-stone-50\/70 { background-color: var(--c-surface-muted) !important; } .bg-gray-100, .bg-neutral-100, .bg-slate-100, .bg-stone-100 { background-color: var(--c-sand) !important; } .bg-gray-900, .bg-neutral-900, .bg-slate-900, .bg-stone-900 { background-color: var(--c-ink) !important; } .bg-white { background-color: var(--c-white) !important; } .border-gray-100, .border-gray-200, .border-gray-300, .border-neutral-100, .border-neutral-200, .border-neutral-300, .border-slate-100, .border-slate-200, .border-stone-100, .border-stone-200, .border-stone-300, .border-stone-400 { border-color: var(--c-border-warm) !important; } /* Saturated brand-ish colors → terracotta */ .text-blue-500, .text-blue-600, .text-blue-700, .text-indigo-500, .text-indigo-600, .text-purple-500, .text-purple-600, .text-pink-500, .text-pink-600, .text-rose-500, .text-rose-600 { color: var(--c-brand-deep) !important; } .bg-blue-50, .bg-blue-100, .bg-indigo-50, .bg-indigo-100, .bg-purple-50, .bg-purple-100, .bg-pink-50, .bg-pink-100, .bg-rose-50 { background-color: var(--c-brand-wash) !important; } .border-blue-100, .border-blue-200, .border-blue-500, .border-indigo-100, .border-indigo-500, .border-purple-100, .border-pink-100, .border-pink-500, .border-rose-100, .border-rose-200, .border-rose-500 { border-color: var(--c-brand-border) !important; } /* Green family → muted olive */ .text-green-500, .text-green-600, .text-green-700, .text-emerald-500, .text-emerald-600, .text-emerald-700, .text-teal-500, .text-teal-600 { color: var(--c-success-deep) !important; } .bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100, .bg-teal-50 { background-color: var(--c-success-wash) !important; } .border-green-100, .border-green-200, .border-emerald-100, .border-emerald-200, .border-teal-100, .border-teal-200 { border-color: var(--c-success-border) !important; } /* Amber/yellow/orange → ochre */ .text-amber-500, .text-amber-600, .text-amber-700, .text-yellow-600, .text-yellow-700, .text-orange-500, .text-orange-600 { color: var(--c-warning-deep) !important; } .bg-amber-50, .bg-amber-100, .bg-yellow-50, .bg-yellow-100, .bg-orange-50, .bg-orange-100 { background-color: var(--c-warning-wash) !important; } .border-amber-100, .border-amber-200, .border-yellow-100, .border-yellow-200, .border-orange-100, .border-orange-200 { border-color: var(--c-warning-border) !important; } /* Red family → crimson */ .text-red-500, .text-red-600, .text-red-700 { color: var(--c-danger-deep) !important; } .bg-red-50, .bg-red-100 { background-color: var(--c-danger-wash) !important; } .border-red-100, .border-red-200 { border-color: var(--c-danger-border) !important; } /* Repo-local arbitrary utilities that should stay on the shared palette */ .border-t-\[\#688e78\] { border-top-color: var(--c-success) !important; } /* Shadow classes mapped to warm shadows */ .shadow-sm, .shadow { box-shadow: var(--c-shadow-ring), var(--c-shadow-soft) !important; } .shadow-md, .shadow-lg { box-shadow: var(--c-shadow-ring), var(--c-shadow-whisper) !important; } .shadow-xl, .shadow-2xl { box-shadow: var(--c-shadow-ring), var(--c-shadow-lift) !important; } /* ========================================================================== 24. RESPONSIVE ========================================================================== */ @media (max-width: 960px) { h1 { font-size: 2rem; } h2 { font-size: 1.65rem; } .c-page-header__title { font-size: 1.65rem; } .c-hero-dark { padding: 1.75rem; border-radius: var(--c-radius-xl); } .c-main { padding: 1.25rem 1rem 2rem; } .c-nav__inner { padding: 0.75rem 1rem; } .c-workbench-shell, .c-workbench-shell.is-sidebar-collapsed { grid-template-columns: 1fr; } .c-workbench-sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--c-border-dark); } .c-workbench-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding-bottom: 0.75rem; } .c-workbench-account { display: none; } .c-workbench-sidebar__resizer { display: none; } .c-workbench-shell.is-sidebar-collapsed .c-workbench-brand__mark { display: flex; } .c-workbench-shell.is-sidebar-collapsed .c-workbench-nav__label, .c-workbench-shell.is-sidebar-collapsed .c-workbench-nav__item span:not(.hero-icon) { display: inline; } .c-workbench-shell.is-sidebar-collapsed .c-workbench-nav__item { justify-content: flex-start; gap: 0.65rem; padding-left: 0.6rem; padding-right: 0.6rem; } .c-workbench-content { padding: 1.25rem 1rem 2rem; } .c-admin-page-header { align-items: flex-start; flex-direction: column; } .c-admin-page-header__actions { justify-content: flex-start; } .c-workbench-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-generator-layout { grid-template-columns: 1fr; } .c-visual-waterfall { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { h1 { font-size: 1.65rem; } .c-page-header { flex-direction: column; align-items: flex-start; } .c-card__head, .c-table-wrap__head, .c-modal__foot, .c-card__foot { flex-direction: column; align-items: stretch; } .c-modal__foot .c-btn, .c-card__foot .c-btn { width: 100%; } .c-generator-actions .c-btn { width: 100%; } .c-generator-choice-panel__row { align-items: stretch; } .c-generator-mode-switch { grid-template-columns: 1fr; } .c-workbench-nav { grid-template-columns: 1fr; } .c-workbench-welcome { min-height: auto; place-items: start; } .c-workbench-welcome__inner { text-align: left; } .c-workbench-welcome__title { font-size: 1.85rem; } .c-workbench-quick-grid { grid-template-columns: 1fr; } } /* ========================================================================== 25. UTILITY CLASSES (only the ones not well-covered by Tailwind) ========================================================================== */ .c-serif { font-family: var(--c-font-serif) !important; } .c-sans { font-family: var(--c-font-sans) !important; } .c-mono { font-family: var(--c-font-mono) !important; } .c-muted { color: var(--c-ink-muted) !important; } .c-faint { color: var(--c-ink-faint) !important; } .c-brand-text { color: var(--c-brand-deep) !important; } .c-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: inline-block; } /* Visually hidden but accessible */ .c-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== 26. ICON SYSTEM ========================================================================== */ /* Base icon wrapper */ .c-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Icon sizes */ .c-icon--xs { width: 12px; height: 12px; } .c-icon--sm { width: 16px; height: 16px; } .c-icon--md { width: 20px; height: 20px; } .c-icon--lg { width: 24px; height: 24px; } .c-icon--xl { width: 32px; height: 32px; } .c-icon--2xl { width: 48px; height: 48px; } /* Icon colors */ .c-icon--brand { color: var(--c-brand); } .c-icon--muted { color: var(--c-ink-muted); } .c-icon--faint { color: var(--c-ink-faint); } .c-icon--success { color: var(--c-success); } .c-icon--info { color: var(--c-info); } .c-icon--warning { color: var(--c-warning); } .c-icon--danger { color: var(--c-danger); } /* Icon animations */ .c-icon--spin { animation: c-icon-spin 1s linear infinite; } .c-icon--pulse { animation: c-icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .c-icon--bounce { animation: c-icon-bounce 0.6s ease-out; } @keyframes c-icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes c-icon-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes c-icon-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Icon with text */ .c-icon--left { margin-right: 0.5em; } .c-icon--right { margin-left: 0.5em; } /* Icon button helper - makes icon behave like a button */ .c-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; background: transparent; border-radius: var(--c-radius); cursor: pointer; color: var(--c-ink-muted); transition: all 0.15s ease; } .c-icon-btn:hover { background: var(--c-sand); color: var(--c-ink); } .c-icon-btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; } .c-icon-btn:active { transform: scale(0.95); } /* Icon sizes for icon buttons */ .c-icon-btn.c-icon--xs { width: 1.5rem; height: 1.5rem; } .c-icon-btn.c-icon--sm { width: 1.75rem; height: 1.75rem; } .c-icon-btn.c-icon--lg { width: 2.5rem; height: 2.5rem; } .c-icon-btn.c-icon--xl { width: 3rem; height: 3rem; } /* Icon stack for badge notifications */ .c-icon-stack { position: relative; display: inline-flex; } .c-icon-stack__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; color: white; background: var(--c-danger); border-radius: 9px; } .c-icon-stack__dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background: var(--c-danger); border: 2px solid white; border-radius: 50%; } /* Icon list for navigation or menu items */ .c-icon-list { list-style: none; padding: 0; margin: 0; } .c-icon-list__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--c-radius); color: var(--c-ink); text-decoration: none; transition: all 0.15s ease; } .c-icon-list__item:hover { background: var(--c-sand); } .c-icon-list__item.is-active { background: var(--c-brand-wash); color: var(--c-brand-deep); font-weight: 500; } .c-icon-list__label { flex: 1; } /* Icon showcase grid */ .c-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1rem; } .c-icon-grid__item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; background: var(--c-ivory); border: 1px solid var(--c-border); border-radius: var(--c-radius); text-align: center; transition: all 0.15s ease; } .c-icon-grid__item:hover { border-color: var(--c-brand); box-shadow: var(--c-shadow-soft); } .c-icon-grid__name { font-size: 11px; font-family: var(--c-font-mono); color: var(--c-ink-faint); text-transform: lowercase; } /* Icon usage with buttons (automatic icon sizing) */ .c-btn .c-icon { width: 1em; height: 1em; } .c-icon-inline { display: inline-flex; align-items: center; justify-content: center; margin-right: 0.45em; vertical-align: -0.14em; } .c-loading-state { min-height: 220px; display: flex; align-items: center; justify-content: center; } .c-loading-state__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; } /* ========================================================================== TCS PROJECT ALIASES These aliases keep existing page structure visually stable while the runtime source of truth stays inside Claude UI. There is no second stylesheet in production. ========================================================================== */ .app-page-width { width: 100%; max-width: var(--c-container); margin-left: auto; margin-right: auto; } .site-main { flex: 1; padding: 2rem 1.5rem 3rem; } .site-main__inner { max-width: var(--c-container-wide); margin: 0 auto; } .app-overline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem; border-radius: var(--c-radius-full); background: var(--c-brand-wash); border: 1px solid var(--c-brand-border); color: var(--c-brand-deep); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; } .app-dark-hero { background: radial-gradient(circle at top right, oklch(67% 0.13 39 / 0.22), transparent 34%), radial-gradient(circle at bottom left, oklch(67% 0.09 249 / 0.12), transparent 36%), linear-gradient(180deg, oklch(18% 0.004 85) 0%, var(--c-ink) 100%); color: var(--c-ivory); border: 1px solid oklch(24% 0.004 85 / 0.8); border-radius: var(--c-radius-2xl); padding: 2.5rem; box-shadow: var(--c-shadow-lift); } .app-dark-hero .app-overline { background: oklch(98% 0.005 85 / 0.08); border-color: oklch(98% 0.005 85 / 0.14); color: var(--c-ink-silver); } .app-dark-hero h1, .app-dark-hero h2, .app-dark-hero h3, .app-dark-hero p, .app-dark-hero span { color: inherit; } .app-dark-hero p { color: var(--c-ink-silver); } .page-shell, .page-section { background: var(--c-ivory); border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-xl); box-shadow: var(--c-shadow-ring), var(--c-shadow-soft); } .metric-card { background: linear-gradient(180deg, oklch(100% 0 0 / 0.9), oklch(98% 0.005 85 / 0.96)); border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-xl); box-shadow: var(--c-shadow-ring), var(--c-shadow-soft); } .metric-card--default { background: linear-gradient(180deg, var(--c-default-wash), oklch(98% 0.005 85 / 0.96)); } .metric-card--primary, .metric-card--accent { background: linear-gradient(180deg, var(--c-primary-wash), oklch(98% 0.005 85 / 0.96)); } .metric-card--success { background: linear-gradient(180deg, var(--c-success-wash), oklch(98% 0.005 85 / 0.96)); } .metric-card--warning { background: linear-gradient(180deg, var(--c-warning-wash), oklch(98% 0.005 85 / 0.96)); } .metric-card--danger { background: linear-gradient(180deg, var(--c-danger-wash), oklch(98% 0.005 85 / 0.96)); } .btn-primary, .btn-default, .btn-secondary, .btn-success, .btn-warning, .btn-danger, .btn-neutral, .btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.55rem 1rem; border-radius: var(--c-radius-md); border: 1px solid transparent; font-family: var(--c-font-sans); font-size: 0.92rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: all var(--c-transition); box-shadow: var(--c-shadow-ring); white-space: nowrap; user-select: none; } .btn-primary { background: var(--c-primary); color: var(--c-ivory); border-color: var(--c-primary-border); } .btn-primary:hover { background: var(--c-primary-deep); color: var(--c-ivory); } .btn-default { background: var(--c-default); color: var(--c-default-text); border-color: var(--c-default-border); } .btn-default:hover { background: var(--c-default-deep); color: var(--c-ink); } .btn-secondary, .btn-neutral { background: transparent; color: var(--c-ink-soft); border-color: var(--c-border-warm); box-shadow: none; } .btn-secondary:hover, .btn-neutral:hover { background: var(--c-ivory); border-color: var(--c-border-strong); color: var(--c-ink); } .btn-success { background: var(--c-success); color: var(--c-ivory); border-color: var(--c-success-border); } .btn-success:hover { background: var(--c-success-deep); color: var(--c-ivory); } .btn-warning { background: var(--c-warning); color: var(--c-ivory); border-color: var(--c-warning-border); } .btn-warning:hover { background: var(--c-warning-deep); color: var(--c-ivory); } .btn-danger { background: var(--c-danger); color: var(--c-ivory); border-color: var(--c-danger-border); } .btn-danger:hover { background: var(--c-danger-deep); color: var(--c-ivory); } .btn-icon { width: 2.5rem; height: 2.5rem; padding: 0; background: var(--c-ivory); color: var(--c-ink-muted); border-color: var(--c-border-warm); } .modal-card { background: var(--c-ivory); border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-xl); box-shadow: var(--c-shadow-lift); overflow: hidden; } .modal-header { padding: 1.25rem 1.5rem; background: radial-gradient(circle at top right, oklch(67% 0.13 39 / 0.1), transparent 40%), linear-gradient(180deg, oklch(100% 0 0 / 0.86), oklch(92% 0.008 85 / 0.8)); border-bottom: 1px solid var(--c-border-warm); } .app-table-card { background: var(--c-ivory); border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-xl); box-shadow: var(--c-shadow-ring), var(--c-shadow-soft); overflow: hidden; } .app-table-card__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--c-border); flex-wrap: wrap; } .app-table-card__scroll { overflow-x: auto; } .app-table-empty { padding: 4rem 1.5rem; text-align: center; color: var(--c-ink-faint); } .app-loading-state { min-height: 220px; display: flex; align-items: center; justify-content: center; } .app-loading-state.hidden { display: none; } .app-loading-state__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; } .loading-overlay { position: fixed; inset: 0; z-index: 1500; display: none; align-items: center; justify-content: center; background: oklch(12% 0.003 85 / 0.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .loading-overlay.is-visible, .loading-overlay.show { display: flex; } .spinner { display: inline-block; width: 2.25rem; height: 2.25rem; border: 3px solid var(--c-brand-border); border-top-color: var(--c-brand); border-radius: var(--c-radius-full); animation: cSpin 0.8s linear infinite; } .toast { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 2000; max-width: 360px; display: none; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 1rem; background: var(--c-ivory); border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-md); box-shadow: var(--c-shadow-ring), var(--c-shadow-whisper); color: var(--c-ink-soft); font-size: 0.9rem; } @media (max-width: 920px) { .site-main, .c-main { padding: 1.25rem 1rem 2rem; } }