/* ===================================================================== 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 warm Neutral-950 + Lime accent */ --sv-accent:#B4C614; --sv-accent-600:#8C980B; --sv-blue:#2AA5B0; --sv-purple:#6A4FA3; --sv-amber:#E08A0B; --sv-red:#EF6B54; /* Dark surface (default) */ --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-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 10px 40px rgba(0,0,0,.35); } /* Shell light theme — driven by the master data-theme attribute on (…sv-light class kept as a mirror for any older selectors). */ :root[data-theme="light"] body.sv-shell, body.sv-shell.sv-light{ --sv-bg:#FFFCE0; --sv-surface:#FFFEF5; --sv-surface-2:#FAF5DF; --sv-border:#EEEADA; --sv-text:#2B2926; --sv-text-2:#55534B; --sv-text-3:#767369; --sv-shadow:0 10px 40px rgba(15,14,12,.10); } /* ---- 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 the LIGHT header background sv-logo-dark = white wordmark → shown on the DARK header background Dark is the shell default, so that variant is visible until is set; js/app.js (GlobalSettings.applyToShell) also swaps them explicitly. */ .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:none} .sv-logo-dark{display:block} :root[data-theme="light"] .sv-logo-light{display:block} :root[data-theme="light"] .sv-logo-dark{display:none} .sv-dash-header .sv-logo{height:22px} .sv-landing-nav .sv-logo{height:24px} .sv-login-card .sv-logo-wrap{display:flex;justify-content:center;margin-bottom:10px} .sv-login-card .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:#0D0C0A} .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} /* ===================== LOGIN ===================== */ #sv-login{display:none;align-items:center;justify-content:center;padding:24px} #sv-login.on{display:flex} .sv-login-card{ width:100%;max-width:380px;background:var(--sv-surface);border:1px solid var(--sv-border); border-radius:20px;padding:2.6rem 2.4rem;text-align:center;box-shadow:var(--sv-shadow); } .sv-login-card .sv-brand{font-size:24px;margin-bottom:6px} .sv-login-sub{font-size:13px;color:var(--sv-text-2);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 var(--sv-border);border-radius:10px; background:var(--sv-surface-2);color:var(--sv-text);font-size:15px;font-family:inherit; } .sv-login-card input:focus{outline:none;border-color:var(--sv-accent)} .sv-login-card .sv-btn{width:100%;margin-top:4px} .sv-login-err{color:var(--sv-red);font-size:13px;margin-top:10px;min-height:16px} .sv-login-hint{margin-top:16px;font-size:11.5px;color:var(--sv-text-3);line-height:1.7} .sv-login-hint code{background:var(--sv-surface-2);padding:1px 6px;border-radius:5px;color:var(--sv-text-2)} /* ===================== PRESENTATION LANDING ===================== */ #sv-landing{display:none} #sv-landing.on{display:block} .sv-landing-nav{ display:flex;align-items:center;justify-content:space-between; padding:18px clamp(18px,5vw,56px);position:sticky;top:0;z-index:10; background:var(--sv-surface);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-brand{font-size:19px} .sv-landing-hero{ max-width:1080px;margin:0 auto;padding:clamp(48px,9vw,110px) clamp(20px,5vw,32px) 60px; text-align:center; } .sv-eyebrow{ display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--sv-accent-600);background:rgba(180,198,20,.14);padding:6px 14px;border-radius:999px;margin-bottom:22px; } .sv-landing-hero h1{font-size:clamp(32px,6vw,58px);margin-bottom:20px} .sv-landing-hero h1 .sv-accent{color:var(--sv-accent-600)} .sv-landing-hero p.lead{font-size:clamp(15px,2.4vw,19px);color:var(--sv-text-2);max-width:640px;margin:0 auto 34px;line-height:1.6} .sv-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .sv-demo-cta{ position:relative;background:var(--sv-accent);color:#0D0C0A;font-size:17px;font-weight:800; padding:18px 36px;border:none;border-radius:999px;cursor:pointer; box-shadow:0 12px 34px rgba(180,198,20,.34);transition:transform .14s,box-shadow .14s; } .sv-demo-cta:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(180,198,20,.44)} .sv-features{ max-width:1080px;margin:0 auto;padding:10px clamp(20px,5vw,32px) 90px; display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px; } .sv-feature{ background:var(--sv-surface);border:1px solid var(--sv-border);border-radius:var(--sv-radius); padding:26px 24px;text-align:left; } .sv-feature .ico{font-size:26px;margin-bottom:12px} .sv-feature h3{font-size:17px;margin-bottom:8px} .sv-feature p{font-size:13.5px;color:var(--sv-text-2);line-height:1.6} .sv-modules-preview{max-width:1080px;margin:0 auto 90px;padding:0 clamp(20px,5vw,32px);display:grid;grid-template-columns:1fr 1fr;gap:20px} .sv-mod-card{ background:linear-gradient(150deg,var(--sv-surface),var(--sv-surface-2)); border:1px solid var(--sv-border);border-radius:18px;padding:30px; } .sv-mod-card h3{font-size:20px;margin-bottom:6px} .sv-mod-card .tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sv-accent-600)} .sv-mod-card p{font-size:13.5px;color:var(--sv-text-2);line-height:1.6;margin:10px 0 18px} .sv-landing-foot{border-top:1px solid var(--sv-border);padding:28px;text-align:center;font-size:12px;color:var(--sv-text-3)} /* ===================== 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} #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 — REAL LIGHT MODE 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 — scoped to :root[data-theme="light"] and injected via this shared stylesheet which the Assessment iframe also loads — remap every semantic token to a white / light-neutral surface with high-contrast dark text, and fix the handful of hard-coded dark values that don't use the tokens. ===================================================================== */ :root[data-theme="light"]{ /* !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:#F3F4F6 !important; /* app / sidebar / topbar ground */ --surface:#FFFFFF !important; /* cards, tables, modals, drawers */ --surface-alt:#F3F4F6 !important; /* hovers, insets, pills */ --border:#E3E5E9 !important; --border-strong:#CBD0D8 !important; --text-1:#0D0C0A !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[data-theme="light"] body:not(.sv-shell){background:var(--bg) !important;color:var(--text-1) !important} :root[data-theme="light"] ::-webkit-scrollbar-thumb{background:#CBD0D8;border-color:var(--bg)} :root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#9AA0AA} :root[data-theme="light"] .dark-chart-card{background:var(--surface-alt);border-color:var(--border)} :root[data-theme="light"] .dark-chart-card .card-title, :root[data-theme="light"] .dark-chart-card .small-note{color:var(--text-1)} :root[data-theme="light"] .dark-chart-card .small-note{color:var(--text-2)} :root[data-theme="light"] .theme-logo-light{display:block} :root[data-theme="light"] .theme-logo-dark{display:none} /* keep the toast dark — a dark pill on a light page is the intended affordance */ /* ===================================================================== RECRUITING — LIGHT-MODE PARITY Recruiting already switches, but its light theme is warm cream. Nudge its tokens to the same white / light-neutral surface as Assessment so both modules read identically under the Master Theme Switcher. (Higher specificity than css/recruiting.css's own body.light-theme.) ===================================================================== */ :root[data-theme="light"] body.light-theme{ --dk:#F3F4F6; --c1:#FFFFFF; --c2:#F3F4F6; --br:#E3E5E9; --tx:#0D0C0A; --tx2:#4B5563; --tx3:#6B7280; background:linear-gradient(160deg,#F3F4F6,#FFFFFF 55%,#F3F4F6); }