/* ============================================================ * Job4Fit "Indigo Storm" tokens — NEW themes only. * Source of truth: prototype2/tokens/{colors,typography,effects}.css * Scoped to data-theme so the classic :root tokens in index.css * (including --radius-* / --shadow-*) stay untouched in classic. * ============================================================ */ :root[data-theme='new-light'], :root[data-theme='new-dark'] { /* ---------- PRIMARY — indigo (brand) ---------- */ --primary-50: #eef2ff; --primary-100: #e0e7ff; --primary-200: #c7d2fe; --primary-300: #a5b4fc; --primary-400: #818cf8; --primary-500: #4338ca; --primary-600: #3730a3; --primary-700: #312e81; --primary-500-rgb: 67, 56, 202; /* ---------- ACCENT — electric violet ---------- */ --accent-50: #f5f3ff; --accent-100: #ede9fe; --accent-500: #7c3aed; --accent-600: #6d28d9; /* ---------- NEUTRAL — cool slate ---------- */ --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0; --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; /* ---------- SEMANTIC ---------- */ --success-50: #ecfdf5; --success-100: #d1fae5; --success-400: #10b981; --success-500: #059669; --success-700: #047857; --warning-50: #fefce8; --warning-100: #fef9c3; --warning-400: #facc15; --warning-500: #eab308; --warning-600: #ca8a04; --warning-700: #a16207; --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-400: #f87171; --danger-500: #dc2626; --danger-600: #b91c1c; --info-50: #eff6ff; --info-100: #dbeafe; --info-500: #1d4ed8; /* ---------- SCORE BANDS (≥80 / ≥60 / ≥40 / <40) ---------- * Servono anche da colore del TESTO (scoreColor() in 7 pagine, es. "67/100" * a 13px), non solo da tratto del gauge: su bianco i valori originali stavano * a 3.77 / 2.28 / 1.92 : 1, sotto la soglia 4.5:1. Ora 5.48 / 5.02 / 4.92 / 4.83. */ --score-excellent: #047857; --score-good: #15803d; --score-fair: #a16207; --score-poor: #dc2626; /* ---------- SURFACES / TEXT / BORDERS ---------- */ --surface-page: var(--neutral-50); --surface-card: #ffffff; --surface-sunken: var(--neutral-100); --surface-overlay: rgba(15, 23, 42, 0.5); /* Dark chrome (footer, cookie banner, dark CTAs) — stays dark in BOTH new * themes so its light text keeps contrast. Not overridden in the dark block. */ --surface-inverse: #0f172a; --surface-inverse-raised: #1e293b; --text-heading: var(--neutral-900); --text-body: var(--neutral-600); --text-strong: var(--neutral-700); --text-muted: var(--neutral-500); --text-placeholder: var(--neutral-400); --text-link: var(--primary-500); --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-focus: var(--primary-400); /* ---------- BRAND ---------- */ --gradient-brand: linear-gradient(135deg, #312e81 0%, #4338ca 100%); --ring-primary: 0 0 0 3px rgba(67, 56, 202, 0.3); /* ---------- TYPOGRAPHY ---------- */ --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Voce display: solo hero e h1/h2. Il body resta sul system stack. */ --font-family-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace; --letter-spacing-h1: -0.04em; --letter-spacing-h2: -0.03em; --letter-spacing-h3: -0.02em; --letter-spacing-overline: 0.08em; /* ---------- EFFECTS (override classic --radius/--shadow under new themes) ---------- */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06); --shadow-md: 0 1px 3px 0 rgba(15, 23, 42, 0.1), 0 1px 2px -1px rgba(15, 23, 42, 0.06); --shadow-lg: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.06); /* ---------- CHART HOOKS (consumed via var() in JS inline styles) ---------- */ --chart-grid: var(--neutral-100); /* ---------- LEGACY BRIDGE OVERRIDES ---------- * Components using the token-bridge utilities (bg-primary, text-success, * text-danger, …) read these --color-* vars from index.css. Re-point them * to the Indigo Storm scales so those components also shift in new themes. * They reference the scaled vars above, so they auto-resolve per light/dark. */ --color-primary: var(--primary-500); --color-primary-dark: var(--primary-600); --color-primary-light: var(--primary-100); --color-success: var(--success-500); --color-danger: var(--danger-500); --color-warning: var(--warning-600); /* Base scale tokens consumed by newproposal.css (ported from prototype2/tokens) */ --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem; --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-8: 2rem; --spacing-10: 2.5rem; --spacing-12: 3rem; --spacing-16: 4rem; --space-card-sm: var(--spacing-4); --space-card-md: var(--spacing-6); --space-card-lg: var(--spacing-8); --container-max: 72rem; --font-size-h1: clamp(2.5rem, 5vw, 4rem); --font-size-h2: 2rem; --font-size-h3: 1.5rem; --font-size-h4: 1.25rem; --font-size-h5: 1.125rem; --font-size-body-lg: 1.125rem; /* body era 0.9375rem (15px), sotto il minimo di leggibilita'. E con body-lg a 1rem la scala aveva 16/15/14 in due pixel l'uno dall'altro, che non e' una scala ma rumore: tre taglie che nessuno distingue. Ora 18/16/14/13/12. */ --font-size-body: 1rem; --font-size-body-sm: 0.875rem; --font-size-caption: 0.8125rem; --font-size-overline: 0.75rem; --font-weight-black: 900; --font-weight-extrabold: 800; --font-weight-bold: 700; --font-weight-semibold: 600; --font-weight-medium: 500; --font-weight-normal: 400; --letter-spacing-h4: -0.01em; --line-height-heading: 1.15; --line-height-body: 1.6; --line-height-caption: 1.4; --radius-2xl: 1.5rem; --radius-full: 9999px; --shadow-xl: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.06); --transition-fast: 150ms ease-in-out; --transition-normal: 200ms ease-in-out; --z-sticky: 200; } /* ============================================================ * DARK deltas — same variables, inverted slate, lifted tints. * ============================================================ */ :root[data-theme='new-dark'] { --shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.40); --surface-page: #0b1120; --surface-card: #111827; --surface-sunken: #0f172a; --surface-overlay: rgba(15, 23, 42, 0.75); --neutral-50: #0f172a; --neutral-100: #1e293b; --neutral-200: #334155; --neutral-300: #475569; --neutral-400: #64748b; --neutral-500: #94a3b8; --neutral-600: #cbd5e1; --neutral-700: #e2e8f0; --neutral-800: #f1f5f9; --neutral-900: #f8fafc; --primary-50: #1e1b4b; --primary-100: #312e81; --primary-200: #3730a3; --primary-300: #4f46e5; --primary-400: #6366f1; --primary-500: #818cf8; --primary-600: #6366f1; --primary-700: #a5b4fc; --primary-500-rgb: 129, 140, 248; --accent-50: #2e1065; --accent-100: #4c1d95; --accent-500: #a78bfa; --accent-600: #c4b5fd; --success-50: #064e3b; --success-100: #065f46; --success-400: #10b981; --success-500: #34d399; --success-700: #6ee7b7; --warning-50: #78350f; --warning-100: #92400e; --warning-400: #f59e0b; --warning-500: #fbbf24; --warning-600: #fbbf24; --warning-700: #fcd34d; --danger-50: #7f1d1d; --danger-100: #991b1b; --danger-400: #ef4444; --danger-500: #f87171; --danger-600: #ef4444; --info-50: #1e3a8a; --info-100: #1e40af; --info-500: #60a5fa; /* Il blocco light li scurisce per la leggibilità su bianco: qui servono chiari. */ --score-excellent: #34d399; --score-good: #4ade80; --score-fair: #fbbf24; --score-poor: #f87171; --ring-primary: 0 0 0 3px rgba(129, 140, 248, 0.45); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4); } /* ============================================================ * Job4Fit newproposal component layer — ported from * prototype2/newproposal/app.css, every selector scoped under * html.theme-new so it NEVER affects the classic theme. * Regenerate with /tmp/scope-css.js if the source changes. * ============================================================ */ /* ============================================================ * Job4Fit — New Proposal: app component layer * Static recreation of the React app re-skinned with the * prototype2 design system. Tokens come from ../styles.css. * ============================================================ */ html.theme-new *, html.theme-new *::before, html.theme-new *::after { box-sizing: border-box; } html.theme-new { scroll-behavior: smooth; } html.theme-new body { margin: 0; font-family: var(--font-family-base); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; transition: background var(--transition-normal), color var(--transition-normal); } /* ---------- Typography ---------- */ html.theme-new h1, html.theme-new h2, html.theme-new h3, html.theme-new h4, html.theme-new h5 { color: var(--text-heading); line-height: var(--line-height-heading); margin: 0 0 0.5em; } html.theme-new h1 { font-family: var(--font-family-display); font-size: 2.25rem; font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-h1); } html.theme-new h2 { font-family: var(--font-family-display); font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-h2); } html.theme-new h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-h3); } html.theme-new h4 { font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-h4); } html.theme-new h5 { font-size: var(--font-size-h5); font-weight: var(--font-weight-semibold); } html.theme-new p { margin: 0 0 1em; } html.theme-new a { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } html.theme-new a:hover { color: var(--primary-400); } html.theme-new strong { color: var(--text-strong); } html.theme-new .overline { /* Collisione di nome con l'utility Tailwind `overline` che index.css porta con sé: quella significa text-decoration-line: overline, e disegnava una riga sopra ognuna delle 51 etichette. Qui `.overline` è il nome di uno stile. */ text-decoration: none; font-size: var(--font-size-overline); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-overline); text-transform: uppercase; color: var(--text-muted); } html.theme-new .muted { color: var(--text-muted); } html.theme-new .small { font-size: var(--font-size-body-sm); } html.theme-new .caption { font-size: var(--font-size-caption); color: var(--text-muted); } html.theme-new .mono, html.theme-new code, html.theme-new pre { font-family: var(--font-family-mono); } /* ---------- Layout ---------- */ html.theme-new .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-6); } html.theme-new .page { padding: var(--spacing-10) 0 var(--spacing-16); animation: fadeInUp 300ms ease-out; } html.theme-new .section { margin-bottom: var(--spacing-8); } html.theme-new .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-6); } html.theme-new .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-6); } html.theme-new .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-6); } html.theme-new .row { display: flex; align-items: center; gap: var(--spacing-3); } html.theme-new .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); } html.theme-new .wrap { flex-wrap: wrap; } /* Single-line truncation for list titles. .min0 on the flex wrappers lets the text shrink. */ html.theme-new .ellip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-new .min0 { min-width: 0; } html.theme-new .stack-4 > * + * { margin-top: var(--spacing-4); } html.theme-new .stack-6 > * + * { margin-top: var(--spacing-6); } html.theme-new .stack-8 > * + * { margin-top: var(--spacing-8); } @media (max-width: 1023px) { html.theme-new .grid-4 { grid-template-columns: 1fr 1fr; } html.theme-new .grid-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { html.theme-new .grid-2, html.theme-new .grid-3, html.theme-new .grid-4 { grid-template-columns: 1fr; } } /* Job post detail: when the two columns collapse, the analysis (2nd column) comes first — otherwise verdict and metrics land below the full untruncated job description. */ @media (max-width: 640px) { html.theme-new .grid-2--insight-first > :first-child { order: 2; } } /* ---------- Navbar ---------- */ html.theme-new .navbar { position: sticky; top: 0; z-index: var(--z-sticky); height: 64px; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); } html.theme-new .navbar .container { max-width: 90rem; } html.theme-new .navbar-inner { height: 64px; display: flex; align-items: center; gap: var(--spacing-4); } html.theme-new .navbar .brand { display: flex; align-items: center; flex-shrink: 0; } html.theme-new .navbar .brand img { height: 28px; } html.theme-new .logo-light { display: block; } html.theme-new .logo-dark { display: none; } html.theme-new [data-theme="dark"] .logo-light { display: none; } html.theme-new [data-theme="dark"] .logo-dark { display: block; } html.theme-new .nav-links { display: flex; align-items: center; gap: var(--spacing-1); flex: 1; } html.theme-new .nav-links a { padding: 0.45rem 0.6rem; border-radius: var(--radius-md); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium); color: var(--neutral-600); white-space: nowrap; } html.theme-new .nav-links a:hover { background: var(--neutral-50); color: var(--primary-500); } html.theme-new .nav-links a.active { color: var(--primary-500); background: var(--primary-50); font-weight: var(--font-weight-semibold); } /* margin-left:auto tiene le azioni a destra anche sotto 1024px, dove .nav-links (flex:1) sparisce e senza spacer il cluster si incollerebbe al brand. */ html.theme-new .nav-actions { display: flex; align-items: center; gap: var(--spacing-2); margin-left: auto; } html.theme-new .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--neutral-500); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } html.theme-new .icon-btn:hover { background: var(--neutral-100); color: var(--primary-500); } html.theme-new #theme-toggle { width: auto; padding: 0 10px; gap: 6px; border: 1px solid var(--border-subtle); font-family: var(--font-family-base); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); } html.theme-new #theme-toggle .lucide { width: 16px; height: 16px; } html.theme-new .lang-switch { font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); color: var(--neutral-500); display: flex; gap: 2px; align-items: center; } html.theme-new .lang-switch span.on { color: var(--primary-500); } html.theme-new .avatar { width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--primary-100); color: var(--primary-700); display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); text-decoration: none; /* l'avatar ora è un link a /account */ } html.theme-new .hamburger { display: none; } @media (max-width: 1023px) { html.theme-new .nav-links { display: none; } html.theme-new .nav-links.open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 64px; left: 0; right: 0; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); padding: var(--spacing-3); box-shadow: var(--shadow-lg); } html.theme-new .hamburger { display: inline-flex; } } /* ---------- Footer ---------- */ html.theme-new .footer { border-top: 1px solid var(--border-subtle); background: var(--surface-card); margin-top: var(--spacing-16); } html.theme-new .footer-inner { padding: var(--spacing-8) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); flex-wrap: wrap; } html.theme-new .footer a { color: var(--neutral-500); font-size: var(--font-size-caption); margin-right: var(--spacing-4); } html.theme-new .footer a:hover { color: var(--primary-500); } /* ---------- Cards ---------- */ html.theme-new .card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-card-md); } html.theme-new .card--lg { padding: var(--space-card-lg); border-radius: var(--radius-xl); } html.theme-new .card--sm { padding: var(--space-card-sm); } html.theme-new .card--hover { transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); } html.theme-new .card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary-100); } /* Una card cliccabile raggiunta col tab deve dire dove sei: l'hover da solo non lo fa, * e su mobile l'hover non esiste proprio. */ html.theme-new .card--hover:focus-visible { outline: none; box-shadow: var(--ring-primary); border-color: var(--border-focus); } html.theme-new .card-title { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-1); } /* 4px only works when `.card-sub` follows and adds its own gap below. Without it the title sits on the content — worst case "Career Insights" 4px above an h5, reading as one blob. */ html.theme-new .card-title:not(:has(+ .card-sub)) { margin-bottom: var(--spacing-4); } html.theme-new .card-title h4, html.theme-new .card-title h3 { margin: 0; } html.theme-new .card-sub { font-size: var(--font-size-body-sm); color: var(--text-muted); margin-bottom: var(--spacing-5); } /* Pricing card: il nome del piano e' l'h2 della card (l'outline della pagina e' h1 -> h2 per piano), ma il prezzo resta l'elemento visivamente dominante. Serve una regola per tag perche' lo shim non porta le utility .text-* di Tailwind: su un heading vince sempre html.theme-new h2. */ html.theme-new .plan-card h2 { font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); } html.theme-new .plan-card .plan-price { font-size: var(--font-size-h2); font-weight: var(--font-weight-extrabold); color: var(--text-heading); line-height: var(--line-height-heading); } /* ---------- Buttons ---------- */ html.theme-new .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; font-family: var(--font-family-base); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); line-height: 1.2; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } html.theme-new .btn--primary { background: var(--primary-600); color: #fff; } html.theme-new .btn--primary:hover { background: var(--primary-700); color: #fff; } html.theme-new .btn--secondary { background: var(--surface-card); color: var(--neutral-700); border-color: var(--neutral-300); } html.theme-new .btn--secondary:hover { background: var(--neutral-50); border-color: var(--neutral-400); color: var(--neutral-700); } html.theme-new .btn--ghost { background: transparent; color: var(--neutral-700); } html.theme-new .btn--ghost:hover { background: var(--neutral-100); color: var(--neutral-700); } html.theme-new .btn--danger { background: var(--danger-500); color: #fff; } html.theme-new .btn--danger:hover { background: var(--danger-600); color: #fff; } /* Azione distruttiva di riga: ghost, non il rosso pieno di .btn--danger, che e' per i CTA. Prima questo colore stava inline in sei pagine. */ html.theme-new .btn--ghost-danger { background: transparent; color: var(--danger-500); } html.theme-new .btn--ghost-danger:hover { background: var(--danger-50); color: var(--danger-600); } html.theme-new .btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); } html.theme-new .btn--ghost-dark:hover { background: rgba(255,255,255,0.1); color: #fff; } html.theme-new .btn--sm { padding: 0.4rem 0.875rem; font-size: var(--font-size-caption); } html.theme-new .btn--lg { padding: 0.85rem 1.6rem; font-size: var(--font-size-body-lg); } html.theme-new .btn[disabled] { opacity: 0.55; cursor: not-allowed; } /* Keyboard focus ring — same treatment the inputs already use. */ html.theme-new .btn:focus-visible { outline: none; box-shadow: var(--ring-primary); } /* Un dito non punta come un mouse. .btn--sm sta a ~30px: passa il minimo AA di 24px, * ma sotto i 44px raccomandati per il touch — e nelle righe della libreria CV sono * quattro azioni affiancate, Delete inclusa. Alzati solo dove il puntatore è grosso, * così la densità sul desktop resta quella disegnata. */ @media (pointer: coarse) { html.theme-new .btn { min-height: 44px; } html.theme-new .icon-btn { width: 44px; height: 44px; } } html.theme-new .btn .lucide { width: 16px; height: 16px; } /* ---------- Badges & chips ---------- */ html.theme-new .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--font-size-overline); font-weight: var(--font-weight-medium); white-space: normal; overflow-wrap: break-word; border: 1px solid transparent; } /* La banda alta si riempie invece di cambiare tinta: e' un grado, non una categoria. Il punteggio ha 4-12 punti di rumore fra due analisi identiche, quindi il confine a 80 lo si attraversa senza che sia cambiato niente — un salto di tinta leggerebbe come "un'altra cosa", il pieno legge "lo stesso, di piu'". Il primo piano e' --surface-card, che si inverte da solo: bianco su #047857 = 5.48:1 in chiaro, #111827 su #6ee7b7 = 11.64:1 se il tema scuro verra' riaperto (oggi nessun codice imposta data-theme='new-dark'). */ html.theme-new .badge--excellent { background: var(--success-700); color: var(--surface-card); border-color: var(--success-700); } html.theme-new .badge--success { background: var(--success-50); color: var(--success-700); border-color: var(--success-100); } html.theme-new .badge--warning { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-100); } html.theme-new .badge--danger { background: var(--danger-50); color: var(--danger-600); border-color: var(--danger-100); } html.theme-new .badge--info { background: var(--info-50); color: var(--info-500); border-color: var(--info-100); } html.theme-new .badge--neutral { background: var(--neutral-100); color: var(--neutral-600); border-color: var(--neutral-200); } html.theme-new .badge--primary { background: var(--primary-100); color: var(--primary-700); border-color: var(--primary-100); } html.theme-new .badge--accent { background: var(--accent-100); color: var(--accent-600); border-color: var(--accent-100); } html.theme-new .badge .lucide { width: 12px; height: 12px; } html.theme-new .chip { display: inline-block; padding: 3px 12px; border-radius: var(--radius-full); font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); background: var(--neutral-100); color: var(--neutral-600); } html.theme-new .chip--found { background: var(--success-50); color: var(--success-700); } html.theme-new .chip--missing { background: var(--danger-50); color: var(--danger-600); } html.theme-new .chip--primary { background: var(--primary-100); color: var(--primary-700); } html.theme-new .chip--accent { background: var(--accent-100); color: var(--accent-600); } html.theme-new .chips { display: flex; flex-wrap: wrap; gap: var(--spacing-2); } /* Provenance of a keyword (required / nice-to-have / role / sector). Carrying it on the * chip is what lets one list replace the three sections that used to encode it by position. */ html.theme-new .chip-origin { margin-left: 6px; padding-left: 6px; border-left: 1px solid currentColor; font-size: var(--font-size-overline); font-weight: var(--font-weight-regular); opacity: 0.9; } /* ---------- Score gauge (signature motif) ---------- * Spec: ScoreGauge.jsx — inner disc 74% of size, number neutral-900 * weight 900, label below the gauge in overline style. * Usage:
*
*
78
* ATS Score
*/ html.theme-new .gauge-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem; flex-shrink: 0; } html.theme-new .gauge { --p: 0; --c: var(--score-good); position: relative; width: 132px; height: 132px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--neutral-200) 0); flex-shrink: 0; } html.theme-new .gauge::before { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: var(--surface-card); } html.theme-new .gauge-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 2.125rem; font-weight: var(--font-weight-black); line-height: 1; color: var(--text-heading); letter-spacing: -0.02em; } html.theme-new .gauge-num small { font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--text-muted); letter-spacing: 0; margin-top: 2px; } html.theme-new .gauge-label { font-size: var(--font-size-overline); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } html.theme-new .gauge--sm { width: 96px; height: 96px; } html.theme-new .gauge--sm::before { inset: 12px; } html.theme-new .gauge--sm .gauge-num { font-size: 1.55rem; } /* ---------- Score bars ---------- */ html.theme-new .score-row { margin-bottom: var(--spacing-4); } html.theme-new .score-row:last-child { margin-bottom: 0; } html.theme-new .score-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } html.theme-new .score-head .name { font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium); color: var(--text-strong); } html.theme-new .score-head .val { font-family: var(--font-family-mono); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); } html.theme-new .bar { height: 8px; border-radius: var(--radius-full); background: var(--neutral-200); overflow: hidden; } html.theme-new .bar-fill { height: 100%; border-radius: var(--radius-full); transition: width 600ms ease-out; } html.theme-new .score-desc { font-size: var(--font-size-caption); color: var(--text-muted); margin-top: 4px; } /* ---------- Metric boxes ---------- */ html.theme-new .metric { border-radius: var(--radius-md); padding: var(--spacing-4); border: 1px solid var(--border-subtle); text-align: center; } html.theme-new .metric .m-val { font-size: 1.5rem; font-weight: var(--font-weight-extrabold); font-family: var(--font-family-mono); } /* Verdicts and other prose in a metric slot: the mono numeral face is for numbers. */ html.theme-new .metric .m-val--text { font-family: var(--font-family-base); font-size: var(--font-size-h5); letter-spacing: normal; } html.theme-new .metric .m-label { font-size: var(--font-size-overline); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-overline); text-transform: uppercase; color: var(--text-muted); margin-top: 2px; } /* Tile: un gradino di fondo e un verde diverso, non il pieno del badge. Un badge e' un accento singolo e regge il riempimento; le tile stanno in fila da quattro e con tre riempite di verde scuro la sezione diventa un muro. Il bug vero era qui sotto: .metric--good usava --success-700, cioe' lo stesso identico colore di excellent, quindi le due bande alte erano indistinguibili. */ html.theme-new .metric--excellent { background: var(--success-100); } html.theme-new .metric--excellent .m-val { color: var(--score-excellent); } html.theme-new .metric--good { background: var(--success-50); } html.theme-new .metric--good .m-val { color: var(--score-good); } html.theme-new .metric--fair { background: var(--warning-50); } html.theme-new .metric--fair .m-val { color: var(--warning-700); } html.theme-new .metric--poor { background: var(--danger-50); } html.theme-new .metric--poor .m-val { color: var(--score-poor); } html.theme-new .metric--plain { background: var(--surface-sunken); } html.theme-new .metric--plain .m-val { color: var(--primary-500); } /* ---------- Stat tiles (dashboard / admin) ---------- */ html.theme-new .stat-tile { display: flex; align-items: flex-start; justify-content: space-between; } html.theme-new .stat-tile .s-label { font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium); color: var(--text-muted); } html.theme-new .stat-tile .s-val { font-size: 1.875rem; font-weight: var(--font-weight-extrabold); letter-spacing: -0.02em; margin-top: 2px; } html.theme-new .stat-tile .s-sub { font-size: var(--font-size-caption); color: var(--text-muted); margin-top: 4px; } html.theme-new .stat-tile .lucide { width: 28px; height: 28px; } /* ---------- Forms ---------- */ html.theme-new .label { display: block; font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium); color: var(--text-strong); margin-bottom: var(--spacing-2); } html.theme-new .label .req { color: var(--danger-500); } html.theme-new .input, html.theme-new .select, html.theme-new .textarea { width: 100%; padding: 0.625rem 0.875rem; font-family: var(--font-family-base); font-size: var(--font-size-body-sm); color: var(--text-strong); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } html.theme-new .input::placeholder, html.theme-new .textarea::placeholder { color: var(--text-placeholder); } html.theme-new .input:focus, html.theme-new .select:focus, html.theme-new .textarea:focus { border-color: var(--border-focus); box-shadow: var(--ring-primary); } html.theme-new .textarea { min-height: 96px; resize: vertical; } html.theme-new .field { margin-bottom: var(--spacing-4); } html.theme-new .hint { font-size: var(--font-size-caption); color: var(--text-muted); margin-top: 4px; } /* ---------- Tabs ---------- */ html.theme-new .tabs { display: flex; gap: var(--spacing-1); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--spacing-6); } html.theme-new .tab { padding: 0.6rem 1rem; font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); color: var(--text-muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } html.theme-new .tab:hover { color: var(--primary-500); } html.theme-new .tab.active { color: var(--primary-500); border-bottom-color: var(--primary-500); } html.theme-new .tab-panel { display: none; } html.theme-new .tab-panel.active { display: block; } /* ---------- Tables ---------- */ html.theme-new .table-wrap { overflow-x: auto; } html.theme-new table.table { width: 100%; border-collapse: collapse; font-size: var(--font-size-body-sm); } html.theme-new .table th { text-align: left; padding: var(--spacing-3) var(--spacing-4); font-size: var(--font-size-overline); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-overline); text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } html.theme-new .table td { padding: var(--spacing-3) var(--spacing-4); border-bottom: 1px solid var(--border-subtle); color: var(--text-strong); vertical-align: middle; } html.theme-new .table tbody tr:hover { background: var(--neutral-50); } html.theme-new .table .num { font-family: var(--font-family-mono); } /* Modificatore per le tabelle larghe (la lista utenti admin: dieci colonne). * `table-layout: fixed` è la garanzia, non una stima: le colonne si dividono la * larghezza disponibile e la tabella non può sfondare il contenitore, quindi lo * scroll orizzontale del wrapper non si attiva mai. Le larghezze arrivano dal * , il testo lungo viene troncato con l'ellissi (il valore intero resta * nel `title` della cella). * Sotto i 900px resta il comportamento normale: dieci colonne compresse in un * telefono sarebbero illeggibili, e lì lo scroll è la scelta giusta. */ @media (min-width: 900px) { html.theme-new table.table--fit { table-layout: fixed; } html.theme-new .table--fit th { white-space: normal; } /* Le intestazioni ordinabili sono