Publish curated VacatureRadar source snapshot
This commit is contained in:
Jens committed
commit
e29774cb7f
338 files changed
+32699
No files matched your search
@@ -0,0 +1,9 @@
|
||||
/* Houd ook geïmporteerde stylesheets versieerbaar; alleen app.css voorzien van
|
||||
een querystring ververst anders niet noodzakelijk de browsercache. */
|
||||
@import url("tokens.css?v=0.3.13");
|
||||
@import url("base.css?v=0.3.13");
|
||||
@import url("layout.css?v=0.3.13");
|
||||
@import url("components.css?v=0.3.13");
|
||||
@import url("pages.css?v=0.3.13");
|
||||
@import url("responsive.css?v=0.3.13");
|
||||
@import url("premium.css?v=0.3.13");
|
||||
@@ -0,0 +1,610 @@
|
||||
/* VacatureRadar — Authenticatieschermen (login, wachtwoordherstel).
|
||||
* Lokale reproductie van het Stitch "Intelligence Cockpit" ontwerp.
|
||||
* Bewust CDN-vrij (geen Tailwind/Google Fonts) zodat de pagina local-first blijft
|
||||
* en de toegankelijkheidstest (geen externe assets) blijft slagen.
|
||||
*/
|
||||
|
||||
/* Zelf-gehoste fonts (Geist — © Vercel/basement.studio; JetBrains Mono — OFL).
|
||||
* Woff2-bestanden in static/fonts/, geen externe CDN nodig. */
|
||||
@font-face {
|
||||
font-family: "Geist";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("../fonts/geist-400.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Geist";
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url("../fonts/geist-600.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Geist";
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url("../fonts/geist-900.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Kleuren overgenomen uit het project (tokens.css, lichte thema). */
|
||||
/* Surfaces */
|
||||
--surface: #e6eff2;
|
||||
--surface-dim: #cadadd;
|
||||
--surface-container-lowest: #ffffff;
|
||||
--surface-container-low: #edf4f5;
|
||||
--surface-container: #f5f9fa;
|
||||
--surface-container-high: #e3edef;
|
||||
--surface-container-highest: #d6e3e5;
|
||||
--on-surface: #12262b;
|
||||
--on-surface-variant: #475e63;
|
||||
--outline: #64787d;
|
||||
--outline-variant: #b7c9cc;
|
||||
|
||||
/* Brand / primary (cyaan) */
|
||||
--primary: #007c83;
|
||||
--on-primary: #ffffff;
|
||||
--primary-container: #007c83;
|
||||
--primary-fixed-dim: #006b71;
|
||||
|
||||
/* Secondary + semantic */
|
||||
--secondary-container: #d6f5e7;
|
||||
--on-secondary-container: #087a55;
|
||||
--error: #a82d27;
|
||||
--on-error: #ffffff;
|
||||
--error-container: #fbe6e4;
|
||||
--on-error-container: #7a1f1a;
|
||||
--success: #087a55;
|
||||
--success-container: #d6f5e7;
|
||||
--on-success-container: #053d2c;
|
||||
|
||||
/* Type */
|
||||
--font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
|
||||
/* Shape */
|
||||
--r-input: 4px;
|
||||
--r-card: 8px;
|
||||
--r-pill: 999px;
|
||||
|
||||
/* Rhythm */
|
||||
--stack-sm: 8px;
|
||||
--stack-md: 16px;
|
||||
--stack-lg: 24px;
|
||||
|
||||
--shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body.auth-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px 16px;
|
||||
font-family: var(--font-sans);
|
||||
color: var(--on-surface);
|
||||
background-color: var(--surface);
|
||||
background-image: radial-gradient(var(--surface-container-highest) 0.5px, transparent 0.5px);
|
||||
background-size: 24px 24px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.auth-shell {
|
||||
width: 100%;
|
||||
max-width: 28rem; /* 448px, komt overeen met max-w-md */
|
||||
}
|
||||
|
||||
/* Merkidentiteit boven de kaart */
|
||||
.auth-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-brand-logo {
|
||||
display: block;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.auth-shell > .developer-credit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
justify-content: center;
|
||||
margin: 18px auto 0;
|
||||
color: var(--on-surface-variant);
|
||||
font: 700 9px/1 var(--font-sans);
|
||||
letter-spacing: .1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.auth-shell > .developer-credit img {
|
||||
display: block;
|
||||
width: 113px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.auth-brand-name {
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 900;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.auth-brand-tagline {
|
||||
margin: 6px 0 0;
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
/* Kaart */
|
||||
.auth-card {
|
||||
background: var(--surface-container-lowest);
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: var(--r-card);
|
||||
box-shadow: var(--shadow-card);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.auth-card {
|
||||
padding: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-card h1,
|
||||
.auth-card h2.auth-heading {
|
||||
margin: 0 0 24px;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.01em;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.auth-lead {
|
||||
margin: -12px 0 24px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
/* Formulier */
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.field-label-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.field > label,
|
||||
.field-label-row > label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 500;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.field > label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.field-link {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
line-height: 14px;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.field-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.auth-input {
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: var(--on-surface);
|
||||
background: var(--surface-container-low);
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: var(--r-input);
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.input-wrap .auth-input {
|
||||
padding-right: 44px;
|
||||
}
|
||||
|
||||
.auth-input::placeholder {
|
||||
color: var(--outline);
|
||||
}
|
||||
|
||||
.auth-input:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 2px rgba(0, 124, 131, 0.2);
|
||||
}
|
||||
|
||||
.auth-input[aria-invalid="true"] {
|
||||
border-color: var(--error);
|
||||
}
|
||||
|
||||
.pw-toggle {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--outline);
|
||||
border-radius: var(--r-input);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pw-toggle:hover {
|
||||
color: var(--on-surface-variant);
|
||||
background: var(--surface-container-high);
|
||||
}
|
||||
|
||||
.pw-toggle .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.pw-toggle .icon[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.field-label-row {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.field-link {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.field-error {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
/* Knoppen */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--r-input);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary-container);
|
||||
color: var(--on-primary);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.btn-sso {
|
||||
background: var(--surface);
|
||||
color: var(--on-surface);
|
||||
border-color: var(--outline-variant);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-sso:hover {
|
||||
background: var(--surface-container-high);
|
||||
}
|
||||
|
||||
.btn-sso svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.btn .spinner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
animation: auth-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes auth-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Scheidingslijn */
|
||||
.auth-separator {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.auth-separator::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: var(--outline-variant);
|
||||
}
|
||||
|
||||
.auth-separator span {
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
background: var(--surface-container-lowest);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
/* Demo / secundaire actie */
|
||||
.auth-secondary {
|
||||
margin-top: 32px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--outline-variant);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.auth-secondary p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: auto;
|
||||
padding: 6px 14px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: var(--r-pill);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--primary);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: rgba(0, 124, 131, 0.12);
|
||||
}
|
||||
|
||||
.btn-ghost .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.btn-ghost.inline-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Meldingen */
|
||||
.auth-alert {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--r-input);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.auth-alert .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex: 0 0 auto;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.auth-alert.is-error {
|
||||
background: var(--error-container);
|
||||
color: var(--on-error-container);
|
||||
}
|
||||
|
||||
.auth-alert.is-success {
|
||||
background: var(--success-container);
|
||||
color: var(--on-success-container);
|
||||
}
|
||||
|
||||
.auth-alert.is-info {
|
||||
background: var(--secondary-container);
|
||||
color: var(--on-secondary-container);
|
||||
}
|
||||
|
||||
/* Voettekst */
|
||||
.auth-footer {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.auth-footer-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.auth-footer-links a {
|
||||
color: var(--on-surface-variant);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.auth-footer-links a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.auth-footer-links .sep {
|
||||
color: var(--outline-variant);
|
||||
}
|
||||
|
||||
.auth-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--r-pill);
|
||||
background: var(--secondary-container);
|
||||
color: var(--on-secondary-container);
|
||||
}
|
||||
|
||||
.auth-badge .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.auth-badge span {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Terug-link op subpagina's */
|
||||
.auth-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 20px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--on-surface-variant);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.auth-back:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.auth-back .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.btn,
|
||||
.btn:active,
|
||||
.btn .spinner,
|
||||
.btn-ghost,
|
||||
.auth-input {
|
||||
transition: none;
|
||||
animation: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html { min-width: 320px; background: var(--surface); scroll-behavior: smooth; }
|
||||
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--surface); color: var(--text); font: 400 15px/1.55 var(--font-body); }
|
||||
body::before { position: fixed; inset: 0; z-index: -1; content: ""; pointer-events: none; background: radial-gradient(circle at 84% 0%, rgba(0,245,255,.055), transparent 31rem), radial-gradient(circle at 35% 100%, rgba(99,102,241,.04), transparent 36rem); }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
a:hover { color: var(--text-strong); }
|
||||
button, input, select, textarea { color: inherit; font: inherit; }
|
||||
button, summary, select { cursor: pointer; }
|
||||
button { border: 0; }
|
||||
img, svg { max-width: 100%; }
|
||||
h1, h2, h3, h4, p { margin-block-start: 0; }
|
||||
h1, h2, h3, h4 { color: var(--text-strong); font-family: var(--font-headline); line-height: 1.2; }
|
||||
h1 { margin-bottom: 8px; font-size: clamp(28px, 2.1vw, 38px); letter-spacing: -.035em; }
|
||||
h2 { margin-bottom: 8px; font-size: 20px; letter-spacing: -.015em; }
|
||||
h3 { margin-bottom: 6px; font-size: 16px; }
|
||||
p { margin-bottom: 12px; }
|
||||
small { color: var(--text-muted); }
|
||||
code, pre, kbd { font-family: var(--font-mono); }
|
||||
pre { overflow: auto; }
|
||||
hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--outline) 55%, transparent); }
|
||||
::selection { background: var(--cyan); color: var(--cyan-ink); }
|
||||
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
|
||||
::placeholder { color: var(--text-faint); opacity: 1; }
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: var(--surface-lowest); }
|
||||
::-webkit-scrollbar-thumb { background: var(--surface-highest); border-radius: 8px; }
|
||||
.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
|
||||
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
|
||||
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
|
||||
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 14px; transform: translateY(-160%); background: var(--cyan); color: var(--cyan-ink); font-weight: 700; }
|
||||
.skip-link:focus { transform: translateY(0); }
|
||||
.muted { color: var(--text-muted); }
|
||||
.small { font-size: 13px; }
|
||||
.mobile-only { display: none; }
|
||||
[hidden] { display: none !important; }
|
||||
.theme-icon-light { display: none; }
|
||||
:root[data-theme="light"] .theme-icon-dark { display: none; }
|
||||
:root[data-theme="light"] .theme-icon-light { display: block; }
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
|
||||
width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--outline) 72%, transparent); border-radius: var(--radius-sm); outline: 0; background: var(--surface-low); transition: border-color .16s, background .16s, box-shadow .16s;
|
||||
}
|
||||
textarea { min-height: 130px; resize: vertical; }
|
||||
input:hover, select:hover, textarea:hover { border-color: var(--outline-strong); }
|
||||
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 12%, transparent); }
|
||||
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--cyan); }
|
||||
label { display: grid; gap: 7px; color: var(--text); }
|
||||
.field-label, label > span:first-child { color: var(--text-muted); font: 600 11px/1.2 var(--font-mono); letter-spacing: .075em; text-transform: uppercase; }
|
||||
.field-error { color: var(--coral); }
|
||||
@@ -0,0 +1,89 @@
|
||||
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 1px solid transparent; border-radius: var(--radius-sm); font: 650 13px/1 var(--font-body); transition: transform .14s, filter .14s, background .14s, border-color .14s; }
|
||||
.button:hover { transform: translateY(-1px); }
|
||||
.button:active { transform: scale(.98); }
|
||||
.button-primary { border-color: var(--cyan); background: var(--cyan); color: var(--cyan-ink); box-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 12%, transparent); }
|
||||
.button-primary:hover { color: var(--cyan-ink); filter: brightness(1.06); }
|
||||
.button-secondary { border-color: color-mix(in srgb, var(--cyan) 36%, var(--outline)); background: color-mix(in srgb, var(--cyan) 9%, var(--surface-high)); color: var(--text-strong); }
|
||||
.button-ghost { border-color: color-mix(in srgb, var(--outline) 62%, transparent); background: var(--surface-high); color: var(--text); }
|
||||
.button-link, .section-link { color: var(--cyan-dim); }
|
||||
.button-danger { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 14%, var(--surface-high)); color: var(--coral); }
|
||||
.button-block { width: 100%; }
|
||||
.button[disabled] { cursor: not-allowed; opacity: .48; filter: grayscale(.5); }
|
||||
.icon-button { display: inline-grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); }
|
||||
.icon-button:hover { border-color: color-mix(in srgb, var(--outline) 50%, transparent); background: var(--surface-high); color: var(--text-strong); }
|
||||
.avatar { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border: 1px solid var(--outline); border-radius: 50%; background: var(--surface-highest); color: var(--text-strong); font: 700 12px var(--font-mono); }
|
||||
.avatar-small { width: 32px; height: 32px; }
|
||||
.command-search { display: flex; width: min(560px, 62vw); min-height: 42px; align-items: center; gap: 10px; padding: 0 11px; border: 1px solid color-mix(in srgb, var(--outline) 56%, transparent); border-radius: var(--radius-sm); background: var(--surface-low); }
|
||||
.command-search input { min-height: 38px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
|
||||
.command-search kbd { padding: 2px 6px; border: 1px solid var(--outline); border-radius: 3px; color: var(--text-faint); font-size: 10px; }
|
||||
.system-live { display: flex; min-height: 38px; align-items: center; gap: 8px; padding: 0 10px; color: var(--emerald); font: 600 11px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
|
||||
.status-beacon { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--text-faint); }
|
||||
.status-beacon.is-live { background: var(--emerald); box-shadow: 0 0 0 4px color-mix(in srgb, var(--emerald) 10%, transparent), 0 0 12px color-mix(in srgb, var(--emerald) 50%, transparent); }
|
||||
.account-menu { position: relative; }
|
||||
.account-menu summary { display: flex; min-height: 42px; align-items: center; gap: 5px; list-style: none; }
|
||||
.account-menu summary::-webkit-details-marker { display: none; }
|
||||
.account-popover { position: absolute; top: calc(100% + 12px); right: 0; display: grid; width: 230px; gap: 5px; padding: 14px; border: 1px solid var(--outline); background: var(--surface-container); box-shadow: 0 16px 50px rgba(0,0,0,.28); }
|
||||
.account-popover strong, .account-popover small { display: block; }
|
||||
.account-popover a, .account-popover button { display: flex; width: 100%; min-height: 40px; align-items: center; gap: 8px; margin-top: 8px; padding: 8px; background: transparent; color: var(--text); text-align: left; }
|
||||
.account-popover a:hover, .account-popover button:hover { background: var(--surface-high); }
|
||||
.panel, .tonal-panel, .job-card, .result-card, .source-card, .health-card, .profile-card, .form-panel { border: 1px solid color-mix(in srgb, var(--outline) 48%, transparent); border-radius: var(--radius-md); background: var(--surface-container); }
|
||||
.panel, .tonal-panel, .health-card, .form-panel { padding: 20px; }
|
||||
.panel-subtle { background: var(--surface-low); }
|
||||
.strong-match { border-color: color-mix(in srgb, var(--cyan) 35%, var(--outline)); box-shadow: var(--shadow-signal); }
|
||||
.stat-card { position: relative; min-height: 128px; overflow: hidden; padding: 18px; border: 1px solid color-mix(in srgb, var(--outline) 48%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--surface-container) 92%, var(--cyan)), var(--surface-container)); }
|
||||
.stat-card::after { position: absolute; right: -28px; bottom: -45px; width: 100px; height: 100px; content: ""; border: 1px solid color-mix(in srgb, var(--cyan) 17%, transparent); border-radius: 50%; }
|
||||
.stat-card.signal { border-color: color-mix(in srgb, var(--cyan) 45%, var(--outline)); }
|
||||
.stat-card strong { display: block; margin: 13px 0 3px; color: var(--text-strong); font: 650 34px/1 var(--font-headline); }
|
||||
.stat-card small { font: 11px var(--font-mono); }
|
||||
.pill { display: inline-flex; min-height: 24px; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--outline); border-radius: var(--radius-xs); background: var(--surface-high); color: var(--text-muted); font: 600 10px/1 var(--font-mono); letter-spacing: .055em; text-transform: uppercase; }
|
||||
.pill-success, .pill-active, .pill-strong { border-color: color-mix(in srgb, var(--emerald) 44%, transparent); background: color-mix(in srgb, var(--emerald) 10%, var(--surface-high)); color: var(--emerald); }
|
||||
.pill-review, .pill-partial, .pill-possible { border-color: color-mix(in srgb, var(--amber) 44%, transparent); background: color-mix(in srgb, var(--amber) 9%, var(--surface-high)); color: var(--amber); }
|
||||
.pill-failed, .pill-hidden, .pill-error { border-color: color-mix(in srgb, var(--coral) 44%, transparent); background: color-mix(in srgb, var(--coral) 9%, var(--surface-high)); color: var(--coral); }
|
||||
.pill-it, .pill-new, .pill-active { color: var(--cyan-dim); }
|
||||
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
|
||||
.score-block { min-width: 76px; text-align: right; }
|
||||
.score-block strong { display: block; color: var(--cyan); font: 650 28px/1 var(--font-headline); }
|
||||
.score-block small { display: block; margin-top: 5px; font: 10px var(--font-mono); text-transform: uppercase; }
|
||||
.score-pending strong { color: var(--text-faint); }
|
||||
.job-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text-muted); font-size: 13px; }
|
||||
.job-meta span { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.job-meta .icon { width: 15px; height: 15px; }
|
||||
.signal-list, .compact-list { margin: 12px 0 0; padding-left: 20px; }
|
||||
.signal-list li::marker { color: var(--emerald); }
|
||||
.attention { padding: 9px 11px; border-left: 2px solid var(--amber); background: color-mix(in srgb, var(--amber) 6%, var(--surface-high)); color: var(--text-muted); font-size: 13px; }
|
||||
.empty-state { display: grid; min-height: 240px; place-items: center; align-content: center; padding: 32px; border: 1px dashed var(--outline); background: var(--surface-low); text-align: center; }
|
||||
.compact-empty { min-height: 180px; }
|
||||
.empty-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 14px; border: 1px solid var(--outline); color: var(--cyan); }
|
||||
.toast-stack { position: fixed; z-index: 100; top: 84px; right: 20px; display: grid; width: min(420px, calc(100vw - 40px)); gap: 8px; }
|
||||
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--outline)); background: color-mix(in srgb, var(--surface-container) 94%, transparent); color: var(--text-strong); box-shadow: 0 14px 40px rgba(0,0,0,.25); backdrop-filter: blur(14px); }
|
||||
.toast.error { border-color: color-mix(in srgb, var(--coral) 50%, var(--outline)); }
|
||||
.message { padding: 11px 13px; border-left: 2px solid var(--cyan); background: var(--surface-high); }
|
||||
.message.error { border-color: var(--coral); color: var(--coral); }
|
||||
.technical-log { max-height: 210px; overflow: auto; padding: 12px; background: var(--surface-lowest); color: var(--text-muted); font: 11px/1.6 var(--font-mono); }
|
||||
.disclosure-icon { transition: transform .18s; }
|
||||
[aria-expanded="true"] .disclosure-icon, details[open] > summary .disclosure-icon { transform: rotate(180deg); }
|
||||
.auth-card { width: min(460px, 100%); padding: 30px; border: 1px solid color-mix(in srgb, var(--cyan) 25%, var(--outline)); background: color-mix(in srgb, var(--surface-container) 94%, transparent); box-shadow: 0 30px 90px rgba(0,0,0,.3), var(--shadow-signal); }
|
||||
.auth-brand { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 26px; }
|
||||
.auth-brand .brand-radar, .auth-brand .brand-mark { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); }
|
||||
|
||||
/* Public demo state ------------------------------------------------------- */
|
||||
.demo-mode-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
padding: 11px 14px;
|
||||
border: 1px solid color-mix(in srgb, var(--cyan) 42%, var(--outline));
|
||||
border-radius: var(--radius-md);
|
||||
background: color-mix(in srgb, var(--cyan) 9%, var(--surface-low));
|
||||
color: var(--text);
|
||||
}
|
||||
.demo-mode-banner .icon { flex: 0 0 auto; color: var(--cyan); }
|
||||
.demo-mode-banner span { display: grid; gap: 2px; }
|
||||
.demo-mode-banner strong { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
|
||||
.demo-mode-banner small { color: var(--text-muted); }
|
||||
[data-demo-read-only="true"] [data-demo-disabled="true"] {
|
||||
cursor: not-allowed;
|
||||
filter: saturate(.45);
|
||||
opacity: .62;
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
.cockpit { min-height: 100vh; }
|
||||
.cockpit-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; width: var(--sidebar-width); flex-direction: column; border-right: 1px solid color-mix(in srgb, var(--outline) 38%, transparent); background: var(--surface-lowest); }
|
||||
.sidebar-heading { display: flex; min-height: var(--topbar-height); align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid color-mix(in srgb, var(--outline) 25%, transparent); }
|
||||
.cockpit-brand { display: flex; min-width: 0; align-items: center; gap: 11px; }
|
||||
.cockpit-brand strong { display: block; color: var(--text-strong); font: 700 18px/1.1 var(--font-headline); letter-spacing: -.025em; }
|
||||
.cockpit-brand small { display: block; margin-top: 5px; color: var(--text-faint); font: 500 10px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
|
||||
.brand-radar { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid color-mix(in srgb, var(--cyan) 50%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--cyan); box-shadow: var(--shadow-signal); }
|
||||
.cockpit-nav { flex: 1; overflow-y: auto; padding: 19px 12px; }
|
||||
.nav-caption { margin: 18px 12px 7px; color: var(--text-faint); font: 600 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
|
||||
.nav-caption:first-child { margin-top: 0; }
|
||||
.nav-item { position: relative; display: flex; min-height: 43px; align-items: center; gap: 13px; margin: 2px 0; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font: 500 13px/1.2 var(--font-mono); transition: color .15s, background .15s, transform .15s; }
|
||||
.nav-item:hover { transform: translateX(2px); background: var(--surface-low); color: var(--text-strong); }
|
||||
.nav-item.is-active { background: color-mix(in srgb, var(--cyan) 12%, var(--surface-container)); color: var(--text-strong); }
|
||||
.nav-item.is-active::after { position: absolute; inset: 0 -1px 0 auto; width: 2px; content: ""; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
|
||||
.nav-item.is-active .icon { color: var(--cyan); }
|
||||
.sidebar-footer { margin-top: auto; padding: 13px 18px 15px; border-top: 1px solid color-mix(in srgb, var(--outline) 28%, transparent); }
|
||||
.sidebar-radar-card { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; }
|
||||
.sidebar-radar-card strong, .sidebar-radar-card small { display: block; }
|
||||
.sidebar-radar-card strong { font-size: 12px; }
|
||||
.sidebar-radar-card small { margin-top: 3px; font: 10px/1.2 var(--font-mono); }
|
||||
.cockpit-workspace { min-height: 100vh; margin-left: var(--sidebar-width); }
|
||||
.cockpit-topbar { position: fixed; inset: 0 0 auto var(--sidebar-width); z-index: 40; display: flex; height: var(--topbar-height); align-items: center; padding: 0 var(--content-gutter); border-bottom: 1px solid color-mix(in srgb, var(--outline) 32%, transparent); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px); }
|
||||
.topbar-start, .topbar-actions { display: flex; min-width: 0; align-items: center; gap: 12px; }
|
||||
.topbar-start { flex: 1; }
|
||||
.cockpit-main { width: 100%; min-height: 100vh; padding: calc(var(--topbar-height) + 36px) var(--content-gutter) 56px; }
|
||||
.cockpit-main > * { width: 100%; max-width: 2240px; margin-right: auto; margin-left: auto; }
|
||||
.nav-scrim, .mobile-tabbar { display: none; }
|
||||
.auth-shell { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 12%, rgba(0,245,255,.09), transparent 27rem), var(--surface-lowest); }
|
||||
.page-header, .cockpit-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
|
||||
.page-header p:last-child, .cockpit-heading p:last-child { max-width: 780px; margin-bottom: 0; color: var(--text-muted); }
|
||||
.eyebrow, .section-kicker, .kpi-label { display: block; margin-bottom: 8px; color: var(--cyan-dim); font: 600 11px/1.1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
|
||||
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 30px 0 15px; }
|
||||
.section-heading p { margin-bottom: 0; color: var(--text-muted); }
|
||||
.page-actions, .job-actions, .form-actions, .stack-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
|
||||
.form-actions { justify-content: flex-end; margin-top: 22px; }
|
||||
.stack { display: grid; gap: 16px; }
|
||||
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
|
||||
.span-2 { grid-column: span 2; }
|
||||
.card-list { display: grid; gap: 12px; }
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
|
||||
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .65fr); align-items: start; gap: 22px; }
|
||||
.dashboard-rail { position: sticky; top: calc(var(--topbar-height) + 22px); display: grid; gap: 14px; }
|
||||
.results-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .38fr); align-items: start; gap: 20px; }
|
||||
.results-feed, .job-feed { display: grid; gap: 12px; }
|
||||
.definition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
||||
.health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
|
||||
@@ -0,0 +1,380 @@
|
||||
.radar-status { display: flex; min-height: 40px; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--outline) 50%, transparent); background: var(--surface-low); color: var(--text-muted); font: 11px var(--font-mono); }
|
||||
.rail-panel { padding: 18px; }
|
||||
.rail-list { display: grid; margin-top: 15px; }
|
||||
.rail-item, .rail-application { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid color-mix(in srgb, var(--outline) 34%, transparent); }
|
||||
.rail-application strong, .rail-application small { display: block; }
|
||||
.rail-application small { margin-top: 2px; }
|
||||
.feed-card, .result-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; }
|
||||
.job-card-main, .result-body { padding: 20px; }
|
||||
.job-card-head, .result-heading { display: flex; justify-content: space-between; gap: 18px; }
|
||||
.job-card h3, .result-card h2 { margin: 9px 0 5px; font-size: 19px; }
|
||||
.feed-card-actions, .result-actions { display: flex; min-width: 150px; flex-direction: column; justify-content: center; gap: 9px; padding: 16px; border-left: 1px solid color-mix(in srgb, var(--outline) 34%, transparent); background: var(--surface-low); }
|
||||
.result-accent { position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--cyan); opacity: .5; }
|
||||
.result-summary { margin: 12px 0 0; color: var(--text-muted); }
|
||||
.evidence-line { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 9px 10px; background: var(--surface-high); color: var(--text-muted); font-size: 13px; }
|
||||
.positive-evidence { border-left: 2px solid var(--emerald); }
|
||||
.concern-evidence { border-left: 2px solid var(--amber); }
|
||||
.filter-console { display: grid; grid-template-columns: minmax(220px, 1.8fr) repeat(5, minmax(125px, 1fr)) auto; align-items: end; gap: 10px; margin-bottom: 24px; padding: 15px; border: 1px solid color-mix(in srgb, var(--outline) 48%, transparent); background: var(--surface-low); }
|
||||
.input-with-icon { position: relative; display: block; }
|
||||
.input-with-icon .icon { position: absolute; z-index: 1; top: 12px; left: 11px; color: var(--text-faint); }
|
||||
.input-with-icon input { padding-left: 39px !important; }
|
||||
.results-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
|
||||
.view-indicator { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font: 11px var(--font-mono); }
|
||||
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
|
||||
.job-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 20px; }
|
||||
.detail-sidebar { position: sticky; top: calc(var(--topbar-height) + 20px); display: grid; gap: 13px; }
|
||||
.detail-hero { position: relative; overflow: hidden; padding: 26px; border: 1px solid color-mix(in srgb, var(--cyan) 25%, var(--outline)); background: linear-gradient(135deg, color-mix(in srgb, var(--surface-container) 90%, var(--cyan)), var(--surface-low)); }
|
||||
.detail-hero::after { position: absolute; top: -110px; right: -70px; width: 300px; height: 300px; content: ""; border: 1px solid color-mix(in srgb, var(--cyan) 14%, transparent); border-radius: 50%; box-shadow: inset 0 0 0 42px color-mix(in srgb, var(--cyan) 2%, transparent), inset 0 0 0 83px color-mix(in srgb, var(--cyan) 3%, transparent); }
|
||||
.detail-hero > * { position: relative; z-index: 1; }
|
||||
.detail-section { margin-top: 14px; padding: 22px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-container); }
|
||||
.sticky-actions { position: sticky; bottom: 16px; z-index: 20; display: flex; justify-content: center; gap: 8px; width: fit-content; max-width: calc(100vw - 32px); margin: 20px auto 0; padding: 8px; border: 1px solid var(--outline); background: color-mix(in srgb, var(--surface-lowest) 90%, transparent); backdrop-filter: blur(16px); }
|
||||
.pipeline-board { display: grid; grid-auto-columns: minmax(270px, 1fr); grid-auto-flow: column; gap: 12px; overflow-x: auto; padding-bottom: 12px; }
|
||||
.pipeline-column { min-height: 370px; padding: 12px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-low); }
|
||||
.pipeline-column-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 4px; font: 600 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
|
||||
.application-card { margin-bottom: 10px; padding: 15px; border: 1px solid color-mix(in srgb, var(--outline) 52%, transparent); background: var(--surface-container); }
|
||||
.application-card h3 { margin: 6px 0; }
|
||||
.profile-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 20px; }
|
||||
.profile-preview { position: sticky; top: calc(var(--topbar-height) + 20px); }
|
||||
.form-section { margin-bottom: 14px; padding: 20px; border: 1px solid color-mix(in srgb, var(--outline) 45%, transparent); background: var(--surface-container); }
|
||||
.grouped-choices, .grouped-choices > div { display: grid; gap: 8px; }
|
||||
.grouped-choices > div > label, ul.grouped-choices label { display: flex; min-height: 40px; grid-template-columns: auto 1fr; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--outline) 38%, transparent); background: var(--surface-low); font: 500 13px var(--font-body); text-transform: none; }
|
||||
.source-card { overflow: hidden; }
|
||||
.source-card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; }
|
||||
.source-identity { display: flex; min-width: 0; align-items: center; gap: 13px; }
|
||||
.source-identity h2 { margin: 0; font-size: 17px; }
|
||||
.source-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--outline) 65%, transparent); background: var(--surface-high); color: var(--cyan); }
|
||||
.source-actions { display: flex; align-items: center; gap: 10px; }
|
||||
.source-details { padding: 15px 18px; border-top: 1px solid color-mix(in srgb, var(--outline) 35%, transparent); background: var(--surface-low); }
|
||||
.source-details-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
|
||||
.source-alert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
||||
.source-alert-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--outline) 40%, transparent); background: var(--surface-low); }
|
||||
.import-disclosure { padding: 0; overflow: hidden; }
|
||||
.import-disclosure > summary { display: flex; align-items: center; gap: 12px; padding: 17px; list-style: none; }
|
||||
.import-disclosure > summary > span:nth-child(2) { display: grid; flex: 1; }
|
||||
.import-disclosure-body { padding: 18px; border-top: 1px solid color-mix(in srgb, var(--outline) 34%, transparent); }
|
||||
.import-layout, .mailbox-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
|
||||
.health-card dl, .definition-grid { margin: 14px 0 0; }
|
||||
.health-card dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
|
||||
.health-card dt, .definition-grid dt { color: var(--text-faint); font: 10px var(--font-mono); text-transform: uppercase; }
|
||||
.health-card dd, .definition-grid dd { margin: 3px 0 0; color: var(--text-strong); }
|
||||
.system-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 12px; }
|
||||
.system-readiness { display: flex; align-items: center; gap: 15px; padding: 21px; border: 1px solid color-mix(in srgb, var(--outline) 50%, transparent); background: var(--surface-container); }
|
||||
.system-readiness .status-beacon { margin-left: auto; }
|
||||
.system-counts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
|
||||
.system-counts article { padding: 14px; border: 1px solid color-mix(in srgb, var(--outline) 40%, transparent); background: var(--surface-low); }
|
||||
.system-counts strong { display: block; margin-top: 8px; font: 650 24px var(--font-headline); }
|
||||
.command-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.command-panel pre { margin: 6px 0 0; padding: 10px; background: var(--surface-lowest); color: var(--emerald); }
|
||||
.auth-card .stack label { color: var(--text); font-size: 13px; }
|
||||
.login-cockpit { display: grid; width: min(1120px, 100%); min-height: min(720px, calc(100vh - 48px)); grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); overflow: hidden; border: 1px solid color-mix(in srgb, var(--outline) 58%, transparent); background: var(--surface-low); box-shadow: 0 38px 120px rgba(0,0,0,.42), var(--shadow-signal); }
|
||||
.login-intelligence { position: relative; display: flex; overflow: hidden; flex-direction: column; justify-content: space-between; padding: clamp(28px, 4vw, 58px); border-right: 1px solid color-mix(in srgb, var(--cyan) 20%, var(--outline)); background: radial-gradient(circle at 72% 35%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 15rem), linear-gradient(145deg, color-mix(in srgb, var(--surface-container) 90%, var(--indigo)), var(--surface-lowest)); }
|
||||
.login-brandline { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
|
||||
.login-brandline strong, .login-brandline small { display: block; }
|
||||
.login-brandline strong { color: var(--text-strong); font: 700 19px var(--font-headline); }
|
||||
.login-brandline small { margin-top: 4px; font: 10px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
|
||||
.login-radar { position: absolute; top: 18%; right: -6%; width: min(31vw, 390px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent); border-radius: 50%; opacity: .75; }
|
||||
.login-radar::before, .login-radar::after, .login-radar span { position: absolute; inset: 15%; content: ""; border: 1px solid color-mix(in srgb, var(--cyan) 18%, transparent); border-radius: 50%; }
|
||||
.login-radar::after { inset: 31%; }
|
||||
.login-radar span:nth-child(1) { inset: 46% 0 auto 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent); border-radius: 0; transform: rotate(-24deg); transform-origin: center; }
|
||||
.login-radar span:nth-child(2) { inset: 0 auto 0 50%; border: 0; border-left: 1px solid color-mix(in srgb, var(--cyan) 18%, transparent); border-radius: 0; }
|
||||
.login-radar i { position: absolute; top: 38%; left: 32%; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cyan) 10%, transparent), 0 0 22px var(--cyan); }
|
||||
.login-intro { position: relative; z-index: 2; max-width: 570px; margin-top: auto; }
|
||||
.login-intro h1 { max-width: 560px; margin-bottom: 18px; font-size: clamp(35px, 4.3vw, 62px); line-height: .98; }
|
||||
.login-intro > p:last-child { max-width: 520px; color: var(--text-muted); font-size: 16px; line-height: 1.6; }
|
||||
.login-signals { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid color-mix(in srgb, var(--outline) 36%, transparent); list-style: none; color: var(--text-muted); font: 10px var(--font-mono); text-transform: uppercase; }
|
||||
.login-signals li { display: flex; align-items: center; gap: 7px; }
|
||||
.login-signals .icon { width: 14px; color: var(--emerald); }
|
||||
.login-cockpit .auth-card { align-self: center; width: auto; margin: clamp(24px, 4vw, 52px); padding: 0; border: 0; background: transparent; box-shadow: none; }
|
||||
.login-cockpit .auth-brand { margin-bottom: 30px; }
|
||||
.login-cockpit .auth-brand h2 { margin: 4px 0 6px; font-size: 30px; }
|
||||
.login-cockpit .stack { gap: 9px; margin-top: 22px; }
|
||||
.login-cockpit .stack input { margin-bottom: 9px; }
|
||||
.login-cockpit .stack .button { margin-top: 12px; }
|
||||
.auth-trust { display: flex; align-items: center; gap: 10px; margin-top: 30px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--outline) 38%, transparent); }
|
||||
.auth-trust strong, .auth-trust small { display: block; }
|
||||
.auth-trust strong { color: var(--text); font-size: 12px; }
|
||||
.auth-trust small { margin-top: 3px; font: 10px var(--font-mono); }
|
||||
.insight-hero { position: relative; display: grid; min-height: 210px; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 28px; overflow: hidden; margin-bottom: 12px; padding: 28px; border: 1px solid color-mix(in srgb, var(--cyan) 32%, var(--outline)); background: linear-gradient(135deg, color-mix(in srgb, var(--surface-container) 92%, var(--cyan)), var(--surface-low)); box-shadow: var(--shadow-signal); }
|
||||
.insight-hero::after { position: absolute; z-index: 0; right: -80px; bottom: -120px; width: 330px; height: 330px; content: ""; border: 1px solid color-mix(in srgb, var(--cyan) 10%, transparent); border-radius: 50%; }
|
||||
.insight-hero > * { position: relative; z-index: 1; }
|
||||
.insight-hero h2 { max-width: 800px; margin: 7px 0; font-size: clamp(23px, 2.2vw, 34px); }
|
||||
.insight-hero p { margin: 0; color: var(--text-muted); }
|
||||
.insight-orbit { position: relative; display: grid; width: 122px; height: 122px; place-items: center; border: 1px solid color-mix(in srgb, var(--cyan) 44%, var(--outline)); border-radius: 50%; box-shadow: inset 0 0 28px color-mix(in srgb, var(--cyan) 6%, transparent), 0 0 24px color-mix(in srgb, var(--cyan) 8%, transparent); }
|
||||
.insight-orbit::before, .insight-orbit span { position: absolute; content: ""; border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent); border-radius: 50%; }
|
||||
.insight-orbit::before { inset: 16px; }
|
||||
.insight-orbit span:nth-child(1) { inset: 42px; }
|
||||
.insight-orbit span:nth-child(2) { top: 19px; left: 76px; width: 6px; height: 6px; border: 0; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
|
||||
.insight-orbit strong { color: var(--cyan); font: 650 25px var(--font-headline); }
|
||||
.skill-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; border: solid color-mix(in srgb, var(--outline) 42%, transparent); border-width: 0 1px 1px; background: var(--surface-low); }
|
||||
.skill-metrics article { min-height: 104px; padding: 17px; border-right: 1px solid color-mix(in srgb, var(--outline) 32%, transparent); }
|
||||
.skill-metrics article:last-child { border-right: 0; }
|
||||
.skill-metrics span, .skill-metrics strong, .skill-metrics small { display: block; }
|
||||
.skill-metrics span { color: var(--text-faint); font: 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
|
||||
.skill-metrics strong { margin: 10px 0 3px; color: var(--text-strong); font: 650 27px var(--font-headline); }
|
||||
.skill-metrics small { font: 10px var(--font-mono); }
|
||||
.skill-metrics .metric-accent strong { color: var(--amber); }
|
||||
.skills-filter-console { grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto; }
|
||||
.skills-insight-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 16px; }
|
||||
.skill-demand-list, .skills-method-rail { display: grid; gap: 10px; }
|
||||
.skills-method-rail { position: sticky; top: calc(var(--topbar-height) + 18px); }
|
||||
.skill-demand-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; border: 1px solid color-mix(in srgb, var(--outline) 43%, transparent); background: var(--surface-container); }
|
||||
.skill-demand-card.is-gap { border-left: 2px solid var(--amber); }
|
||||
.skill-demand-main { padding: 18px; }
|
||||
.skill-demand-action { display: flex; min-width: 160px; align-items: center; padding: 16px; border-left: 1px solid color-mix(in srgb, var(--outline) 34%, transparent); background: var(--surface-low); }
|
||||
.skill-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
|
||||
.skill-card-heading h3 { margin: 4px 0 0; }
|
||||
.skill-category { color: var(--cyan-dim); font: 9px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
|
||||
.demand-meter { height: 5px; overflow: hidden; margin: 15px 0 8px; background: var(--surface-highest); }
|
||||
.demand-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--indigo), var(--cyan)); }
|
||||
.skill-demand-stats { display: flex; flex-wrap: wrap; gap: 5px 16px; color: var(--text-faint); font: 10px var(--font-mono); }
|
||||
.skill-demand-stats strong { color: var(--text); }
|
||||
.learning-focus { margin: 13px 0; padding: 10px 12px; border-left: 2px solid var(--amber); background: color-mix(in srgb, var(--amber) 5%, var(--surface-high)); color: var(--text-muted); }
|
||||
.learning-focus strong { display: block; margin-bottom: 4px; color: var(--amber); font: 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
|
||||
.skill-job-examples { display: grid; gap: 0; margin: 13px 0 0; padding: 0; list-style: none; }
|
||||
.skill-job-examples li { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid color-mix(in srgb, var(--outline) 28%, transparent); }
|
||||
.skill-job-examples a { color: var(--text); }
|
||||
.skill-job-examples span { color: var(--text-faint); font: 9px var(--font-mono); }
|
||||
.legend-list, .radar-steps { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
|
||||
.legend-list li, .radar-steps li { display: flex; align-items: flex-start; gap: 9px; }
|
||||
.legend-list strong, .legend-list small, .radar-steps strong, .radar-steps span { display: block; }
|
||||
.legend-list small, .radar-steps span { margin-top: 3px; }
|
||||
.legend-dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px color-mix(in srgb, var(--cyan) 50%, transparent); }
|
||||
.legend-dot.inferred { background: var(--indigo); box-shadow: 0 0 8px color-mix(in srgb, var(--indigo) 50%, transparent); }
|
||||
.radar-steps { counter-reset: radar-step; }
|
||||
.radar-steps li { counter-increment: radar-step; }
|
||||
.radar-steps li::before { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; content: counter(radar-step, decimal-leading-zero); border: 1px solid var(--outline); color: var(--cyan); font: 9px var(--font-mono); }
|
||||
.mini-timeline { display: grid; gap: 4px; }
|
||||
.mini-event { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--outline) 30%, transparent); }
|
||||
.mini-event strong, .mini-event small { display: block; }
|
||||
.mini-event strong { font-size: 12px; }
|
||||
.mini-event small { margin-top: 3px; font-size: 10px; }
|
||||
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -12px 0 18px; }
|
||||
.active-filters > a { margin-left: auto; color: var(--cyan-dim); font: 11px var(--font-mono); }
|
||||
.explorer-shell { display: grid; grid-template-columns: minmax(430px, .78fr) minmax(500px, 1.22fr); align-items: start; gap: 16px; }
|
||||
.explorer-list { display: grid; gap: 8px; }
|
||||
.explorer-card { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 24px; align-items: center; gap: 13px; min-height: 132px; padding: 15px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-container); transition: border-color .15s, background .15s, transform .15s; }
|
||||
.explorer-card:hover { transform: translateX(2px); border-color: var(--outline-strong); }
|
||||
.explorer-card.is-selected { border-color: color-mix(in srgb, var(--cyan) 48%, var(--outline)); background: color-mix(in srgb, var(--cyan) 5%, var(--surface-container)); box-shadow: var(--shadow-signal); }
|
||||
.explorer-card-link { position: absolute; z-index: 1; inset: 0; }
|
||||
.explorer-score { display: grid; width: 58px; height: 58px; place-items: center; align-content: center; border: 1px solid color-mix(in srgb, var(--cyan) 38%, var(--outline)); background: var(--surface-low); }
|
||||
.explorer-score strong { color: var(--cyan); font: 650 22px/1 var(--font-headline); }
|
||||
.explorer-score small { margin-top: 4px; font: 9px var(--font-mono); text-transform: uppercase; }
|
||||
.explorer-card-body { min-width: 0; }
|
||||
.explorer-card-body h3 { margin: 7px 0 2px; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.explorer-card-body p { margin-bottom: 7px; color: var(--text-muted); }
|
||||
.card-signal { display: block; overflow: hidden; margin-top: 8px; color: var(--emerald); text-overflow: ellipsis; white-space: nowrap; }
|
||||
.explorer-arrow { color: var(--text-faint); }
|
||||
.explorer-intelligence { position: sticky; top: calc(var(--topbar-height) + 18px); }
|
||||
.intelligence-panel { overflow: hidden; border: 1px solid color-mix(in srgb, var(--cyan) 24%, var(--outline)); background: var(--surface-low); box-shadow: var(--shadow-signal); }
|
||||
.intelligence-hero { position: relative; overflow: hidden; padding: 24px; border-bottom: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: linear-gradient(140deg, color-mix(in srgb, var(--surface-container) 88%, var(--cyan)), var(--surface-container)); }
|
||||
.intelligence-hero::after { position: absolute; right: -40px; bottom: -80px; width: 190px; height: 190px; content: ""; border: 1px solid color-mix(in srgb, var(--cyan) 14%, transparent); border-radius: 50%; box-shadow: inset 0 0 0 32px color-mix(in srgb, var(--cyan) 2%, transparent), inset 0 0 0 63px color-mix(in srgb, var(--cyan) 3%, transparent); }
|
||||
.intelligence-hero > * { position: relative; z-index: 1; }
|
||||
.intelligence-hero h2 { max-width: 620px; margin: 14px 0 4px; font-size: clamp(23px, 2vw, 32px); }
|
||||
.intelligence-score { display: flex; align-items: center; gap: 13px; margin-top: 21px; }
|
||||
.intelligence-score > strong { color: var(--cyan); font: 650 44px/1 var(--font-headline); }
|
||||
.intelligence-score span, .intelligence-score small { display: block; }
|
||||
.intelligence-score span { font-weight: 600; }
|
||||
.intelligence-score small { margin-top: 3px; font: 10px var(--font-mono); }
|
||||
.intel-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
|
||||
.intel-facts > div { min-height: 72px; padding: 13px 16px; border-right: 1px solid color-mix(in srgb, var(--outline) 28%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--outline) 28%, transparent); }
|
||||
.intel-facts dt { color: var(--text-faint); font: 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
|
||||
.intel-facts dd { margin: 5px 0 0; color: var(--text-strong); }
|
||||
.intel-signals { padding: 16px 19px; border-bottom: 1px solid color-mix(in srgb, var(--outline) 30%, transparent); }
|
||||
.intel-signals ul { margin: 9px 0 0; padding-left: 18px; }
|
||||
.intel-signals li::marker { color: var(--emerald); }
|
||||
.intel-signals.concerns li::marker { color: var(--amber); }
|
||||
.intelligence-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 16px; }
|
||||
.back-link { display: inline-flex; margin-bottom: 16px; color: var(--text-muted); font: 11px var(--font-mono); }
|
||||
.detail-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; min-height: 270px; }
|
||||
.detail-employer { color: var(--text-muted); font-size: 18px; }
|
||||
.hero-score { min-width: 170px; padding: 18px; border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--outline)); background: color-mix(in srgb, var(--surface-lowest) 82%, transparent); text-align: center; }
|
||||
.hero-score strong, .hero-score span, .hero-score small { display: block; }
|
||||
.hero-score strong { color: var(--cyan); font: 650 48px/1 var(--font-headline); }
|
||||
.hero-score span { margin-top: 8px; color: var(--text-strong); font-weight: 650; }
|
||||
.hero-score small { margin-top: 5px; font: 10px var(--font-mono); }
|
||||
.hero-score.is-pending strong { color: var(--text-faint); }
|
||||
.intelligence-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: solid color-mix(in srgb, var(--outline) 42%, transparent); border-width: 0 1px 1px; background: var(--surface-low); }
|
||||
.intelligence-strip > div { min-height: 92px; padding: 16px; border-right: 1px solid color-mix(in srgb, var(--outline) 32%, transparent); }
|
||||
.intelligence-strip > div:last-child { border-right: 0; }
|
||||
.intelligence-strip strong, .intelligence-strip small { display: block; }
|
||||
.intelligence-strip strong { margin: 8px 0 3px; color: var(--text-strong); font-size: 17px; }
|
||||
.score-components { display: grid; gap: 9px; margin: 18px 0; }
|
||||
.score-components > div { display: grid; grid-template-columns: 150px minmax(100px, 1fr) 36px; align-items: center; gap: 10px; }
|
||||
.score-components span { color: var(--text-muted); font: 11px var(--font-mono); }
|
||||
.progress { height: 5px; overflow: hidden; background: var(--surface-highest); }
|
||||
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-dim), var(--emerald)); }
|
||||
.signal-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
|
||||
.signal-columns > div { padding: 15px; background: var(--surface-low); }
|
||||
.skill-bands { display: grid; gap: 16px; margin: 16px 0; }
|
||||
.tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
|
||||
.prose { color: var(--text); line-height: 1.75; }
|
||||
.prose h2, .prose h3 { margin-top: 24px; }
|
||||
.source-list { display: grid; gap: 0; padding: 0; list-style: none; }
|
||||
.source-list li { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid color-mix(in srgb, var(--outline) 30%, transparent); }
|
||||
.source-list a { display: inline-flex; align-items: center; gap: 7px; color: var(--cyan-dim); }
|
||||
.source-list span { color: var(--text-muted); font: 10px var(--font-mono); }
|
||||
.provenance-details { margin-top: 15px; }
|
||||
.provenance-details summary { padding: 11px; border: 1px solid var(--outline); background: var(--surface-low); }
|
||||
.data-table-wrap { overflow-x: auto; }
|
||||
.data-table { width: 100%; border-collapse: collapse; }
|
||||
.data-table th, .data-table td { padding: 11px 13px; border-bottom: 1px solid color-mix(in srgb, var(--outline) 35%, transparent); text-align: left; vertical-align: top; }
|
||||
.data-table th { color: var(--text-faint); font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
|
||||
.version-list { display: grid; }
|
||||
.version-list article { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--outline) 30%, transparent); }
|
||||
.version-list time { color: var(--text-muted); font: 11px var(--font-mono); }
|
||||
.view-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--outline); background: var(--surface-low); }
|
||||
.view-toggle button { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; padding: 7px 10px; background: transparent; color: var(--text-muted); }
|
||||
.view-toggle button[aria-pressed="true"] { background: color-mix(in srgb, var(--cyan) 11%, var(--surface-high)); color: var(--text-strong); }
|
||||
.pipeline-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); gap: 8px; margin-bottom: 18px; }
|
||||
.pipeline-summary article { padding: 13px; border: 1px solid color-mix(in srgb, var(--outline) 40%, transparent); background: var(--surface-low); }
|
||||
.pipeline-summary strong { display: block; margin-top: 7px; color: var(--text-strong); font: 650 24px var(--font-headline); }
|
||||
.pipeline-empty { padding: 20px 8px; color: var(--text-faint); font: 11px var(--font-mono); text-align: center; }
|
||||
.application-note { margin: 12px 0; padding: 9px; border-left: 2px solid var(--indigo); background: var(--surface-low); color: var(--text-muted); font-size: 12px; }
|
||||
.status-form { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 14px; }
|
||||
.status-form select { min-height: 38px; padding-block: 7px; }
|
||||
.status-form .button { min-height: 38px; }
|
||||
.application-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--cyan-dim); font-size: 12px; }
|
||||
.application-link .icon { width: 15px; }
|
||||
.application-hero { min-height: 210px; }
|
||||
.application-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 16px; margin-top: 16px; }
|
||||
.application-timeline { position: sticky; top: calc(var(--topbar-height) + 18px); }
|
||||
.timeline-compact { display: grid; }
|
||||
.timeline-compact article { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--outline) 30%, transparent); }
|
||||
.timeline-icon { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--outline); color: var(--cyan); }
|
||||
.timeline-icon .icon { width: 16px; }
|
||||
.timeline-compact strong, .timeline-compact time, .timeline-compact small { display: block; }
|
||||
.timeline-compact time { margin-top: 2px; color: var(--text-faint); font: 10px var(--font-mono); }
|
||||
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; border-color: color-mix(in srgb, var(--danger) 25%, var(--outline)); }
|
||||
.form-section-heading { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
|
||||
.form-section-heading p { margin: 0; color: var(--text-muted); }
|
||||
.choice-field { min-width: 0; margin: 0; padding: 0; border: 0; }
|
||||
.choice-field legend { margin-bottom: 10px; color: var(--text-strong); font-weight: 650; }
|
||||
.choice-field > small { display: block; margin: 8px 0; }
|
||||
.choice-field ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
|
||||
.choice-field ul li label { display: flex; min-height: 42px; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--outline) 38%, transparent); background: var(--surface-low); color: var(--text); font: 500 13px var(--font-body); text-transform: none; }
|
||||
.choice-field ul li:has(input:checked) label { border-color: color-mix(in srgb, var(--cyan) 45%, var(--outline)); background: color-mix(in srgb, var(--cyan) 7%, var(--surface-low)); }
|
||||
.toggle-field { display: flex; min-height: 44px; align-items: center; align-content: center; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--outline) 45%, transparent); background: var(--surface-low); }
|
||||
.toggle-field > span { color: var(--text); font: 500 13px var(--font-body); letter-spacing: 0; text-transform: none; }
|
||||
.toggle-field small { width: 100%; }
|
||||
.config-disclosure { margin-top: 15px; border-top: 1px solid color-mix(in srgb, var(--outline) 35%, transparent); }
|
||||
.config-disclosure summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; color: var(--text-muted); }
|
||||
.preference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
|
||||
.profile-savebar { position: sticky; z-index: 15; bottom: 16px; padding: 9px; border: 1px solid var(--outline); background: color-mix(in srgb, var(--surface-lowest) 92%, transparent); backdrop-filter: blur(16px); }
|
||||
.profile-preview { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 14px; }
|
||||
.profile-preview > * { min-width: 0; }
|
||||
.preview-panel { border-color: color-mix(in srgb, var(--cyan) 34%, var(--outline)); box-shadow: var(--shadow-signal); }
|
||||
.preview-vacancy { margin: 15px 0; padding: 16px; border: 1px solid var(--outline); background: var(--surface-lowest); }
|
||||
.profile-index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
|
||||
.profile-index-card { overflow: hidden; padding: 18px; border: 1px solid color-mix(in srgb, var(--outline) 46%, transparent); background: var(--surface-container); }
|
||||
.profile-index-head { display: flex; align-items: center; justify-content: space-between; }
|
||||
.profile-index-card h2 { margin-top: 16px; }
|
||||
.profile-index-card .intel-facts { margin: 15px -18px; }
|
||||
.source-health-list { display: grid; gap: 9px; }
|
||||
.source-health-row { border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-container); }
|
||||
.source-health-summary { display: grid; grid-template-columns: minmax(290px, 1.3fr) minmax(360px, 1fr) auto; align-items: center; gap: 20px; padding: 15px 17px; }
|
||||
.source-health-summary h2 { margin: 0; font-size: 16px; }
|
||||
.source-health-summary p { margin: 4px 0 0; color: var(--text-muted); font: 11px var(--font-mono); }
|
||||
.source-health-metrics { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); }
|
||||
.source-health-metrics > div { padding: 5px 12px; border-left: 1px solid color-mix(in srgb, var(--outline) 30%, transparent); }
|
||||
.source-health-metrics span, .source-health-metrics strong { display: block; }
|
||||
.source-health-metrics span { color: var(--text-faint); font: 9px var(--font-mono); text-transform: uppercase; }
|
||||
.source-health-metrics strong { margin-top: 5px; font-size: 12px; }
|
||||
.source-health-details { display: grid; grid-template-columns: 1.3fr 1fr; gap: 15px; padding: 17px; border-top: 1px solid color-mix(in srgb, var(--outline) 35%, transparent); background: var(--surface-low); }
|
||||
.source-health-details .intel-facts { align-self: start; }
|
||||
.source-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; }
|
||||
.inline-bulk-action { display: flex; align-items: center; gap: 8px; }
|
||||
.source-management-grid { display: grid; grid-template-columns: 1.25fr .75fr; align-items: start; gap: 14px; margin-top: 30px; }
|
||||
.mailbox-list { display: grid; gap: 8px; margin-bottom: 14px; }
|
||||
.mailbox-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--outline) 38%, transparent); background: var(--surface-low); }
|
||||
.mailbox-row p { margin: 4px 0; color: var(--text-muted); }
|
||||
.import-stack { display: grid; gap: 13px; }
|
||||
.import-result { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--outline); }
|
||||
.watchlist-grid, .platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
|
||||
.watchlist-grid article, .platform-grid article { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid color-mix(in srgb, var(--outline) 36%, transparent); background: var(--surface-low); }
|
||||
.watchlist-grid article > div { min-width: 0; flex: 1; }
|
||||
.watchlist-grid h3, .watchlist-grid p { margin-bottom: 3px; }
|
||||
.watchlist-grid p { color: var(--text-muted); }
|
||||
.platform-catalog { margin-top: 14px; }
|
||||
.platform-catalog > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; }
|
||||
.platform-catalog > summary span { display: grid; }
|
||||
.platform-grid { margin-top: 18px; }
|
||||
.platform-grid article { align-items: flex-start; flex-direction: column; }
|
||||
.activity-filterbar { display: grid; grid-template-columns: minmax(260px, 1fr) 220px auto; align-items: end; gap: 10px; margin-bottom: 28px; padding: 14px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-low); }
|
||||
.activity-timeline { position: relative; display: grid; gap: 10px; padding-left: 62px; }
|
||||
.activity-timeline::before { position: absolute; inset: 0 auto 0 22px; width: 1px; content: ""; background: linear-gradient(var(--cyan), var(--outline) 70%, transparent); opacity: .45; }
|
||||
.activity-event { position: relative; }
|
||||
.activity-marker { position: absolute; top: 0; left: -62px; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--outline); border-radius: 10px; background: var(--surface-low); color: var(--text-muted); }
|
||||
.activity-marker.is-positive { border-color: color-mix(in srgb, var(--emerald) 45%, var(--outline)); color: var(--emerald); }
|
||||
.activity-marker.is-attention { border-color: color-mix(in srgb, var(--coral) 45%, var(--outline)); color: var(--coral); }
|
||||
.activity-card { padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--outline) 44%, transparent); border-radius: 12px; background: var(--surface-container); }
|
||||
.activity-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
|
||||
.activity-card-head h2 { margin: 6px 0 0; font-size: 18px; }
|
||||
.activity-card-head time { color: var(--text-faint); font: 11px var(--font-mono); }
|
||||
.activity-object { color: var(--text-muted); }
|
||||
.decision-note { margin: 10px 0; padding: 9px 12px; border-left: 2px solid var(--cyan); background: var(--surface-high); }
|
||||
.decision-note p { margin: 7px 0 0; }
|
||||
.employer-kpis { display: flex; gap: 8px; }
|
||||
.employer-kpis > div { min-width: 130px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-low); }
|
||||
.employer-kpis span, .employer-kpis strong { display: block; }
|
||||
.employer-kpis span { color: var(--text-faint); font: 9px var(--font-mono); text-transform: uppercase; }
|
||||
.employer-kpis strong { margin-top: 5px; color: var(--text-strong); font: 650 22px var(--font-headline); }
|
||||
.employer-radar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; align-items: start; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-container); }
|
||||
.employer-table-panel { min-width: 0; padding: 18px; }
|
||||
.employer-table td:first-child a { display: flex; align-items: center; gap: 10px; }
|
||||
.employer-table td:first-child strong, .employer-table td:first-child small { display: block; }
|
||||
.employer-table tr.is-selected { background: color-mix(in srgb, var(--cyan) 6%, var(--surface-high)); }
|
||||
.employer-mark { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--outline)); background: var(--surface-lowest); color: var(--cyan); font: 650 10px var(--font-mono); }
|
||||
.employer-mark.large { width: 54px; height: 54px; margin-bottom: 14px; font-size: 15px; }
|
||||
.employer-mark.hero-mark { width: 112px; height: 112px; font-size: 26px; }
|
||||
.signal-number { color: var(--emerald); }
|
||||
.employer-intelligence-rail { position: sticky; top: calc(var(--topbar-height) + 18px); overflow: hidden; border-left: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-low); }
|
||||
.employer-intel-header { padding: 22px; border-bottom: 1px solid color-mix(in srgb, var(--outline) 35%, transparent); }
|
||||
.employer-intel-header h2 { font-size: 26px; }
|
||||
.employer-intel-section { padding: 17px; border-top: 1px solid color-mix(in srgb, var(--outline) 35%, transparent); }
|
||||
.employer-job-link, .employer-source { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid color-mix(in srgb, var(--outline) 28%, transparent); }
|
||||
.employer-job-link strong, .employer-job-link small { display: block; }
|
||||
.employer-job-link b { color: var(--cyan); font: 650 15px var(--font-mono); }
|
||||
.employer-intelligence-rail > .button { margin: 17px; width: calc(100% - 34px); }
|
||||
.employer-detail-hero { min-height: 230px; }
|
||||
.employer-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 16px; }
|
||||
.employer-job-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
|
||||
.employer-job-grid article { padding: 15px; border: 1px solid color-mix(in srgb, var(--outline) 38%, transparent); background: var(--surface-low); }
|
||||
.employer-job-grid h3 { margin: 10px 0 4px; }
|
||||
.match-history { display: grid; gap: 7px; }
|
||||
.match-history > div { display: grid; grid-template-columns: 42px minmax(100px, 1fr) 40px minmax(160px, 1.3fr); align-items: center; gap: 9px; }
|
||||
.match-history span { color: var(--text-faint); font: 10px var(--font-mono); }
|
||||
.match-history i { position: relative; display: block; height: 5px; background: var(--surface-highest); }
|
||||
.match-history i::after { position: absolute; inset: 0 auto 0 0; width: var(--match); content: ""; background: linear-gradient(90deg, var(--cyan-dim), var(--emerald)); }
|
||||
.match-history strong { color: var(--cyan); font: 12px var(--font-mono); }
|
||||
.automation-status { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 22px; border: 1px solid var(--outline); background: var(--surface-container); }
|
||||
.automation-status.is-healthy { border-color: color-mix(in srgb, var(--emerald) 30%, var(--outline)); }
|
||||
.automation-status h2 { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
|
||||
.automation-status dl { display: flex; margin: 0; }
|
||||
.automation-status dl > div { min-width: 150px; padding: 0 16px; border-left: 1px solid var(--outline); }
|
||||
.automation-status dt { color: var(--text-faint); font: 9px var(--font-mono); text-transform: uppercase; }
|
||||
.automation-status dd { margin: 5px 0 0; }
|
||||
.automation-pipeline { display: grid; grid-template-columns: repeat(8, minmax(112px, 1fr)); gap: 4px; overflow-x: auto; margin: 28px 0 16px; padding-top: 28px; }
|
||||
.automation-pipeline > .section-kicker { position: absolute; margin-top: -27px; }
|
||||
.automation-pipeline article { position: relative; display: grid; min-height: 130px; place-items: center; align-content: center; padding: 11px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); border-bottom: 2px solid var(--cyan-dim); background: var(--surface-high); text-align: center; }
|
||||
.automation-pipeline article::after { position: absolute; z-index: 1; top: 50%; right: -8px; width: 12px; content: ""; border-top: 1px solid var(--cyan); }
|
||||
.automation-pipeline article:last-child::after { display: none; }
|
||||
.automation-pipeline .icon { color: var(--cyan); }
|
||||
.automation-pipeline strong { margin-top: 8px; font: 600 10px var(--font-mono); text-transform: uppercase; }
|
||||
.automation-pipeline b { margin-top: 7px; color: var(--text-strong); font: 650 20px var(--font-headline); }
|
||||
.automation-pipeline small { font: 9px var(--font-mono); }
|
||||
.pipeline-phase-index { position: absolute; top: 7px; left: 8px; color: var(--text-faint); font: 9px var(--font-mono); }
|
||||
.automation-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 17px 0 28px; }
|
||||
.automation-kpis article { min-height: 120px; padding: 17px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-container); }
|
||||
.automation-kpis strong, .automation-kpis small { display: block; }
|
||||
.automation-kpis strong { margin: 15px 0 4px; color: var(--text-strong); font: 650 32px var(--font-headline); }
|
||||
.automation-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .5fr); align-items: start; gap: 14px; }
|
||||
.automation-layout > * { min-width: 0; }
|
||||
.automation-source-table, .technical-log-panel { padding: 18px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-container); }
|
||||
.technical-log-panel { background: var(--surface-lowest); }
|
||||
.live-log { display: grid; max-height: 520px; overflow-y: auto; margin-bottom: 15px; }
|
||||
.live-log article { display: grid; grid-template-columns: 68px 62px 1fr; gap: 7px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--outline) 27%, transparent); font: 10px/1.5 var(--font-mono); }
|
||||
.live-log time { color: var(--text-faint); }
|
||||
.live-log strong { color: var(--indigo); }
|
||||
.live-log article.is-success strong { color: var(--emerald); }
|
||||
.live-log article.is-error strong { color: var(--coral); }
|
||||
.live-log small { grid-column: 2 / -1; }
|
||||
@@ -0,0 +1,244 @@
|
||||
/* VR-216: premium refinement layer — calm hierarchy over decorative chrome. */
|
||||
:root {
|
||||
--surface-raised: color-mix(in srgb, var(--surface-container) 96%, white);
|
||||
--divider: color-mix(in srgb, var(--outline) 29%, transparent);
|
||||
--divider-strong: color-mix(in srgb, var(--outline) 46%, transparent);
|
||||
--shadow-card: 0 18px 48px rgba(0, 0, 0, .13);
|
||||
--radius-sm: 7px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 18px;
|
||||
--content-frame: 1720px;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--surface-lowest: #e9f0f1;
|
||||
--surface: #f4f7f7;
|
||||
--surface-low: #edf2f2;
|
||||
--surface-container: #fbfdfd;
|
||||
--surface-high: #e3ebeb;
|
||||
--surface-highest: #d6e2e2;
|
||||
--outline: #aebfc0;
|
||||
--shadow-card: 0 18px 45px rgba(31, 54, 57, .08);
|
||||
}
|
||||
|
||||
body::before {
|
||||
background:
|
||||
radial-gradient(circle at 82% -8%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 33rem),
|
||||
radial-gradient(circle at 24% 108%, color-mix(in srgb, var(--indigo) 4%, transparent), transparent 38rem);
|
||||
}
|
||||
|
||||
.cockpit-sidebar,
|
||||
.cockpit-topbar,
|
||||
.sidebar-heading,
|
||||
.mobile-tabbar { border-color: var(--divider); }
|
||||
|
||||
.cockpit-sidebar { background: color-mix(in srgb, var(--surface-lowest) 97%, black); }
|
||||
.cockpit-main { padding-top: calc(var(--topbar-height) + 42px); }
|
||||
.cockpit-main > * { width: min(100%, var(--content-frame)); margin-inline: auto; }
|
||||
.topbar-inner { display: flex; width: min(100%, var(--content-frame)); height: 100%; margin-inline: auto; align-items: center; justify-content: space-between; gap: 20px; }
|
||||
.brand-radar { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
|
||||
.brand-lockup { display: grid; min-width: 0; gap: 4px; }
|
||||
.brand-lockup strong { color: var(--text-strong); font: 740 17px/1 var(--font-headline); letter-spacing: -.025em; }
|
||||
.cockpit-brand small { margin: 0; color: var(--text-faint); font-size: 8px; font-weight: 700; letter-spacing: .09em; }
|
||||
.developer-credit { display: flex; align-items: center; gap: 7px; color: var(--text-faint); font: 650 7px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
|
||||
.developer-credit img { display: block; width: 92px; height: auto; opacity: .82; }
|
||||
.sidebar-footer > .developer-credit { padding-top: 10px; border-top: 1px solid var(--divider); }
|
||||
.sidebar-footer > .developer-credit img { width: 82px; padding: 0; background: transparent; filter: brightness(0) invert(1); opacity: .58; }
|
||||
:root[data-theme="light"] .sidebar-footer > .developer-credit img { filter: saturate(.78); opacity: .76; }
|
||||
.workspace-identity { display: grid; min-width: 176px; padding-right: 18px; border-right: 1px solid var(--divider); line-height: 1.1; }
|
||||
.workspace-identity span { color: var(--text-strong); font-size: 14px; font-weight: 740; letter-spacing: -.015em; }
|
||||
.workspace-identity small { margin-top: 5px; color: var(--text-faint); font: 650 9px var(--font-body); letter-spacing: .075em; text-transform: uppercase; }
|
||||
|
||||
.nav-caption,
|
||||
.nav-item,
|
||||
.mobile-tabbar a,
|
||||
.nav-caption { font-weight: 700; letter-spacing: .11em; }
|
||||
.nav-item { min-height: 46px; border-radius: 9px; font-size: 14px; font-weight: 560; letter-spacing: -.005em; }
|
||||
.nav-item:hover { transform: none; background: color-mix(in srgb, var(--surface-high) 70%, transparent); }
|
||||
.nav-item.is-active { background: var(--surface-high); box-shadow: inset 0 0 0 1px var(--divider); }
|
||||
.nav-item.is-active::after { inset: 9px auto 9px 0; width: 3px; border-radius: 0 3px 3px 0; box-shadow: none; }
|
||||
.nav-item .icon { transition: color .16s ease, transform .16s ease; }
|
||||
.nav-item:hover .icon { transform: scale(1.06); color: var(--text-strong); }
|
||||
.nav-item.is-active span { font-weight: 680; }
|
||||
|
||||
.cockpit-heading { margin-bottom: 30px; }
|
||||
.cockpit-heading h1 { max-width: 900px; }
|
||||
.cockpit-heading > div:first-child > p:last-child { font-size: 15px; line-height: 1.65; }
|
||||
.eyebrow,
|
||||
.section-kicker,
|
||||
.kpi-label { color: var(--text-faint); font-family: var(--font-body); font-weight: 700; letter-spacing: .105em; }
|
||||
.section-kicker { margin-bottom: 7px; }
|
||||
.section-link { display: inline-flex; min-height: 38px; align-items: center; padding: 5px 2px; }
|
||||
|
||||
.button { min-height: 44px; border-radius: 9px; }
|
||||
.button-primary { box-shadow: 0 8px 24px color-mix(in srgb, var(--cyan) 13%, transparent); }
|
||||
.button-secondary,
|
||||
.button-ghost { border-color: var(--divider-strong); }
|
||||
.button-ghost { background: color-mix(in srgb, var(--surface-high) 78%, transparent); }
|
||||
.icon-button { border-radius: 9px; }
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
|
||||
select,
|
||||
textarea,
|
||||
.command-search { border-color: var(--divider-strong); border-radius: 9px; background: color-mix(in srgb, var(--surface-low) 90%, transparent); }
|
||||
.command-search { transition: width .2s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
|
||||
.command-search:focus-within { width: min(620px, 65vw); border-color: color-mix(in srgb, var(--cyan) 58%, var(--outline)); background: var(--surface-container); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 8%, transparent); }
|
||||
.field-label,
|
||||
label > span:first-child { font-family: var(--font-body); font-weight: 700; letter-spacing: .065em; }
|
||||
|
||||
.panel,
|
||||
.tonal-panel,
|
||||
.job-card,
|
||||
.result-card,
|
||||
.source-card,
|
||||
.health-card,
|
||||
.profile-card,
|
||||
.form-panel {
|
||||
border-color: var(--divider);
|
||||
background: var(--surface-raised);
|
||||
box-shadow: 0 1px 0 color-mix(in srgb, white 2%, transparent);
|
||||
}
|
||||
.strong-match { border-color: var(--divider); box-shadow: inset 3px 0 var(--cyan-dim), var(--shadow-card); }
|
||||
.panel-subtle { background: var(--surface-low); box-shadow: none; }
|
||||
|
||||
.stats-grid { gap: 14px; margin-bottom: 32px; }
|
||||
.stat-card {
|
||||
min-height: 122px;
|
||||
padding: 19px 20px;
|
||||
border: 0;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface-raised);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.stat-card::after { display: none; }
|
||||
.stat-card.signal { background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 10%, var(--surface-raised)), var(--surface-raised) 72%); box-shadow: inset 3px 0 var(--cyan), var(--shadow-card); }
|
||||
.stat-card strong { margin-top: 15px; font-size: 36px; }
|
||||
.stat-card small { font-family: var(--font-body); font-size: 12px; }
|
||||
|
||||
.dashboard-grid { gap: 28px; }
|
||||
.dashboard-rail { gap: 18px; }
|
||||
.rail-panel { border: 0; box-shadow: var(--shadow-card); }
|
||||
.rail-panel:not(.radar-summary) { background: color-mix(in srgb, var(--surface-raised) 76%, var(--surface-low)); box-shadow: none; }
|
||||
.job-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
|
||||
.job-card:hover { transform: translateY(-2px); border-color: var(--divider-strong); box-shadow: var(--shadow-card); }
|
||||
.dashboard-matches .job-feed { gap: 12px; }
|
||||
.dashboard-matches .feed-card { min-height: 0; }
|
||||
.dashboard-matches .job-card-main { padding: 18px 20px; }
|
||||
|
||||
.filter-console {
|
||||
grid-template-columns: minmax(280px, 1.8fr) repeat(5, minmax(126px, .72fr)) auto;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border: 0;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface-raised);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.active-filters { margin-bottom: 18px; }
|
||||
.explorer-shell { gap: 18px; }
|
||||
.explorer-card { border-color: var(--divider); border-radius: var(--radius-md); background: var(--surface-raised); }
|
||||
.explorer-card:hover { border-color: var(--divider-strong); background: color-mix(in srgb, var(--surface-raised) 96%, var(--cyan)); }
|
||||
.explorer-card.is-selected { border-color: var(--divider-strong); box-shadow: inset 3px 0 var(--cyan); }
|
||||
.explorer-intelligence { border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
|
||||
.intelligence-panel { border-color: var(--divider); }
|
||||
|
||||
.pipeline-summary { gap: 12px; }
|
||||
.pipeline-summary article { border: 0; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-card); }
|
||||
.pipeline-board { grid-auto-columns: minmax(300px, 1fr); gap: 16px; scroll-snap-type: x proximity; scrollbar-gutter: stable; }
|
||||
.pipeline-column { min-height: 420px; padding: 14px; border: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-low) 83%, transparent); scroll-snap-align: start; }
|
||||
.pipeline-column-header { position: sticky; top: 0; z-index: 1; padding: 4px 2px 12px; background: inherit; font-family: var(--font-body); }
|
||||
.application-card { border-color: var(--divider); border-radius: 10px; background: var(--surface-raised); box-shadow: 0 10px 28px rgba(0, 0, 0, .08); }
|
||||
.pipeline-empty { border-color: var(--divider); border-radius: 9px; }
|
||||
|
||||
.profile-index-grid { grid-template-columns: minmax(0, 1040px); }
|
||||
.profile-index-card { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .5fr); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-card); }
|
||||
.profile-index-card.strong-match { box-shadow: inset 3px 0 var(--emerald), var(--shadow-card); }
|
||||
.profile-index-content { min-width: 0; padding: 24px; }
|
||||
.profile-index-card .intel-facts { margin: 22px -24px; grid-template-columns: repeat(4, minmax(0, 1fr)); border-color: var(--divider); }
|
||||
.profile-index-card .page-actions { margin-top: 22px; }
|
||||
.profile-index-art { position: relative; display: grid; min-height: 320px; overflow: hidden; place-items: center; border-left: 1px solid var(--divider); background: linear-gradient(145deg, color-mix(in srgb, var(--cyan) 4%, var(--surface-low)), var(--surface-low)); }
|
||||
|
||||
.radar-illustration { --radar-x: 0px; --radar-y: 0px; position: relative; width: min(290px, 92%); aspect-ratio: 1; color: var(--cyan-dim); transform: translate(var(--radar-x), var(--radar-y)); transition: transform .32s cubic-bezier(.2,.8,.2,1); }
|
||||
.radar-illustration svg { position: relative; z-index: 1; overflow: visible; filter: drop-shadow(0 18px 36px color-mix(in srgb, var(--cyan) 8%, transparent)); }
|
||||
.radar-illustration-grid { stroke: color-mix(in srgb, var(--outline) 52%, transparent); stroke-width: 1; }
|
||||
.radar-illustration-sweep { transform-origin: 160px 160px; }
|
||||
.radar-illustration-signals circle { fill: var(--emerald); filter: drop-shadow(0 0 7px var(--emerald)); }
|
||||
.radar-illustration-core { fill: var(--cyan); filter: drop-shadow(0 0 10px var(--cyan)); }
|
||||
.radar-illustration-orbit { position: absolute; z-index: 0; inset: 13%; border: 1px solid color-mix(in srgb, var(--cyan) 15%, transparent); border-radius: 50%; }
|
||||
.radar-illustration-orbit::after { position: absolute; top: 12%; left: 12%; width: 7px; height: 7px; content: ""; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
|
||||
.radar-illustration .orbit-two { inset: 24%; transform: rotate(132deg); border-color: color-mix(in srgb, var(--emerald) 13%, transparent); }
|
||||
.illustrated-empty .radar-illustration { width: 180px; margin-bottom: 8px; }
|
||||
|
||||
.pill { border-color: transparent; border-radius: 999px; }
|
||||
.empty-state { border-color: var(--divider-strong); border-radius: var(--radius-md); }
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
:root { --content-frame: 2200px; }
|
||||
.explorer-shell { grid-template-columns: minmax(650px, 880px) minmax(760px, 1fr); }
|
||||
.automation-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); }
|
||||
}
|
||||
|
||||
@media (min-width: 2800px) {
|
||||
:root { --content-frame: 2480px; }
|
||||
.dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); }
|
||||
}
|
||||
|
||||
@media (max-width: 1450px) {
|
||||
.filter-console { grid-template-columns: minmax(250px, 1.5fr) repeat(3, minmax(135px, 1fr)); }
|
||||
.filter-console > :nth-last-child(-n+3) { grid-row: 2; }
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.filter-console { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.filter-console > * { grid-row: auto !important; }
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.cockpit-main { padding-top: calc(var(--topbar-height) + 30px); }
|
||||
.mobile-tabbar a { font-family: var(--font-body); font-weight: 650; }
|
||||
.filter-console { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 13px; }
|
||||
.filter-console .grow { grid-column: span 2; }
|
||||
.pipeline-board { width: 100%; grid-auto-columns: auto; grid-auto-flow: row; grid-template-columns: 1fr; overflow-x: visible; }
|
||||
.profile-index-card .intel-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.profile-index-card { grid-template-columns: 1fr; }
|
||||
.profile-index-art { min-height: 230px; border-top: 1px solid var(--divider); border-left: 0; }
|
||||
.profile-index-art .radar-illustration { width: 220px; }
|
||||
.command-search:focus-within { width: min(100%, 510px); }
|
||||
.topbar-inner { gap: 8px; }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.demo-mode-banner { align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 10px 12px; }
|
||||
.demo-mode-banner strong { font-size: .72rem; }
|
||||
.demo-mode-banner small { font-size: .78rem; line-height: 1.45; }
|
||||
.cockpit-heading { margin-bottom: 22px; }
|
||||
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 24px; }
|
||||
.stat-card { min-height: 92px; padding: 13px; }
|
||||
.stat-card strong { margin: 9px 0 2px; font-size: 28px; }
|
||||
.stat-card small { overflow: hidden; font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.kpi-label { min-height: 22px; margin-bottom: 0; font-size: 9px; line-height: 1.2; }
|
||||
.filter-console { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filter-console .grow { grid-column: 1 / -1; }
|
||||
.filter-console .button { grid-column: 1 / -1; }
|
||||
.profile-index-card { padding: 18px; }
|
||||
.profile-index-card .intel-facts { margin: 18px -18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
@keyframes premium-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.stats-grid > *, .dashboard-grid, .explorer-shell, .pipeline-board, .profile-index-grid { animation: premium-enter .34s ease-out both; }
|
||||
.radar-illustration-sweep { animation: radar-scan 7s linear infinite; }
|
||||
.radar-illustration-signals circle { animation: radar-signal 2.8s ease-in-out infinite alternate; }
|
||||
.radar-illustration-signals circle:nth-child(2) { animation-delay: -.9s; }
|
||||
.radar-illustration-signals circle:nth-child(3) { animation-delay: -1.7s; }
|
||||
.radar-illustration .orbit-one { animation: radar-orbit 12s linear infinite; }
|
||||
.radar-illustration .orbit-two { animation: radar-orbit 17s linear infinite reverse; }
|
||||
@keyframes radar-scan { to { transform: rotate(360deg); } }
|
||||
@keyframes radar-signal { to { opacity: .38; transform: scale(.72); transform-origin: center; } }
|
||||
@keyframes radar-orbit { to { transform: rotate(360deg); } }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
||||
.radar-illustration { transform: none !important; transition: none; }
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
@media (min-width: 1850px) {
|
||||
.results-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.results-feed .result-card { grid-template-columns: 1fr; }
|
||||
.results-feed .result-actions { min-width: 0; flex-direction: row; justify-content: flex-start; border-top: 1px solid color-mix(in srgb, var(--outline) 34%, transparent); border-left: 0; }
|
||||
.health-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 1450px) {
|
||||
.filter-console { grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(130px, 1fr)); }
|
||||
.filter-console > :nth-last-child(-n+3) { grid-row: 2; }
|
||||
.explorer-shell { grid-template-columns: minmax(390px, .9fr) minmax(430px, 1.1fr); }
|
||||
.source-health-summary { grid-template-columns: minmax(260px, 1fr) minmax(300px, .9fr) auto; }
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.dashboard-grid, .results-layout, .job-detail-grid, .profile-editor-layout { grid-template-columns: 1fr; }
|
||||
.dashboard-rail, .detail-sidebar, .profile-preview { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filter-console { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.filter-console > * { grid-row: auto !important; }
|
||||
.explorer-shell { grid-template-columns: 1fr; }
|
||||
.explorer-intelligence { position: static; }
|
||||
.application-editor-grid, .source-management-grid { grid-template-columns: 1fr; }
|
||||
.application-timeline { position: static; }
|
||||
.profile-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.source-health-summary { grid-template-columns: 1fr auto; }
|
||||
.source-health-metrics { grid-column: 1 / -1; grid-row: 2; }
|
||||
.watchlist-grid, .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.employer-radar-layout, .employer-detail-grid, .automation-layout { grid-template-columns: 1fr; }
|
||||
.employer-intelligence-rail { position: static; border-top: 1px solid var(--outline); border-left: 0; }
|
||||
.automation-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.skills-insight-layout { grid-template-columns: 1fr; }
|
||||
.skills-method-rail { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
:root { --content-gutter: 16px; --topbar-height: 64px; }
|
||||
.mobile-only { display: inline-grid; }
|
||||
.desktop-label { display: none !important; }
|
||||
.cockpit-sidebar { width: min(296px, 86vw); transform: translateX(-102%); transition: transform .2s ease; }
|
||||
.nav-open .cockpit-sidebar { transform: translateX(0); }
|
||||
.cockpit-workspace { margin-left: 0; }
|
||||
.cockpit-topbar { left: 0; padding: 0 14px; }
|
||||
.nav-scrim { position: fixed; z-index: 45; inset: 0; display: block; visibility: hidden; background: rgba(2,7,17,.7); opacity: 0; transition: opacity .2s, visibility .2s; }
|
||||
.nav-open .nav-scrim { visibility: visible; opacity: 1; }
|
||||
.command-search { width: min(100%, 510px); }
|
||||
.cockpit-main { padding-bottom: 92px; }
|
||||
.mobile-tabbar { position: fixed; z-index: 38; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--outline); background: color-mix(in srgb, var(--surface-lowest) 94%, transparent); backdrop-filter: blur(18px); }
|
||||
.mobile-tabbar a { display: grid; min-height: 66px; place-items: center; align-content: center; gap: 4px; color: var(--text-faint); font: 10px var(--font-mono); }
|
||||
.mobile-tabbar a.is-active { color: var(--cyan); }
|
||||
.mobile-tabbar .icon { width: 19px; height: 19px; }
|
||||
.pipeline-board { width: 100%; grid-auto-columns: auto; grid-auto-flow: row; grid-template-columns: 1fr; overflow-x: visible; }
|
||||
.pipeline-column { min-height: 0; }
|
||||
.page-header, .cockpit-heading, .section-heading { align-items: flex-start; flex-direction: column; }
|
||||
.page-header { margin-bottom: 20px; }
|
||||
.form-grid, .source-details-grid, .import-layout, .mailbox-form-grid, .system-hero { grid-template-columns: 1fr; }
|
||||
.span-2 { grid-column: auto; }
|
||||
.filter-console { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filter-console .grow { grid-column: span 2; }
|
||||
.dashboard-rail, .detail-sidebar, .profile-preview { grid-template-columns: 1fr; }
|
||||
.source-alert-grid { grid-template-columns: 1fr; }
|
||||
.feed-card, .result-card { grid-template-columns: 1fr; }
|
||||
.feed-card-actions, .result-actions { min-width: 0; flex-direction: row; justify-content: flex-start; border-top: 1px solid color-mix(in srgb, var(--outline) 34%, transparent); border-left: 0; }
|
||||
.detail-hero { align-items: flex-start; flex-direction: column; min-height: 0; }
|
||||
.hero-score { min-width: 0; width: 100%; text-align: left; }
|
||||
.intelligence-strip { grid-template-columns: repeat(2, 1fr); }
|
||||
.preference-grid, .source-health-details { grid-template-columns: 1fr; }
|
||||
.automation-status { align-items: flex-start; flex-direction: column; }
|
||||
.automation-status dl { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
|
||||
.automation-status dl > div { min-width: 0; border-top: 1px solid var(--outline); border-left: 0; padding: 11px 4px; }
|
||||
.employer-job-grid { grid-template-columns: 1fr; }
|
||||
.login-cockpit { min-height: 0; grid-template-columns: 1fr; }
|
||||
.login-intelligence { min-height: 360px; border-right: 0; border-bottom: 1px solid var(--outline); }
|
||||
.login-radar { width: 310px; }
|
||||
.login-cockpit .auth-card { margin: 34px; }
|
||||
.insight-hero { grid-template-columns: 96px minmax(0, 1fr); }
|
||||
.insight-hero .button { grid-column: 1 / -1; width: fit-content; }
|
||||
.insight-orbit { width: 92px; height: 92px; }
|
||||
.skill-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.skill-metrics article:nth-child(2) { border-right: 0; }
|
||||
.skill-metrics article:nth-child(-n+2) { border-bottom: 1px solid color-mix(in srgb, var(--outline) 32%, transparent); }
|
||||
.skills-method-rail { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
h1 { font-size: 27px; }
|
||||
.cockpit-main { padding-top: calc(var(--topbar-height) + 24px); }
|
||||
.command-search kbd, .system-live { display: none; }
|
||||
.topbar-actions { gap: 3px; }
|
||||
.stats-grid, .health-grid, .filter-console, .command-panel, .system-counts { grid-template-columns: 1fr; }
|
||||
.filter-console .grow { grid-column: auto; }
|
||||
[data-demo-read-only="true"] button[data-demo-disabled="true"] { display: none; }
|
||||
.stat-card { min-height: 105px; }
|
||||
.job-card-main, .result-body, .panel, .tonal-panel, .health-card, .form-panel, .form-section, .detail-section { padding: 16px; }
|
||||
.job-card-head, .result-heading { align-items: flex-start; flex-direction: column; }
|
||||
.score-block { min-width: 0; text-align: left; }
|
||||
.source-card-head, .source-alert-card { align-items: flex-start; flex-direction: column; }
|
||||
.source-actions { width: 100%; justify-content: space-between; }
|
||||
.page-actions, .job-actions, .form-actions { width: 100%; }
|
||||
.page-actions .button, .form-actions .button { flex: 1; }
|
||||
.sticky-actions { bottom: 76px; width: 100%; overflow-x: auto; justify-content: flex-start; }
|
||||
.explorer-card { grid-template-columns: 54px minmax(0, 1fr); padding: 12px; }
|
||||
.explorer-score { width: 50px; height: 50px; }
|
||||
.explorer-arrow { display: none; }
|
||||
.intelligence-actions, .intel-facts, .signal-columns, .intelligence-strip { grid-template-columns: 1fr; }
|
||||
.score-components > div { grid-template-columns: 100px minmax(70px, 1fr) 30px; }
|
||||
.source-list li, .version-list article { align-items: flex-start; grid-template-columns: 1fr; flex-direction: column; padding: 11px 0; }
|
||||
.pipeline-summary, .choice-field ul, .profile-index-grid, .watchlist-grid, .platform-grid { grid-template-columns: 1fr; }
|
||||
.source-health-summary { grid-template-columns: 1fr; align-items: start; }
|
||||
.source-health-metrics { grid-column: auto; grid-row: auto; grid-template-columns: 1fr; width: 100%; }
|
||||
.source-health-metrics > div { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid color-mix(in srgb, var(--outline) 30%, transparent); border-left: 0; }
|
||||
.source-health-metrics strong { margin-top: 0; }
|
||||
.mailbox-row, .danger-zone { align-items: flex-start; flex-direction: column; }
|
||||
.activity-filterbar, .automation-kpis { grid-template-columns: 1fr; }
|
||||
.activity-timeline { padding-left: 52px; }
|
||||
.activity-timeline::before { left: 20px; }
|
||||
.activity-marker { left: -52px; width: 42px; height: 42px; }
|
||||
.activity-card-head { flex-direction: column; gap: 8px; }
|
||||
.employer-kpis { width: 100%; }
|
||||
.employer-kpis > div { min-width: 0; flex: 1; }
|
||||
.automation-status dl { grid-template-columns: 1fr; }
|
||||
.match-history > div { grid-template-columns: 38px 1fr 36px; }
|
||||
.match-history a { grid-column: 1 / -1; }
|
||||
.auth-shell { padding: 14px; }
|
||||
.auth-card { padding: 22px 18px; }
|
||||
.login-intelligence { min-height: 310px; padding: 24px; }
|
||||
.login-intro h1 { font-size: 34px; }
|
||||
.login-signals { display: none; }
|
||||
.login-radar { top: 3%; right: -34%; width: 290px; }
|
||||
.login-cockpit .auth-card { margin: 28px 20px; padding: 0; }
|
||||
.insight-hero { min-height: 0; grid-template-columns: 1fr; padding: 20px; }
|
||||
.insight-orbit { width: 82px; height: 82px; }
|
||||
.skill-metrics { grid-template-columns: 1fr; }
|
||||
.skill-metrics article { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--outline) 32%, transparent); }
|
||||
.skill-demand-card { grid-template-columns: 1fr; }
|
||||
.skill-demand-action { min-width: 0; border-top: 1px solid color-mix(in srgb, var(--outline) 34%, transparent); border-left: 0; }
|
||||
.skill-demand-action .button { width: 100%; }
|
||||
.skill-card-heading, .skill-job-examples li { align-items: flex-start; flex-direction: column; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--surface-lowest: #060e20;
|
||||
--surface: #0b1326;
|
||||
--surface-low: #131b2e;
|
||||
--surface-container: #171f33;
|
||||
--surface-high: #222a3d;
|
||||
--surface-highest: #2d3449;
|
||||
--surface-bright: #31394d;
|
||||
--text: #dae2fd;
|
||||
--text-strong: #e9feff;
|
||||
--text-muted: #aababb;
|
||||
--text-faint: #7f9095;
|
||||
--outline: #3a494a;
|
||||
--outline-strong: #526365;
|
||||
--cyan: #00f5ff;
|
||||
--cyan-dim: #00dce5;
|
||||
--cyan-ink: #002b2e;
|
||||
--emerald: #4edea3;
|
||||
--emerald-dim: #00a572;
|
||||
--indigo: #8f91ff;
|
||||
--amber: #f5c451;
|
||||
--coral: #ffb4ab;
|
||||
--danger: #ff7b72;
|
||||
--sidebar-width: 256px;
|
||||
--topbar-height: 72px;
|
||||
--content-gutter: clamp(20px, 2.2vw, 40px);
|
||||
--radius-xs: 2px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--shadow-signal: 0 0 24px rgba(0, 245, 255, 0.08);
|
||||
--font-headline: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", sans-serif;
|
||||
--font-body: "Segoe UI Variable Text", "Aptos", "Segoe UI", sans-serif;
|
||||
--font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
--surface-lowest: #e6eff2;
|
||||
--surface: #f5f9fa;
|
||||
--surface-low: #edf4f5;
|
||||
--surface-container: #ffffff;
|
||||
--surface-high: #e3edef;
|
||||
--surface-highest: #d6e3e5;
|
||||
--surface-bright: #cadadd;
|
||||
--text: #12262b;
|
||||
--text-strong: #07181d;
|
||||
--text-muted: #475e63;
|
||||
--text-faint: #64787d;
|
||||
--outline: #b7c9cc;
|
||||
--outline-strong: #82999d;
|
||||
--cyan: #007c83;
|
||||
--cyan-dim: #006b71;
|
||||
--cyan-ink: #f2ffff;
|
||||
--emerald: #087a55;
|
||||
--emerald-dim: #d6f5e7;
|
||||
--indigo: #5558bf;
|
||||
--amber: #8a5b00;
|
||||
--coral: #a7332d;
|
||||
--danger: #a82d27;
|
||||
--shadow-signal: 0 0 20px rgba(0, 124, 131, 0.1);
|
||||
}
|
||||
Reference in new issue
Block a user