/* ========================================================================== 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: #f5f4ed; /* page background */ --c-ivory: #faf9f5; /* card surface */ --c-white: #ffffff; /* max contrast surface */ --c-sand: #e8e6dc; /* subtle surface / warm sand buttons */ --c-sand-deep: #dfdcd0; /* pressed / active sand */ /* ---- Borders (warm cream family) ---- */ --c-border: #f0eee6; /* hairline */ --c-border-warm: #e1ddd0; /* standard border */ --c-border-strong: #d1cfc5; /* emphasized border */ /* ---- Ink (warm grays for text) ---- */ --c-ink: #141413; /* primary text, dark surface */ --c-ink-2: #30302e; /* dark surface / border */ --c-ink-soft: #4d4c48; /* secondary dark text */ --c-ink-muted: #5e5d59; /* body text, muted */ --c-ink-faint: #87867f; /* tertiary text, captions */ --c-ink-silver: #b0aea5; /* text on dark surfaces */ /* ---- Brand (terracotta family) ---- */ --c-brand: #c96442; /* primary CTA */ --c-brand-deep: #b85736; /* brand hover/active */ --c-brand-soft: #d97757; /* coral accent */ --c-brand-tint: rgba(201, 100, 66, 0.12); --c-brand-wash: rgba(248, 236, 229, 0.92); /* ---- Semantic (muted, warm-toned) ---- */ --c-success: #728165; /* muted olive */ --c-success-deep: #5c6a51; --c-success-wash: rgba(227, 231, 217, 0.92); --c-warning: #b7883f; /* warm ochre */ --c-warning-deep: #9d7434; --c-warning-wash: rgba(245, 236, 214, 0.95); --c-danger: #b53333; /* warm crimson */ --c-danger-deep: #9a2a2a; --c-danger-wash: rgba(250, 233, 233, 0.95); --c-info: #3898ec; /* cool blue — focus rings only */ --c-info-wash: rgba(56, 152, 236, 0.12); /* ---- Shadows (warm ring-based system) ---- */ --c-shadow-ring: 0 0 0 1px rgba(77, 76, 72, 0.1); --c-shadow-ring-strong: 0 0 0 1px rgba(77, 76, 72, 0.18); --c-shadow-soft: 0 4px 24px rgba(20, 20, 19, 0.05); --c-shadow-whisper: 0 18px 40px rgba(20, 20, 19, 0.08); --c-shadow-lift: 0 24px 48px rgba(20, 20, 19, 0.1); --c-shadow-focus: 0 0 0 3px rgba(56, 152, 236, 0.18); --c-shadow-focus-brand: 0 0 0 3px rgba(201, 100, 66, 0.18); /* ---- 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; /* ---- 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 85% -10%, rgba(201, 100, 66, 0.08), transparent 32%), radial-gradient(circle at -10% 90%, rgba(114, 129, 101, 0.06), transparent 26%), 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); } /* 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: rgba(245, 244, 237, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(48, 48, 46, 0.08); } .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: rgba(255, 255, 255, 0.52); border-color: rgba(77, 76, 72, 0.1); color: var(--c-ink); } .c-nav__link.is-active { background: var(--c-ivory); border-color: rgba(201, 100, 66, 0.2); color: var(--c-ink); box-shadow: var(--c-shadow-ring), 0 6px 18px rgba(20, 20, 19, 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 rgba(48, 48, 46, 0.08); background: rgba(250, 249, 245, 0.88); } .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; } /* ========================================================================== 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: rgba(250, 249, 245, 0.78); border: 1px solid rgba(201, 100, 66, 0.16); 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: rgba(240, 238, 230, 0.4); 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); } /* Muted panel — less emphasis than card */ .c-panel { background: rgba(240, 238, 230, 0.6); border: 1px solid var(--c-border-warm); border-radius: var(--c-radius-lg); padding: 1.25rem; } /* Dark hero card — use for prominent feature blocks */ .c-hero-dark { background: radial-gradient(circle at top right, rgba(201, 100, 66, 0.2), transparent 34%), linear-gradient(180deg, #1b1b19 0%, #141413 100%); color: var(--c-ivory); border: 1px solid rgba(48, 48, 46, 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: rgba(250, 249, 245, 0.08); border-color: rgba(250, 249, 245, 0.14); color: var(--c-ink-silver); } /* Metric card — for dashboards */ .c-metric { background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(250, 249, 245, 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--accent { background: linear-gradient(180deg, var(--c-brand-wash), rgba(250, 249, 245, 0.96)); } .c-metric--success { background: linear-gradient(180deg, var(--c-success-wash), rgba(250, 249, 245, 0.96)); } .c-metric--warning { background: linear-gradient(180deg, var(--c-warning-wash), rgba(250, 249, 245, 0.96)); } .c-metric--danger { background: linear-gradient(180deg, var(--c-danger-wash), rgba(250, 249, 245, 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 transparent; background: var(--c-sand); color: var(--c-ink-soft); 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-sand-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), var(--c-shadow-focus); } .c-btn:disabled, .c-btn.is-disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } /* Primary / brand */ .c-btn--primary { background: var(--c-brand); color: var(--c-ivory); border-color: rgba(201, 100, 66, 0.25); } .c-btn--primary:hover { background: var(--c-brand-deep); color: var(--c-ivory); } .c-btn--primary:focus-visible { box-shadow: var(--c-shadow-focus-brand); } /* Dark */ .c-btn--dark { background: var(--c-ink); color: var(--c-ivory); border-color: rgba(48, 48, 46, 0.8); } .c-btn--dark:hover { background: #1c1c1a; color: var(--c-ivory); } /* Ghost / subtle */ .c-btn--ghost { background: transparent; color: var(--c-ink-muted); box-shadow: none; border-color: transparent; } .c-btn--ghost:hover { background: rgba(255, 255, 255, 0.6); 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: rgba(92, 106, 81, 0.24); } .c-btn--success:hover { background: var(--c-success-deep); color: var(--c-ivory); } .c-btn--warning { background: var(--c-warning); color: var(--c-ivory); border-color: rgba(183, 136, 63, 0.24); } .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: rgba(181, 51, 51, 0.2); } .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: rgba(255, 255, 255, 0.7); color: var(--c-ink-muted); font-size: 0.76rem; font-weight: 600; line-height: 1.2; white-space: nowrap; } .c-chip--accent { background: var(--c-brand-wash); border-color: rgba(201, 100, 66, 0.18); color: var(--c-brand-deep); } .c-chip--success { background: var(--c-success-wash); border-color: rgba(92, 106, 81, 0.22); color: var(--c-success-deep); } .c-chip--warning { background: var(--c-warning-wash); border-color: rgba(183, 136, 63, 0.26); color: var(--c-warning-deep); } .c-chip--danger { background: var(--c-danger-wash); border-color: rgba(181, 51, 51, 0.22); color: var(--c-danger); } .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); } /* ========================================================================== 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 rgba(255, 255, 255, 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 rgba(255, 255, 255, 0.7); } .c-input:disabled, .c-select:disabled, .c-textarea:disabled { background: rgba(240, 238, 230, 0.7); 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 rgba(181, 51, 51, 0.12); } .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; } .c-input-wrap--search > .c-input-wrap__icon { color: var(--c-brand); } .c-input-wrap--search > .c-input-wrap__icon .c-icon { display: block; width: 1rem; height: 1rem; } /* 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 rgba(0, 0, 0, 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: rgba(240, 238, 230, 0.6); 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: rgba(240, 238, 230, 0.4); 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: rgba(240, 238, 230, 0.82); 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 rgba(225, 221, 208, 0.6); } .c-table tbody tr:last-child td { border-bottom: 0; } .c-table tbody tr:hover td { background: rgba(245, 244, 237, 0.7); } .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: rgba(240, 238, 230, 0.3); } /* 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: rgba(20, 20, 19, 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; } @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, rgba(201, 100, 66, 0.1), transparent 40%), linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(240, 238, 230, 0.85)); 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: rgba(240, 238, 230, 0.8); 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: rgba(240, 238, 230, 0.4); display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; } /* ========================================================================== 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--info { background: var(--c-brand-wash); border-color: rgba(201, 100, 66, 0.2); color: var(--c-brand-deep); } .c-alert--info .c-alert__title { color: var(--c-brand-deep); } .c-alert--success { background: var(--c-success-wash); border-color: rgba(92, 106, 81, 0.22); color: var(--c-success-deep); } .c-alert--success .c-alert__title { color: var(--c-success-deep); } .c-alert--warning { background: var(--c-warning-wash); border-color: rgba(183, 136, 63, 0.26); color: var(--c-warning-deep); } .c-alert--warning .c-alert__title { color: var(--c-warning-deep); } .c-alert--danger { background: var(--c-danger-wash); border-color: rgba(181, 51, 51, 0.22); color: var(--c-danger-deep); } .c-alert--danger .c-alert__title { color: var(--c-danger-deep); } /* ========================================================================== 13. TABS ========================================================================== */ .c-tabs { display: flex; gap: 0.25rem; padding: 0.25rem; background: rgba(240, 238, 230, 0.6); 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: rgba(255, 255, 255, 0.6); border-color: var(--c-border-warm); color: var(--c-ink); } .c-pagination__item.is-active { background: var(--c-brand-wash); border-color: rgba(201, 100, 66, 0.2); 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: 1.5rem; right: 1.5rem; z-index: 2000; display: flex; flex-direction: column; gap: 0.6rem; max-width: 360px; 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__icon { flex-shrink: 0; width: 1.2rem; height: 1.2rem; margin-top: 0.1rem; } .c-toast--success .c-toast__icon { color: var(--c-success-deep); } .c-toast--warning .c-toast__icon { color: var(--c-warning-deep); } .c-toast--danger .c-toast__icon { color: var(--c-danger); } .c-toast--info .c-toast__icon { color: var(--c-brand-deep); } /* ========================================================================== 16. LOADING / SPINNER ========================================================================== */ .c-spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid rgba(201, 100, 66, 0.2); 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: rgba(20, 20, 19, 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, rgba(232, 230, 220, 0.6) 0%, rgba(245, 244, 237, 0.8) 50%, rgba(232, 230, 220, 0.6) 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: rgba(232, 230, 220, 0.6); 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--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: rgba(240, 238, 230, 0.82) !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 rgba(225, 221, 208, 0.6) !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: rgba(245, 244, 237, 0.7) !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: rgba(255, 255, 255, 0.7) !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: rgba(201, 100, 66, 0.2) !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 .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 rgba(255, 255, 255, 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 rgba(255, 255, 255, 0.7) !important; } /* Disabled */ .select2-container--default.select2-container--disabled .select2-selection--single, .select2-container--default.select2-container--disabled .select2-selection--multiple { background: rgba(240, 238, 230, 0.7) !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: rgba(250, 249, 245, 0.92) !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 rgba(201, 100, 66, 0.2) !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: rgba(250, 249, 245, 0.6); 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: rgba(232, 230, 220, 0.6) !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-brand) !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 { color: var(--c-ink) !important; } .text-gray-800, .text-gray-700, .text-neutral-700, .text-slate-700 { color: var(--c-ink-soft) !important; } .text-gray-600, .text-gray-500, .text-neutral-500, .text-slate-500 { color: var(--c-ink-muted) !important; } .text-gray-400, .text-neutral-400, .text-slate-400 { color: var(--c-ink-faint) !important; } .bg-gray-50, .bg-neutral-50, .bg-slate-50 { background-color: rgba(240, 238, 230, 0.6) !important; } .bg-gray-100, .bg-neutral-100, .bg-slate-100 { background-color: rgba(232, 230, 220, 0.9) !important; } .bg-gray-900, .bg-neutral-900, .bg-slate-900 { background-color: var(--c-ink) !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-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-color: rgba(201, 100, 66, 0.2) !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; } /* 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; } /* 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; } /* 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; } } @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%; } } /* ========================================================================== 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--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: rgba(250, 249, 245, 0.78); border: 1px solid rgba(201, 100, 66, 0.16); 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, rgba(201, 100, 66, 0.2), transparent 34%), linear-gradient(180deg, #1b1b19 0%, #141413 100%); color: var(--c-ivory); border: 1px solid rgba(48, 48, 46, 0.8); border-radius: var(--c-radius-2xl); padding: 2.5rem; box-shadow: var(--c-shadow-lift); } .app-dark-hero .app-overline { background: rgba(250, 249, 245, 0.08); border-color: rgba(250, 249, 245, 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, rgba(255, 255, 255, 0.88), rgba(250, 249, 245, 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--accent { background: linear-gradient(180deg, var(--c-brand-wash), rgba(250, 249, 245, 0.96)); } .metric-card--success { background: linear-gradient(180deg, var(--c-success-wash), rgba(250, 249, 245, 0.96)); } .metric-card--warning { background: linear-gradient(180deg, var(--c-warning-wash), rgba(250, 249, 245, 0.96)); } .metric-card--danger { background: linear-gradient(180deg, var(--c-danger-wash), rgba(250, 249, 245, 0.96)); } .btn-primary, .btn-secondary, .btn-success, .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-brand); color: var(--c-ivory); border-color: rgba(201, 100, 66, 0.25); } .btn-primary:hover { background: var(--c-brand-deep); color: var(--c-ivory); } .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: rgba(92, 106, 81, 0.24); } .btn-success:hover { background: var(--c-success-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, rgba(201, 100, 66, 0.1), transparent 40%), linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(240, 238, 230, 0.85)); 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: rgba(20, 20, 19, 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 rgba(201, 100, 66, 0.2); 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; } }