/* ===================================================================== SKILL-VISION — Unified SPA shell (common styles) Consolidated design tokens + shell chrome (login, presentation landing, dashboard frame, top-level module switcher). Module-specific rules live in css/recruiting.css and css/assessment.css. ===================================================================== */ *{box-sizing:border-box;margin:0;padding:0} :root{ /* Brand palette — Skill Vision Lime accent (Brand Book pp. 5–10) */ --sv-accent:#B4C614; --sv-accent-600:#8C980B; --sv-blue:#2AA5B0; --sv-purple:#6A4FA3; --sv-amber:#E08A0B; --sv-red:#EF6B54; /* ---- LIGHT IS THE UNIVERSAL DEFAULT (Brand Book pp. 14–20, 49) ---- Declared on bare :root so the very first paint is already light — no dark flash before js/app.js sets . Dark is strictly opt-in below via :root[data-theme="dark"]. */ --sv-bg:#F8F9FA; /* page background */ --sv-surface:#FFFFFF; /* cards, panels */ --sv-surface-2:#F8F9FA; /* alternate surface / insets */ --sv-border:#E5E7EB; /* delicate dividers */ --sv-text:#111827; /* high-contrast body text */ --sv-text-2:#4B5563; /* secondary text */ --sv-text-3:#6B7280; /* muted text */ --sv-font:'Gudea',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --sv-font-serif:'Noto Serif JP','Times New Roman',Times,serif; --sv-radius:14px; --sv-shadow:0 8px 28px rgba(17,24,39,0.06); } /* Opt-in dark variant. Kept for the ⚙ / 🌙 controls, but never the default. */ :root[data-theme="dark"], :root[data-theme="dark"] body.sv-shell{ --sv-bg:#0D0C0A; --sv-surface:#1B1A17; --sv-surface-2:#2B2926; --sv-border:#45433C; --sv-text:#FAF5DF; --sv-text-2:#ABA79A; --sv-text-3:#767369; --sv-shadow:0 10px 40px rgba(0,0,0,.35); } /* Light tokens re-stated for the explicit attribute + the legacy .sv-light mirror class, so either entry point lands on the same values. */ :root:not([data-theme="dark"]) body.sv-shell, body.sv-shell.sv-light{ --sv-bg:#F8F9FA; --sv-surface:#FFFFFF; --sv-surface-2:#F8F9FA; --sv-border:#E5E7EB; --sv-text:#111827; --sv-text-2:#4B5563; --sv-text-3:#6B7280; --sv-shadow:0 8px 28px rgba(17,24,39,0.06); } /* ---- Shell base ---- */ body.sv-shell{ font-family:var(--sv-font); background:linear-gradient(160deg,var(--sv-bg),var(--sv-surface) 55%,var(--sv-bg)); color:var(--sv-text); min-height:100vh; -webkit-font-smoothing:antialiased; } body.sv-shell h1,body.sv-shell h2,body.sv-shell h3,body.sv-shell h4{font-family:var(--sv-font-serif);font-weight:700;line-height:1.2} body.sv-shell a{color:var(--sv-accent-600)} .sv-screen{display:none;min-height:100vh} .sv-screen.on{display:block} .sv-screen.sv-flex.on{display:flex} .sv-brand{font-family:var(--sv-font-serif);font-weight:900;letter-spacing:.02em} .sv-brand s{color:var(--sv-accent);text-decoration:none} /* ---- Master brand logo (day / night variants) ---- sv-logo-light = black wordmark → shown on LIGHT backgrounds (the default) sv-logo-dark = white wordmark → shown only on DARK backgrounds Brand Book logo rule: on light surfaces the mark is always the black wordmark, so that is the bare default here and the white variant is opt-in under [data-theme="dark"]. js/app.js (GlobalSettings.applyToShell) also swaps them explicitly once settings are read. */ .sv-logo-wrap{display:inline-flex;align-items:center;flex-shrink:0} a.sv-logo-wrap,.sv-logo-home{cursor:pointer;text-decoration:none} .sv-logo-home:focus-visible{outline:2px solid var(--sv-accent);outline-offset:3px;border-radius:4px} .sv-logo{height:24px;width:auto;display:block;object-fit:contain} .sv-logo-light{display:block} .sv-logo-dark{display:none} :root[data-theme="dark"] .sv-logo-light{display:none} :root[data-theme="dark"] .sv-logo-dark{display:block} .sv-dash-header .sv-logo{height:22px} .sv-landing-nav .sv-logo{height:40px} .sv-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 22px;border-radius:999px;border:none;cursor:pointer; font-family:inherit;font-size:15px;font-weight:700;transition:transform .12s,background .15s,border-color .15s,color .15s; } .sv-btn:active{transform:translateY(1px)} .sv-btn-primary{background:var(--sv-accent);color:#111827} .sv-btn-primary:hover{background:var(--sv-accent-600)} .sv-btn-ghost{background:transparent;border:1.5px solid var(--sv-border);color:var(--sv-text-2)} .sv-btn-ghost:hover{border-color:var(--sv-accent);color:var(--sv-accent)} .sv-btn-lg{padding:16px 30px;font-size:16px} /* Screen-reader-only text — used for the landing

, which the brief replaces visually with the logo but which the document still needs. / .sv-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; } / ===================== LOGIN ===================== Brand Book light surface is hard-locked here (not via --sv-* tokens) so a stored dark theme, a custom accent, or applyToShell() cannot restyle this screen. #FFFFFF card on #F8F9FA; #B4C614 button + focus; #E5E7EB borders; #111827 text. / #sv-login{ display:none;align-items:center;justify-content:center;padding:24px; background:#F8F9FA;color:#111827; } #sv-login.on{display:flex} .sv-login-card .sv-lang-switch{margin:-4px auto 1.5rem} #sv-login .sv-login-logo{display:block !important;height:40px;margin:0 auto} .sv-login-card{ width:100%;max-width:380px;background:#FFFFFF;border:1px solid #E5E7EB; border-radius:20px;padding:2.6rem 2.4rem;text-align:center; box-shadow:0 8px 28px rgba(17,24,39,0.06);color:#111827; } .sv-login-card .sv-logo-wrap{ display:flex;justify-content:center;align-items:center;margin-bottom:1.8rem; } .sv-login-card form{display:flex;flex-direction:column;gap:10px} .sv-login-card input{ width:100%;padding:12px 14px;border:1.5px solid #E5E7EB;border-radius:10px; background:#F8F9FA;color:#111827;font-size:15px;font-family:inherit; } .sv-login-card input::placeholder{color:#6B7280} .sv-login-card input:focus{ outline:none;border-color:#B4C614; box-shadow:0 0 0 3px rgba(180,198,20,0.35); } .sv-login-card .sv-btn{width:100%;margin-top:4px} .sv-login-card .sv-btn-primary{background:#B4C614;color:#111827} .sv-login-card .sv-btn-primary:hover{background:#8C980B;color:#111827} .sv-login-err{color:#EF6B54;font-size:13px;margin-top:10px;min-height:16px} / "Mostra password" reveal — the button is absolutely positioned inside the field, so the input reserves right padding for it. / .sv-pass-wrap{position:relative;display:flex;align-items:center;width:100%} .sv-login-card .sv-pass-wrap input{padding-right:44px} .sv-pass-toggle{ position:absolute;right:8px;display:flex;align-items:center;justify-content:center; width:28px;height:28px;padding:0;border:none;border-radius:7px; background:transparent;color:#6B7280;cursor:pointer;transition:color .15s,background .15s; } .sv-pass-toggle:hover{color:#111827;background:#F8F9FA} .sv-pass-toggle:focus-visible{outline:2px solid #B4C614;outline-offset:1px} .sv-pass-toggle[aria-pressed="true"]{color:#8C980B} / Segmented IT/EN language switch — pill track + sliding active chip. Replaces the old unstyled "IT | EN" text links. / .sv-lang-switch{ display:inline-flex;align-items:center;gap:2px;padding:3px; background:#F3F4F6;border:1px solid #E5E7EB;border-radius:999px; box-shadow:inset 0 1px 2px rgba(17,24,39,0.04); } .sv-lang-btn{ appearance:none;-webkit-appearance:none;margin:0;border:0;background:transparent; color:#6B7280;cursor:pointer;font-family:inherit;font-size:12px;font-weight:700; letter-spacing:.08em;line-height:1;min-width:44px;padding:8px 14px;border-radius:999px; transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .12s ease; } .sv-lang-btn:hover{color:#111827} .sv-lang-btn.active{ background:#FFFFFF;color:#111827; box-shadow:0 1px 3px rgba(17,24,39,0.10), 0 0 0 1px rgba(180,198,20,0.35); } .sv-lang-btn:active{transform:scale(.97)} .sv-lang-btn:focus-visible{outline:2px solid #B4C614;outline-offset:2px} :root[data-theme="dark"] .sv-landing-nav .sv-lang-switch{ background:var(--sv-surface-2);border-color:var(--sv-border); box-shadow:inset 0 1px 2px rgba(0,0,0,.25); } :root[data-theme="dark"] .sv-landing-nav .sv-lang-btn{color:var(--sv-text-3)} :root[data-theme="dark"] .sv-landing-nav .sv-lang-btn:hover{color:var(--sv-text)} :root[data-theme="dark"] .sv-landing-nav .sv-lang-btn.active{ background:var(--sv-accent);color:#111827; box-shadow:0 1px 3px rgba(0,0,0,.28); } / ===================== WELCOME / PRESENTATION LANDING ===================== Trimmed to what the brief allows: logo + IT/EN nav, one subtitle, two cards. The .sv-eyebrow, .sv-cta-row, .sv-demo-cta, .sv-modules-preview, .sv-mod-card and .sv-landing-foot rules were dropped along with the markup they styled. / #sv-landing{display:none;background:var(--sv-bg);color:var(--sv-text);min-height:100vh} #sv-landing.on{display:block} .sv-landing-nav{ display:flex;align-items:center;justify-content:center; padding:28px clamp(18px,5vw,56px);position:sticky;top:0;z-index:10; background:color-mix(in srgb,var(--sv-bg) 82%,transparent);backdrop-filter:blur(8px); border-bottom:1px solid var(--sv-border); } .sv-landing-nav .sv-lang-switch{position:absolute;right:clamp(18px,5vw,56px);top:50%;transform:translateY(-50%)} .sv-landing-hero{ max-width:1080px;margin:0 auto;padding:clamp(48px,9vw,110px) clamp(20px,5vw,32px) 60px; text-align:center; } .sv-landing-hero p.lead{font-size:clamp(15px,2.4vw,19px);color:var(--sv-text-2);max-width:640px;margin:0 auto 40px;line-height:1.6} / Exactly two cards — pinned to two columns so the pair never reflows into an off-brand 1×N or 3-up grid, collapsing to a single column on mobile. / .sv-features{ max-width:900px;margin:0 auto;padding:0 clamp(20px,5vw,32px) 90px; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px; } .sv-feature{ background:var(--sv-surface);border:1px solid var(--sv-border);border-radius:var(--sv-radius); padding:30px 26px;text-align:left;cursor:pointer; display:flex;flex-direction:column;align-items:flex-start;gap:10px; box-shadow:var(--sv-shadow);transition:transform .14s,border-color .14s,box-shadow .14s; } .sv-feature:hover{transform:translateY(-3px);border-color:var(--sv-accent);box-shadow:0 14px 34px rgba(17,24,39,.10)} .sv-feature:focus-visible{outline:2px solid var(--sv-accent);outline-offset:3px} .sv-feature .ico{font-size:32px;margin:0} .sv-feature h3{font-size:18px;margin:0} .sv-feature p{font-size:13.5px;color:var(--sv-text-2);line-height:1.6;margin:0;flex:1} .sv-feature .sv-btn{margin-top:8px;font-size:14px;padding:11px 20px} @media (max-width:720px){ .sv-features{grid-template-columns:1fr} } / ===================== DASHBOARD FRAME ===================== / #sv-dashboard{display:none;height:100vh;flex-direction:column;overflow:hidden} #sv-dashboard.on{display:flex} .sv-dash-header{ flex-shrink:0;display:flex;align-items:center;gap:18px; padding:0 18px;height:56px;background:var(--sv-surface);border-bottom:1px solid var(--sv-border); } .sv-dash-header .sv-brand{font-size:16px;white-space:nowrap} / top-level module switcher / .sv-switcher{display:inline-flex;background:var(--sv-surface-2);border:1px solid var(--sv-border);border-radius:999px;padding:3px} .sv-switcher button{ border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700; color:var(--sv-text-2);padding:7px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;transition:all .15s; } .sv-switcher button .sv-dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5} .sv-switcher button.active{background:var(--sv-accent);color:#0D0C0A} .sv-switcher button.active .sv-dot{opacity:1} .sv-dash-spacer{flex:1} .sv-icon-btn{ width:36px;height:36px;border-radius:10px;border:1px solid var(--sv-border);background:var(--sv-surface-2); color:var(--sv-text-2);cursor:pointer;font-size:15px;display:inline-flex;align-items:center;justify-content:center; } .sv-icon-btn:hover{border-color:var(--sv-accent);color:var(--sv-accent)} .sv-frames{flex:1;position:relative;background:var(--sv-bg)} .sv-frames iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--sv-bg);display:none} .sv-frames iframe.active{display:block} .sv-frame-loading{ position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px; color:var(--sv-text-2);font-size:13px;font-weight:600;background:var(--sv-bg);z-index:5; } .sv-frame-loading.on{display:flex} .sv-spin{width:42px;height:42px;border:4px solid rgba(180,198,20,.22);border-top-color:var(--sv-accent);border-radius:50%;animation:sv-spin .8s linear infinite} @keyframes sv-spin{to{transform:rotate(360deg)}} / ===================== MODAL (shell) ===================== / .sv-modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:9000;align-items:center;justify-content:center;padding:20px} .sv-modal-ov.on{display:flex} .sv-modal{background:var(--sv-surface);border:1px solid var(--sv-border);border-radius:18px;padding:28px;width:100%;max-width:460px;box-shadow:var(--sv-shadow)} .sv-modal h3{font-size:20px;margin-bottom:6px} .sv-modal .sub{font-size:13px;color:var(--sv-text-2);margin-bottom:18px} .sv-modal label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--sv-text-2);margin:12px 0 5px} .sv-modal input,.sv-modal textarea,.sv-modal select{ width:100%;padding:10px 13px;border:1.5px solid var(--sv-border);border-radius:9px; background:var(--sv-surface-2);color:var(--sv-text);font-size:14px;font-family:inherit; } .sv-modal input:focus,.sv-modal textarea:focus,.sv-modal select:focus{outline:none;border-color:var(--sv-accent)} .sv-modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:22px} .sv-set-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} .sv-set-row > div{min-width:0} .sv-set-mini{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--sv-text-2);margin:12px 0 5px} .sv-modal input[type=color]{height:40px;padding:3px;cursor:pointer} .sv-modal input[type=number]{text-align:center} / ===================== TOAST (shell) ===================== / #sv-toast{ position:fixed;left:50%;bottom:28px;transform:translate(-50%,80px); background:var(--sv-accent);color:#0D0C0A;font-weight:700;font-size:14px; padding:13px 22px;border-radius:12px;z-index:9500;transition:transform .32s;box-shadow:var(--sv-shadow); } #sv-toast.on{transform:translate(-50%,0)} / ===================== EMBED helpers (inside module iframes) ===================== / / Loaded by modules/.html. When a module runs inside the shell it carries .sv-embedded on ; standalone pages never get the class so these are inert. / body.sv-embedded #app-loader{transition:none} /* Controls consolidated into the shell's master header: the per-module theme toggle, language toggle and settings gear are redundant when embedded. Operational controls (Import data, etc.) stay in-view. / body.sv-embedded #theme-toggle, body.sv-embedded #lang-toggle-btn, body.sv-embedded #settings-btn{display:none !important} / Redundant brand mark: the SPA shell's master header already carries the one Skill Vision logo, top-left. Drop the module's own sidebar logo image (its "COMPETENCY ASSESSMENT" label stays as a section heading). / body.sv-embedded .sidebar-brand .brand-logo{display:none !important} body.sv-embedded .sidebar-brand{padding-top:16px;padding-bottom:14px} @media(max-width:720px){ .sv-modules-preview{grid-template-columns:1fr} .sv-dash-header{gap:10px;padding:0 10px} .sv-dash-header .sv-logo{height:20px} .sv-switcher button{padding:7px 12px} } / ===================================================================== MASTER-HEADER CONTEXTUAL CONTROLS Controls that only make sense for one module. app.js stamps on the shell. ===================================================================== / .sv-mod-only{display:none !important} body[data-active-module="assessment"] .sv-icon-btn.sv-mod-only{display:inline-flex !important} body[data-active-module="assessment"] .sv-set-modrow.sv-mod-only{display:flex !important} / The language switcher works in both modules (Recruiting APEX 5D has its own applyLanguage/ toggleLanguage, same as Assessment), so it isn't Assessment-only like the other .sv-mod-only controls below it — show it whenever a module is active, not scoped to a single one. / body[data-active-module="recruiting"] #sv-dash-lang.sv-mod-only{display:inline-flex !important} #sv-dash-lang{width:auto;padding:0 10px;font-size:12px;font-weight:700;gap:0} #sv-dash-lang-code{letter-spacing:.04em} .sv-set-modrow{ align-items:center;justify-content:space-between;gap:14px; margin-top:18px;padding:14px;border:1px solid var(--sv-border);border-radius:12px;background:var(--sv-surface-2); } .sv-set-modrow .sv-btn{flex-shrink:0;padding:9px 16px;font-size:13px} / ===================================================================== ASSESSMENT — LIGHT MODE IS THE DEFAULT The Assessment module (css/assessment.css) was authored dark-only: its :root holds dark surfaces and only :root[data-theme="dark"] flips the accent, so Light Mode never took effect. These overrides are scoped to :root:not([data-theme="dark"]) — they apply when the attribute is ABSENT as well as when it is "light" — and are injected via this shared stylesheet, which the Assessment iframe also loads. That makes light the ground state even before js/app.js writes , so there is no dark flash on first paint. Every semantic token is remapped to a white / light-neutral surface with high-contrast dark text, and the handful of hard-coded dark values that bypass the tokens are fixed. ===================================================================== / :root:not([data-theme="dark"]){ / !important so these win even over an inline --token pin left on by the Assessment app's own colour-customiser (initCustomBg / …Surface / …Text); stylesheet !important beats a non-important inline custom property. Accent stays non-important so brand-colour sync still works in light mode. / --bg:#F8F9FA !important; / app / sidebar / topbar ground / --surface:#FFFFFF !important; / cards, tables, modals, drawers / --surface-alt:#F8F9FA !important; / hovers, insets, pills / --border:#E5E7EB !important; --border-strong:#D1D5DB !important; --text-1:#111827 !important; / high-contrast body text / --text-2:#4B5563 !important; --text-3:#6B7280 !important; --accent:#B4C614; --accent-dark:#8C980B; --accent-soft:rgba(180,198,20,0.14); --accent-soft-2:rgba(180,198,20,0.26); --gold:#8C980B; --gold-soft:rgba(180,198,20,0.16); --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04); --shadow-md:0 4px 16px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.06); --shadow-lg:0 12px 32px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.08); color-scheme:light; } / Force the module ground/text explicitly too (never the shell, which is body.sv-shell) — belt-and-braces against any inline custom-colour pin. / :root:not([data-theme="dark"]) body:not(.sv-shell){background:var(--bg) !important;color:var(--text-1) !important} :root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb{background:#D1D5DB;border-color:var(--bg)} :root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover{background:#9CA3AF} :root:not([data-theme="dark"]) .dark-chart-card{background:var(--surface-alt);border-color:var(--border)} :root:not([data-theme="dark"]) .dark-chart-card .card-title, :root:not([data-theme="dark"]) .dark-chart-card .small-note{color:var(--text-1)} :root:not([data-theme="dark"]) .dark-chart-card .small-note{color:var(--text-2)} :root:not([data-theme="dark"]) .theme-logo-light{display:block} :root:not([data-theme="dark"]) .theme-logo-dark{display:none} / keep the toast dark — a dark pill on a light page is the intended affordance / / ===================================================================== RECRUITING — LIGHT-MODE PARITY css/recruiting.css declares its own warm-cream light theme behind a body.light-theme class. Light is now the ground state, so the token remap is hoisted to :root level (these --dk/--c1/… names are used only by the Recruiting module, so they cannot leak into the shell or Assessment) and only the page background stays class-scoped, since that one declaration would otherwise paint the shell too. ===================================================================== */ :root:not([data-theme="dark"]){ --dk:#F8F9FA; --c1:#FFFFFF; --c2:#F8F9FA; --br:#E5E7EB; --tx:#111827; --tx2:#4B5563; --tx3:#6B7280; } :root:not([data-theme="dark"]) body.light-theme, :root:not([data-theme="dark"]) body.rc-shell{ background:linear-gradient(160deg,#F8F9FA,#FFFFFF 55%,#F8F9FA); color:var(--tx); }