/* ===================================================================== Carreer — Industrial / engineering design system (v2) Replaces the Claude-inspired theme. Sodium-amber LED accent, monospace metadata, 1px hairlines, sharp 2px corners. Dark mode is the default; opt-in to paper via . Layered on top of Bootstrap (we keep Bootstrap's JS behavior). ===================================================================== */ /* ---------- Design tokens ---------- */ :root { /* Surfaces — DARK (default) */ --c-bg: #0C0D0F; --c-bg-warm: #131418; --c-bg-deep: #16181C; --c-surface: #1A1C20; --c-card: #1A1C20; /* Ink */ --c-ink: #ECE9DE; --c-ink-soft: #B4B0A2; --c-ink-muted: #8A877B; --c-ink-dim: #6E6B61; --c-ink-faint: #4E4C44; /* Lines */ --c-line: #25272C; --c-line-strong: #33363D; /* Accent — sodium amber LED */ --c-accent: #E2A33A; --c-accent-hover: #F0B14A; --c-accent-soft: rgba(226, 163, 58, 0.12); --c-accent-ink: #F4C062; /* Semantic — LED palette */ --c-success: #2BC07A; --c-success-soft: rgba(43, 192, 122, 0.12); --c-danger: #E85A5A; --c-danger-soft: rgba(232, 90, 90, 0.12); --c-warning: #E2A33A; --c-warning-soft: rgba(226, 163, 58, 0.12); --c-info: #5BC8E0; --c-info-soft: rgba(91, 200, 224, 0.12); /* Company tokens */ --c-co-arksoft: #5BC8E0; --c-co-fizix: #E2A33A; --c-co-infinia: #9DD25B; --c-co-mirleon: #C98AE0; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Space Grotesk', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Radius & shadow */ --r-sm: 2px; --r-md: 2px; --r-lg: 4px; --r-xl: 6px; --shadow-xs: 0 1px 0 rgba(0,0,0,0.4); --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 8px 24px rgba(0,0,0,0.5); --shadow-lg: 0 20px 60px rgba(0,0,0,0.55); } /* Paper theme (opt-in) */ body[data-theme="paper"] { --c-bg: #F4F1E8; --c-bg-warm: #EDE9DC; --c-bg-deep: #E5E0D1; --c-surface: #FBF8F0; --c-card: #FBF8F0; --c-ink: #1A1B1F; --c-ink-soft: #54564E; --c-ink-muted: #75726A; --c-ink-dim: #93908A; --c-ink-faint: #B5B0A0; --c-line: #D9D3C2; --c-line-strong: #BAB29C; --shadow-xs: 0 1px 2px rgba(31,30,28,0.04); --shadow-sm: 0 2px 6px rgba(31,30,28,0.06); --shadow-md: 0 6px 20px rgba(31,30,28,0.08); --shadow-lg: 0 14px 40px rgba(31,30,28,0.10); } /* ---------- Base ---------- */ html { font-size: 15px; min-height: 100%; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } @media (min-width: 768px) { html { font-size: 16px; } } body { font-family: var(--font-sans); background: var(--c-bg); color: var(--c-ink); line-height: 1.6; letter-spacing: -0.005em; margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } ::selection { background: var(--c-accent-soft); color: var(--c-accent-ink); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--c-bg); } ::-webkit-scrollbar-thumb { background: var(--c-line-strong); border-radius: 2px; } /* ---------- Typography ---------- */ h1, h2, h3, h4, .cl-display { font-family: var(--font-display); font-weight: 500; color: var(--c-ink); letter-spacing: -0.02em; line-height: 1.1; margin-top: 0; } h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 500; } h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; } h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 500; } h4 { font-size: 1.2rem; font-weight: 600; } h5, h6 { font-family: var(--font-sans); font-weight: 600; color: var(--c-ink); letter-spacing: -0.005em; margin-top: 0; } p { color: var(--c-ink-soft); } .lead { font-family: var(--font-sans); font-weight: 400; font-size: 1.05rem; line-height: 1.55; color: var(--c-ink-soft); letter-spacing: -0.005em; } /* Mono metadata */ .cl-mono, .mono, code, pre, .font-mono { font-family: var(--font-mono); font-feature-settings: "tnum","ss01"; } .cl-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--c-accent); } .cl-tag::before { content: "//"; color: var(--c-accent); opacity: 0.7; } .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 0.75rem; } .text-muted { color: var(--c-ink-muted) !important; } .text-faint { color: var(--c-ink-faint); } a { color: var(--c-accent); text-decoration: none; transition: color .12s ease; } a:hover { color: var(--c-accent-hover); } hr { border-color: var(--c-line); opacity: 1; } /* ---------- Containers ---------- */ .container, .container-fluid { padding-left: 1.25rem; padding-right: 1.25rem; } @media (min-width: 992px) { .container { max-width: 1240px; } } /* ---------- Navbar (industrial topbar) ---------- */ .navbar { background: var(--c-bg) !important; backdrop-filter: none; border-bottom: 1px solid var(--c-line); box-shadow: none !important; padding: 0.7rem 0; } .navbar.navbar-dark { background: var(--c-bg) !important; } .navbar-brand { font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem; color: var(--c-ink) !important; letter-spacing: 0.18em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.6rem; } .navbar-brand::before { content: ""; width: 22px; height: 22px; background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent) 50%, transparent 50%, transparent 100%), linear-gradient(135deg, transparent 0%, transparent 50%, rgba(226,163,58,0.4) 50%, rgba(226,163,58,0.4) 100%); background-size: 50% 50%, 50% 50%; background-repeat: no-repeat; background-position: top left, bottom right; border: 1px solid var(--c-accent); border-radius: 0; } .navbar-nav .nav-link { color: var(--c-ink-soft) !important; font-weight: 500; font-size: 0.92rem; padding: 0.4rem 0.85rem !important; border-radius: 2px; border: 1px solid transparent; transition: all .12s ease; } .navbar-nav .nav-link:hover { color: var(--c-ink) !important; background: var(--c-surface); } .navbar-nav .nav-link.active { color: var(--c-ink) !important; background: var(--c-surface); border-color: var(--c-line); } .navbar-toggler { border: 1px solid var(--c-line-strong); padding: 0.3rem 0.5rem; } .navbar-toggler-icon { filter: invert(0.85); } /* User avatar (industrial square) */ .cl-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 2px; background: linear-gradient(135deg, var(--c-accent), #B65333); color: #0B0B0D; font-family: var(--font-mono); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.04em; } .cl-avatar-lg { width: 40px; height: 40px; font-size: 0.85rem; border-radius: 2px; } .cl-user-trigger { display: inline-flex !important; align-items: center; gap: 0.55rem; } .cl-user-name { font-size: 0.9rem; font-family: var(--font-mono); letter-spacing: 0.04em; } .cl-chevron { color: var(--c-ink-dim); transition: transform .15s; } .dropdown-toggle[aria-expanded="true"] .cl-chevron { transform: rotate(180deg); } .cl-user-trigger.dropdown-toggle::after { display: none; } .dropdown-toggle::after { display: none; } .cl-menu-icon { width: 16px; height: 16px; margin-right: 0.5rem; vertical-align: -3px; color: var(--c-ink-dim); } /* Dropdown */ .dropdown-menu { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 2px; box-shadow: var(--shadow-md); padding: 6px; min-width: 220px; margin-top: 4px !important; } .dropdown-item { color: var(--c-ink-soft); padding: 8px 12px; border-radius: 2px; font-size: 0.9rem; display: flex; align-items: center; } .dropdown-item:hover, .dropdown-item:focus { background: var(--c-bg-deep); color: var(--c-ink); } .dropdown-header { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-dim); font-weight: 700; padding: 10px 12px 6px; } .dropdown-divider { border-color: var(--c-line); margin: 6px 0; } .cl-user-menu-header { padding: 10px 12px 10px; border-bottom: 1px solid var(--c-line); margin-bottom: 4px; } .cl-user-menu-name { color: var(--c-ink); font-weight: 600; font-size: 0.95rem; } .cl-user-menu-role { color: var(--c-ink-dim); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; } /* Language switch (segmented mono) */ .cl-lang-switch { display: inline-flex; gap: 0; border: 1px solid var(--c-line-strong); border-radius: 2px; padding: 2px; background: var(--c-surface); } .cl-lang-switch-btn { border: 0; background: transparent; padding: 3px 6px; border-radius: 2px; line-height: 0; cursor: pointer; opacity: 0.5; transition: opacity .12s; } .cl-lang-switch-btn:hover { opacity: 0.85; } .cl-lang-switch-btn.is-active { opacity: 1; background: var(--c-bg-deep); } /* ---------- Buttons ---------- */ .btn { font-family: var(--font-sans); font-weight: 500; border-radius: 2px; border: 1px solid var(--c-line-strong); padding: 0.55rem 1.1rem; font-size: 0.92rem; transition: all .12s ease; display: inline-flex; align-items: center; gap: 0.5rem; letter-spacing: -0.005em; } .btn:focus, .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--c-accent-soft); } .btn-primary { background: var(--c-accent) !important; border-color: var(--c-accent) !important; color: #0B0B0D !important; font-weight: 600; } .btn-primary:hover { background: var(--c-accent-hover) !important; border-color: var(--c-accent-hover) !important; color: #0B0B0D !important; } .btn-outline-primary { background: transparent !important; border-color: var(--c-accent) !important; color: var(--c-accent) !important; } .btn-outline-primary:hover { background: var(--c-accent-soft) !important; color: var(--c-accent-hover) !important; } .btn-secondary, .btn-outline-secondary { background: var(--c-surface) !important; border-color: var(--c-line-strong) !important; color: var(--c-ink) !important; } .btn-outline-secondary { background: transparent !important; color: var(--c-ink-soft) !important; } .btn-secondary:hover, .btn-outline-secondary:hover { background: var(--c-bg-deep) !important; color: var(--c-ink) !important; border-color: var(--c-line-strong) !important; } .btn-success { background: var(--c-success) !important; border-color: var(--c-success) !important; color: #0B0B0D !important; } .btn-danger { background: transparent !important; color: var(--c-danger) !important; border-color: rgba(232,90,90,0.4) !important; } .btn-danger:hover { background: var(--c-danger-soft) !important; color: var(--c-danger) !important; } .btn-info { background: var(--c-info) !important; color: #0B0B0D !important; border-color: var(--c-info) !important; } .btn-sm { padding: 0.32rem 0.7rem; font-size: 0.78rem; } .btn-lg { padding: 0.7rem 1.4rem; font-size: 1rem; } /* ---------- Cards ---------- */ .card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 2px; box-shadow: none; } .card-header { background: var(--c-bg-deep); border-bottom: 1px solid var(--c-line); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--c-ink); padding: 0.85rem 1.1rem; } .card-body { padding: 1.3rem; } /* ---------- Forms ---------- */ .form-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-dim); font-weight: 600; margin-bottom: 0.4rem; } .form-control, .form-select { background: var(--c-bg) !important; color: var(--c-ink) !important; border: 1px solid var(--c-line-strong) !important; border-radius: 2px !important; padding: 0.55rem 0.75rem; font-size: 0.92rem; font-family: var(--font-sans); transition: border-color .12s, box-shadow .12s; } .form-control:focus, .form-select:focus { border-color: var(--c-accent) !important; box-shadow: 0 0 0 2px var(--c-accent-soft) !important; outline: none; } .form-control::placeholder { color: var(--c-ink-dim); } .form-text { font-family: var(--font-mono); font-size: 0.72rem; color: var(--c-ink-dim); letter-spacing: 0.04em; } .form-check-input { background-color: var(--c-bg); border-color: var(--c-line-strong); border-radius: 2px; } .form-check-input:checked { background-color: var(--c-accent); border-color: var(--c-accent); } /* ---------- Tables ---------- */ .table { --bs-table-bg: var(--c-surface); color: var(--c-ink); border-color: var(--c-line); font-size: 0.9rem; } .table > :not(caption) > * > * { border-color: var(--c-line); padding: 0.85rem 0.9rem; } .table thead th { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-dim); font-weight: 700; background: var(--c-bg-deep); border-bottom: 1px solid var(--c-line); border-top: 1px solid var(--c-line); } .table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--c-bg-warm); color: var(--c-ink); } .table tbody tr:hover { background: var(--c-bg-deep); } /* ---------- Badges / status pills ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 2px; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .badge::before { content: ""; width: 5px; height: 5px; border-radius: 5px; background: currentColor; box-shadow: 0 0 6px currentColor; } .badge.bg-primary { background: var(--c-accent-soft) !important; color: var(--c-accent) !important; } .badge.bg-secondary{ background: rgba(255,255,255,0.06) !important; color: var(--c-ink-soft) !important; } .badge.bg-success { background: var(--c-success-soft) !important; color: var(--c-success) !important; } .badge.bg-danger { background: var(--c-danger-soft) !important; color: var(--c-danger) !important; } .badge.bg-warning { background: var(--c-warning-soft) !important; color: var(--c-warning) !important; } .badge.bg-info { background: var(--c-info-soft) !important; color: var(--c-info) !important; } /* ---------- Alerts ---------- */ .alert { border-radius: 2px; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); padding: 1rem 1.2rem; } .alert-info { border-left: 3px solid var(--c-info); } .alert-success { border-left: 3px solid var(--c-success); } .alert-warning { border-left: 3px solid var(--c-warning); } .alert-danger { border-left: 3px solid var(--c-danger); } /* ---------- Modals ---------- */ .modal-content { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 2px; color: var(--c-ink); } .modal-header, .modal-footer { border-color: var(--c-line); } .modal-backdrop.show { opacity: 0.85; } .modal-backdrop { background: #000; } .btn-close { filter: invert(0.85); } /* ---------- Hero / sections ---------- */ .cl-hero { padding: 0; background: var(--c-bg); border-bottom: 1px solid var(--c-line); } .cl-hero-grid { display: grid; grid-template-columns: 1fr; min-height: 540px; } @media (min-width: 992px) { .cl-hero-grid { grid-template-columns: 1.1fr 1fr; } } .cl-hero-left { padding: 4.5rem 3rem 3.5rem; position: relative; border-right: 1px solid var(--c-line); } @media (max-width: 991px) { .cl-hero-left { border-right: none; border-bottom: 1px solid var(--c-line); padding: 3rem 1.5rem; } } .cl-hero-right { padding: 3rem 0 0; background: var(--c-bg-deep); position: relative; overflow: hidden; } .cl-coord { position: absolute; padding: 8px 14px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent); pointer-events: none; } .cl-coord.tl { top: 0; left: 0; } .cl-display-xl { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: 0.98; letter-spacing: -0.03em; margin: 1.5rem 0 1.5rem; } .cl-display-xl em { font-style: normal; color: var(--c-accent); } .cl-metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--c-line); margin-top: 3rem; } .cl-metric { padding: 1.2rem 0; border-right: 1px solid var(--c-line); } .cl-metric:last-child { border-right: none; } .cl-metric-value { font-family: var(--font-mono); font-size: 2rem; font-weight: 500; color: var(--c-ink); letter-spacing: -0.02em; line-height: 1; } .cl-metric-label { font-family: var(--font-mono); font-size: 0.65rem; color: var(--c-ink-dim); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.4rem; } .cl-ticker-head { padding: 0 0 0 2.5rem; display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.4rem; } .cl-led { width: 8px; height: 8px; border-radius: 8px; background: var(--c-success); box-shadow: 0 0 8px var(--c-success); display: inline-block; } .cl-led-amber { background: var(--c-accent); box-shadow: 0 0 8px var(--c-accent); } .cl-ticker { margin-top: 1.5rem; } .cl-ticker-row { display: grid; grid-template-columns: 95px 1fr auto; align-items: center; gap: 1rem; padding: 1rem 2.5rem; border-top: 1px solid var(--c-line); cursor: pointer; transition: background .15s; color: var(--c-ink); text-decoration: none; } .cl-ticker-row:last-child { border-bottom: 1px solid var(--c-line); } .cl-ticker-row:hover { background: var(--c-surface); color: var(--c-ink); } .cl-ticker-id { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; } .cl-ticker-title { font-size: 0.92rem; font-weight: 500; color: var(--c-ink); margin-bottom: 4px; } .cl-ticker-meta { font-family: var(--font-mono); font-size: 0.66rem; color: var(--c-ink-dim); letter-spacing: 0.04em; } .cl-ticker-arrow { color: var(--c-accent); font-family: var(--font-mono); font-size: 0.95rem; } /* Section wrappers */ .cl-section { padding: 4rem 0; border-bottom: 1px solid var(--c-line); } .cl-section-warm { background: var(--c-bg-warm); } .cl-section-deep { background: var(--c-bg-deep); } .cl-section-tight { padding: 2rem 0; } .cl-section-head { display: flex; align-items: baseline; gap: 1.1rem; margin-bottom: 2rem; } .cl-section-head .cl-tag { white-space: nowrap; } .cl-section-head .cl-hairline { flex: 1; height: 1px; background: var(--c-line); } .cl-section-head .cl-section-meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--c-ink-dim); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } /* Companies grid */ .cl-companies { display: grid; grid-template-columns: repeat(1, 1fr); border: 1px solid var(--c-line); } @media (min-width: 768px) { .cl-companies { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .cl-companies { grid-template-columns: repeat(4, 1fr); } } .cl-company { padding: 1.7rem 1.6rem; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); position: relative; min-height: 220px; background: var(--c-surface); } .cl-company::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--co-color, var(--c-accent)); } .cl-company-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.2rem; } .cl-company-mark { width: 40px; height: 40px; border-radius: 2px; background: var(--co-soft, rgba(226,163,58,0.12)); border: 1px solid var(--co-border, rgba(226,163,58,0.4)); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; color: var(--co-color, var(--c-accent)); } .cl-company-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--c-ink); } .cl-company-sub { font-family: var(--font-mono); font-size: 0.62rem; color: var(--c-ink-dim); letter-spacing: 0.12em; text-transform: uppercase; } .cl-company-body { font-size: 0.86rem; line-height: 1.55; color: var(--c-ink-soft); margin: 0; } .cl-company-foot { position: absolute; bottom: 1rem; left: 1.6rem; right: 1.6rem; display: flex; justify-content: space-between; align-items: center; } .cl-company-count { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; color: var(--co-color, var(--c-accent)); letter-spacing: 0.06em; } /* Process steps */ .cl-process { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; gap: 0; } @media (max-width: 991px) { .cl-process { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } .cl-process-line { position: absolute; top: 17px; left: 10%; right: 10%; height: 1px; border-top: 1px dashed var(--c-line-strong); } .cl-process-step { position: relative; padding-top: 3.5rem; text-align: center; padding-left: 1rem; padding-right: 1rem; } .cl-process-num { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; background: var(--c-bg); border: 1px solid var(--c-accent); border-radius: 32px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: var(--c-accent); } .cl-process-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 0.3rem; } .cl-process-title { font-size: 0.95rem; font-weight: 600; color: var(--c-ink); margin-bottom: 0.5rem; letter-spacing: 0.02em; } .cl-process-desc { font-size: 0.82rem; line-height: 1.5; color: var(--c-ink-soft); margin: 0; } /* CTA dark */ .cl-cta { padding: 5rem 0; background: var(--c-bg-deep); border-bottom: 1px solid var(--c-line); position: relative; } .cl-cta-title { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; font-weight: 500; margin: 0 0 1.2rem; } .cl-cta-title em { font-style: normal; color: var(--c-accent); } /* Filter bar */ .cl-filter-bar { background: var(--c-surface); border: 1px solid var(--c-line); padding: 1.1rem; margin-bottom: 1.5rem; } /* Job cards */ .cl-job-card { transition: border-color .12s, background .12s; } .cl-job-card:hover { border-color: var(--c-accent); background: var(--c-bg-deep); } .cl-job-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; color: var(--c-ink); margin-bottom: 0.4rem; letter-spacing: -0.01em; } .cl-job-meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--c-ink-dim); letter-spacing: 0.06em; margin-bottom: 0.75rem; } .cl-job-meta span + span::before { content: " · "; color: var(--c-ink-faint); } .cl-job-snippet { font-size: 0.88rem; line-height: 1.55; color: var(--c-ink-soft); } /* Chips */ .cl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--c-line-strong); background: var(--c-surface); color: var(--c-ink-soft); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; border-radius: 2px; } /* Steps (numbered) */ .cl-steps { list-style: none; padding: 0; margin: 0; } .cl-step { display: flex; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--c-line); } .cl-step:first-child { border-top: none; } .cl-step-num { flex: 0 0 32px; height: 32px; border: 1px solid var(--c-accent); border-radius: 32px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; color: var(--c-accent); font-size: 0.78rem; } .cl-step-content h5 { font-size: 0.95rem; color: var(--c-ink); margin-bottom: 0.25rem; } .cl-step-content p { font-size: 0.85rem; color: var(--c-ink-soft); margin: 0; } /* Feature blocks */ .cl-feature { padding: 0; } .cl-feature-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--c-accent-soft); color: var(--c-accent); border: 1px solid rgba(226,163,58,0.4); margin-bottom: 1rem; border-radius: 2px; } .cl-feature h5 { font-size: 1rem; color: var(--c-ink); margin-bottom: 0.5rem; font-weight: 600; } .cl-feature p { font-size: 0.88rem; line-height: 1.55; color: var(--c-ink-soft); margin: 0; } /* Footer */ .footer { padding: 2rem 0; background: var(--c-bg); border-top: 1px solid var(--c-line); color: var(--c-ink-dim); font-size: 0.85rem; font-family: var(--font-mono); letter-spacing: 0.04em; } .footer a { color: var(--c-ink-soft); } .footer a:hover { color: var(--c-accent); } /* Confirm modal (carryover from original system) */ .cl-confirm-modal .modal-content { padding: 1rem 0.6rem; } .cl-confirm-icon { width: 48px; height: 48px; border-radius: 48px; background: var(--c-danger-soft); color: var(--c-danger); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } .cl-confirm-icon svg { width: 24px; height: 24px; } .cl-confirm-title { font-family: var(--font-display); font-size: 1.2rem; text-align: center; color: var(--c-ink); margin-bottom: 0.5rem; } .cl-confirm-body { text-align: center; color: var(--c-ink-soft); font-size: 0.9rem; margin-bottom: 1.2rem; } .cl-confirm-actions { display: flex; gap: 0.5rem; justify-content: center; } /* Toast */ .toast { background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink); } .toast-header { background: var(--c-bg-deep); border-color: var(--c-line); color: var(--c-ink); } .toast-header.bg-success { background: var(--c-success) !important; color: #0B0B0D; } .toast-header.bg-danger { background: var(--c-danger) !important; color: #fff; } /* Workspace menu width tweak */ .cl-workspace-menu { min-width: 240px; } /* Misc */ .cl-hairline { height: 1px; background: var(--c-line); } .cl-fit-bar { display: flex; gap: 2px; height: 8px; } .cl-fit-seg { flex: 1; background: var(--c-line); border-radius: 1px; } .cl-fit-seg.on { background: var(--c-success); box-shadow: 0 0 4px rgba(43,192,122,0.5); } .cl-fit-seg.warn.on { background: var(--c-warning); box-shadow: 0 0 4px rgba(226,163,58,0.5); } .cl-fit-seg.danger.on { background: var(--c-danger); box-shadow: 0 0 4px rgba(232,90,90,0.5); }