/* FingerFlow Trainer v3.7 EXACT 3-row layout — total height ~570px on desktop ┌─────────────────────────────────┐ ← Row 1 ~142px (25%) │ Stats bar 38px │ │ Timer bar 3px │ │ Game area 100px (1 key/word) │ ├─────────────────────────────────┤ ← Row 2 ~220px (40%) │ Full-width keyboard │ ├─────────────────────────────────┤ ← Row 3 ~190px (35%) │ Left hand Right hand │ │ (side-by-side, full width) │ │ legend strip │ └─────────────────────────────────┘ */ /* ── CSS vars (PHP overrides these in ) ─────────── */ :root { --c-primary:#3b5bdb; --c-primary-dark:#2f4ac7; --c-primary-light:#4c6ef5; --c-primary-faint:#eef1ff; --c-primary-rgb:59,91,219; --c-stat-1:#3b5bdb; --c-stat-2:#2f9e44; --c-stat-3:#e03131; --c-stat-4:#1971c2; --c-bg:#eef1ff; --c-surface:#ffffff; --c-border:#d0d9f0; --c-shadow:rgba(59,91,219,.12); --c-text:#1a1f36; --c-text-sub:#4b5280; --c-text-muted:#8891b0; --c-pending:#a0aac8; --c-correct:#1a1f36; --c-incorrect:#e03131; --c-cursor:#3b5bdb; --f-pinky:#9c36b5; --f-ring:#0ca678; --f-middle:#f76707; --f-index:#e03131; --f-thumb:#868e96; --r:10px; --rs:6px; } /* ══════════════════════════════════════ LESSON CARD ══════════════════════════════════════ */ .fft-card { background:var(--c-surface); border:1.5px solid var(--c-border); border-radius:var(--r); padding:22px 20px 18px; display:flex; flex-direction:column; box-shadow:0 2px 10px var(--c-shadow); position:relative; overflow:hidden; transition:box-shadow .15s,transform .15s; font-family:inherit; } .fft-card:hover { box-shadow:0 5px 22px var(--c-shadow); transform:translateY(-2px); } .fft-card--featured { border-color:var(--c-primary); border-width:2px; } .fft-card.is-locked::after { content:'';position:absolute;inset:0;background:rgba(255,255,255,.65);z-index:5; } .fft-card.is-locked .fft-cta { opacity:.35;cursor:not-allowed; } .fft-card.is-locked .fft-lock-msg { display:block; } .fft-card-topbar { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px; } .fft-lesson-num { font-size:.7rem;font-weight:700;color:var(--c-primary);background:var(--c-primary-faint);border:1px solid var(--c-border);padding:2px 9px;border-radius:50px;letter-spacing:.04em;text-transform:uppercase; } .fft-card-status-icon { font-size:1.05rem; } .fft-card-icon { font-size:38px;margin-bottom:9px;display:block;line-height:1; } .fft-card-title { font-size:1.25rem;font-weight:800;color:var(--c-text);margin:0 0 3px;letter-spacing:-.02em; } .fft-card-subtitle { font-size:.81rem;color:var(--c-text-sub);font-style:italic;margin:0 0 13px; } .fft-card-specs { list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:4px; } .fft-card-specs li { background:var(--c-bg);border-radius:var(--rs);padding:7px 11px;display:flex;justify-content:space-between;font-size:.82rem; } .fft-spec-label { color:var(--c-text-sub); } .fft-spec-value { font-weight:700;color:var(--c-text); } .fft-cta { display:inline-block;background:var(--c-primary);color:#fff;border:none;border-radius:50px;padding:8px 22px;font-size:.85rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .15s;text-decoration:none;position:relative;z-index:6; } .fft-cta:hover { opacity:.88;transform:translateY(-1px);color:#fff; } .fft-lock-msg { display:none;font-size:.75rem;color:var(--c-text-muted);margin-top:5px; } /* ══════════════════════════════════════ TRAINER SHELL ══════════════════════════════════════ */ .fft-trainer { background:var(--c-surface); border:1.5px solid var(--c-border); border-radius:var(--r); overflow:hidden; font-family:inherit; display:flex; flex-direction:column; } /* ══════════════════════════════════════ ROW 1a — STATS BAR (~38px) ══════════════════════════════════════ */ .fft-trainer-bar { display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--c-bg); border-bottom:1px solid var(--c-border); padding:6px 16px; flex-shrink:0; } .fft-trainer-info { min-width:0; overflow:hidden; } .fft-trainer-name { font-weight:700;font-size:.82rem;color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2; } .fft-trainer-meta { font-size:.65rem;color:var(--c-text-muted);white-space:nowrap; } .fft-stats-row { display:flex;gap:14px;flex-shrink:0; } .fft-stat { text-align:center;min-width:32px; } .fft-sv { font-size:.9rem;font-weight:800;line-height:1; } .fft-sl { font-size:.52rem;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:1px; } .fft-stat:nth-child(1) .fft-sv { color:var(--c-stat-1); } .fft-stat:nth-child(2) .fft-sv { color:var(--c-stat-2); } .fft-stat:nth-child(3) .fft-sv { color:var(--c-text-muted); } .fft-stat:nth-child(4) .fft-sv { color:var(--c-stat-4); } /* ROW 1b — TIMER BAR (3px) */ .fft-pbar { height:3px;background:var(--c-border);flex-shrink:0; } .fft-pbar-fill { height:100%;width:100%;background:var(--c-primary);opacity:.65;transition:width 1s linear; } .fft-pbar-fill.low { background:var(--c-incorrect);opacity:.9; } /* ROW 1c — GAME AREA (100px exact) */ .fft-game-area { height:100px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--c-bg); border-bottom:1px solid var(--c-border); position:relative; overflow:hidden; } /* KEY MODE — big single letter */ .fft-keys-area { text-align:center; } .fft-target { font-size:4.5rem; font-weight:900; line-height:1; letter-spacing:-.03em; display:block; transition:color .07s,transform .08s; color:var(--c-text); } .fft-target.hit { animation:fft-pop .15s; } .fft-target.miss { animation:fft-shake .22s; color:var(--c-incorrect)!important; } .fft-target[data-finger="pinky"] { color:var(--f-pinky); } .fft-target[data-finger="ring"] { color:var(--f-ring); } .fft-target[data-finger="middle"] { color:var(--f-middle); } .fft-target[data-finger="index"] { color:var(--f-index); } .fft-target[data-finger="thumb"] { color:var(--f-thumb); } .fft-finger-hint { font-size:.72rem;color:var(--c-text-muted);margin-top:3px;font-weight:600;text-transform:capitalize; } /* WORD MODE — one word at a time, big centered */ .fft-word-stage { text-align:center; padding:0 20px; width:100%; } .fft-word-big { font-size:2.4rem; font-weight:900; font-family:'Courier New',monospace; letter-spacing:.08em; line-height:1; display:block; color:var(--c-text); transition:color .08s,transform .08s; margin-bottom:6px; } .fft-word-big.correct { color:var(--c-stat-2); animation:fft-pop .15s; } .fft-word-big.wrong { color:var(--c-incorrect); animation:fft-shake .2s; } .fft-word-typed { /* show what user typed character by character */ font-size:.95rem; font-family:'Courier New',monospace; font-weight:700; letter-spacing:.1em; display:block; min-height:1.2em; color:var(--c-primary); opacity:.85; } /* hidden input captures keystrokes */ .fft-word-input-hidden { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; top:50%; left:50%; } /* RESULT overlay */ .fft-result { position:absolute; inset:0; background:rgba(255,255,255,.95); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:20; animation:fft-fade .18s; } .fft-result-box { background:var(--c-surface); border:1.5px solid var(--c-border); border-radius:var(--r); padding:16px 20px; width:340px; max-width:calc(100% - 20px); text-align:center; box-shadow:0 6px 24px var(--c-shadow); animation:fft-up .2s; } .fft-result-emoji { font-size:1.6rem;margin-bottom:3px; } .fft-result-title { font-size:.93rem;font-weight:800;color:var(--c-text);margin:0 0 10px; } .fft-result-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:9px; } .fft-rg { background:var(--c-bg);border-radius:var(--rs);padding:8px 6px; } .fft-rv { font-size:1.05rem;font-weight:800;color:var(--c-primary); } .fft-rl { font-size:.57rem;color:var(--c-text-muted);text-transform:uppercase;margin-top:2px; } .fft-pass-chip { border-radius:var(--rs);padding:5px 10px;font-size:.76rem;font-weight:600;margin-bottom:9px; } .fft-pass-chip.pass { background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0; } .fft-pass-chip.fail { background:#fef2f2;color:var(--c-incorrect);border:1px solid #fecaca; } .fft-result-actions { display:flex;gap:7px;justify-content:center;flex-wrap:wrap; } .fft-login-nudge { font-size:.69rem;color:var(--c-text-muted);margin:7px 0 0; } .fft-btn { padding:6px 14px;border-radius:var(--rs);border:1.5px solid var(--c-border);background:var(--c-surface);color:var(--c-text);font-size:.79rem;font-weight:600;cursor:pointer;transition:.15s; } .fft-btn:hover { border-color:var(--c-primary);color:var(--c-primary); } .fft-btn-primary { background:var(--c-primary);border-color:var(--c-primary);color:#fff; } .fft-btn-primary:hover { background:var(--c-primary-dark);border-color:var(--c-primary-dark);color:#fff; } /* ══════════════════════════════════════ ROW 2 — KEYBOARD (~220px, 40%) Full width, centered keys ══════════════════════════════════════ */ .fft-kb-row-outer { background:var(--c-surface); border-bottom:1px solid var(--c-border); padding:14px 12px 16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .fft-kb { display:flex;flex-direction:column;gap:5px; } .fft-kb-row { display:flex;justify-content:center;gap:4px; } .fft-k { width:40px; height:40px; border:1.5px solid var(--c-border); border-bottom:3px solid var(--c-border); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:.76rem; font-weight:700; background:var(--c-surface); color:var(--c-text-muted); transition:.1s; user-select:none; cursor:default; } .fft-k-space { width:200px; } /* Finger tints */ .fft-k[data-f="pinky"] { background:rgba(156,54,181,.07); border-color:rgba(156,54,181,.3); color:var(--f-pinky); } .fft-k[data-f="ring"] { background:rgba(12,166,120,.07); border-color:rgba(12,166,120,.3); color:var(--f-ring); } .fft-k[data-f="middle"] { background:rgba(247,103,7,.07); border-color:rgba(247,103,7,.3); color:var(--f-middle); } .fft-k[data-f="index"] { background:rgba(224,49,49,.07); border-color:rgba(224,49,49,.3); color:var(--f-index); } .fft-k[data-f="thumb"] { background:rgba(134,142,150,.07); border-color:rgba(134,142,150,.3); color:var(--f-thumb); } /* Active key — full finger colour */ .fft-k.on { transform:translateY(2px); color:#fff!important; border-bottom-width:1px; } .fft-k.on[data-f="pinky"] { background:var(--f-pinky); border-color:var(--f-pinky); box-shadow:0 0 0 3px rgba(156,54,181,.2); } .fft-k.on[data-f="ring"] { background:var(--f-ring); border-color:var(--f-ring); box-shadow:0 0 0 3px rgba(12,166,120,.2); } .fft-k.on[data-f="middle"] { background:var(--f-middle); border-color:var(--f-middle); box-shadow:0 0 0 3px rgba(247,103,7,.2); } .fft-k.on[data-f="index"] { background:var(--f-index); border-color:var(--f-index); box-shadow:0 0 0 3px rgba(224,49,49,.2); } .fft-k.on[data-f="thumb"] { background:var(--f-thumb); border-color:var(--f-thumb); box-shadow:0 0 0 3px rgba(134,142,150,.2); } .fft-k.on:not([data-f]) { background:var(--c-primary);border-color:var(--c-primary); } .fft-k.err { border-color:var(--c-incorrect)!important;color:var(--c-incorrect)!important;animation:fft-shake .2s; } /* ══════════════════════════════════════ ROW 3 — HANDS (~190px, 35%) Both hands side-by-side, full width ══════════════════════════════════════ */ .fft-hands-row { background:var(--c-bg); padding:12px 20px 8px; display:flex; align-items:flex-end; justify-content:center; gap:60px; /* gap between left and right hand groups */ flex-shrink:0; } .fft-hand-group { display:flex; flex-direction:column; align-items:center; gap:5px; } .fft-hand-label { font-size:.6rem; font-weight:700; color:var(--c-text-muted); text-transform:uppercase; letter-spacing:.08em; } .fft-hand { display:flex; gap:6px; align-items:flex-end; } /* Individual finger */ .fft-finger { width:28px; border:2px solid; border-radius:9px 9px 4px 4px; display:flex; align-items:flex-start; justify-content:center; padding-top:5px; transition:transform .14s, box-shadow .14s, background .08s, border-color .08s; cursor:default; } .fft-finger span { font-size:.5rem;font-weight:700;opacity:.8;text-transform:uppercase;line-height:1; } /* Heights — compact so row 3 stays ~190px */ .f-pinky { height:58px; } .f-ring { height:74px; } .f-middle { height:86px; } .f-index { height:74px; } .f-thumb { height:48px; width:34px; border-radius:9px 4px 4px 9px; } .fft-rh .f-thumb { border-radius:4px 9px 9px 4px; } /* Resting tints */ .f-pinky { background:rgba(156,54,181,.1); border-color:rgba(156,54,181,.32); } .f-ring { background:rgba(12,166,120,.1); border-color:rgba(12,166,120,.32); } .f-middle { background:rgba(247,103,7,.1); border-color:rgba(247,103,7,.32); } .f-index { background:rgba(224,49,49,.1); border-color:rgba(224,49,49,.32); } .f-thumb { background:rgba(134,142,150,.1); border-color:rgba(134,142,150,.32);} .f-pinky span { color:var(--f-pinky); } .f-ring span { color:var(--f-ring); } .f-middle span { color:var(--f-middle);} .f-index span { color:var(--f-index); } .f-thumb span { color:var(--f-thumb); } /* Active — lift with full colour */ .f-pinky.up { background:var(--f-pinky); border-color:var(--f-pinky); transform:translateY(-13px); box-shadow:0 4px 12px rgba(156,54,181,.38); } .f-ring.up { background:var(--f-ring); border-color:var(--f-ring); transform:translateY(-13px); box-shadow:0 4px 12px rgba(12,166,120,.38); } .f-middle.up { background:var(--f-middle); border-color:var(--f-middle); transform:translateY(-13px); box-shadow:0 4px 12px rgba(247,103,7,.38); } .f-index.up { background:var(--f-index); border-color:var(--f-index); transform:translateY(-13px); box-shadow:0 4px 12px rgba(224,49,49,.38); } .f-thumb.up { background:var(--f-thumb); border-color:var(--f-thumb); transform:translateY(-9px); box-shadow:0 4px 12px rgba(134,142,150,.38); } .fft-finger.up span { color:#fff; opacity:1; } .fft-finger.tap { transform:translateY(3px)!important; filter:brightness(.82); box-shadow:none!important; } /* Colour legend strip */ .fft-legend-strip { background:var(--c-bg); border-top:1px solid var(--c-border); padding:5px 16px 8px; display:flex; gap:6px 12px; flex-wrap:wrap; justify-content:center; flex-shrink:0; } .fft-leg { font-size:.56rem; font-weight:600; color:var(--c-text-muted); display:flex; align-items:center; gap:3px; } .fft-leg::before { content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0; } .fft-leg--pinky::before { background:var(--f-pinky); } .fft-leg--ring::before { background:var(--f-ring); } .fft-leg--middle::before { background:var(--f-middle); } .fft-leg--index::before { background:var(--f-index); } .fft-leg--thumb::before { background:var(--f-thumb); } /* ══════════════════════════════════════ DASHBOARD (unchanged styling) ══════════════════════════════════════ */ .fft-dash { font-family:inherit;display:flex;flex-direction:column;gap:14px; } .fft-dash-login { text-align:center;padding:40px 16px;background:var(--c-bg);border:1.5px solid var(--c-border);border-radius:var(--r);color:var(--c-text-muted); } .fft-dash-login-icon { font-size:2rem;margin-bottom:7px; } .fft-dash-kpis { display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px; } .fft-kpi-card { background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:var(--r);padding:14px 10px;text-align:center; } .fft-kpi-val { font-size:1.35rem;font-weight:800;line-height:1; } .fft-kpi-lbl { font-size:.68rem;color:var(--c-text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.04em; } .fft-kpi-card:nth-child(1) .fft-kpi-val { color:var(--c-stat-1); } .fft-kpi-card:nth-child(2) .fft-kpi-val { color:var(--c-stat-2); } .fft-kpi-card:nth-child(3) .fft-kpi-val { color:var(--c-stat-4); } .fft-kpi-card:nth-child(4) .fft-kpi-val { color:var(--c-primary); } .fft-course-progress { background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:var(--r);padding:13px 16px; } .fft-cp-header { display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;color:var(--c-text-sub);margin-bottom:8px; } .fft-cp-count { color:var(--c-primary);font-weight:700; } .fft-cp-bar { background:var(--c-bg);border-radius:50px;height:7px;overflow:hidden; } .fft-cp-fill { height:100%;background:var(--c-primary);border-radius:50px;opacity:.7;transition:width .6s; } .fft-chart-section { background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:var(--r);padding:13px 16px; } .fft-chart-header { font-size:.76rem;font-weight:700;color:var(--c-text-sub);margin-bottom:11px;text-transform:uppercase;letter-spacing:.05em; } .fft-chart { display:flex;gap:3px;align-items:flex-end;height:76px; } .fft-bar-col { flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; } .fft-bar-inner { flex:1;width:100%;display:flex;align-items:flex-end; } .fft-bar { width:100%;background:var(--c-primary);opacity:.6;border-radius:3px 3px 0 0;min-height:2px;transition:height .4s; } .fft-bar-date { font-size:.52rem;color:var(--c-text-muted);white-space:nowrap; } .fft-lesson-table-wrap { background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:var(--r);padding:13px 16px; } .fft-lesson-table { width:100%;border-collapse:collapse;font-size:.81rem; } .fft-lesson-table th { font-size:.66rem;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.04em;padding:5px 7px;text-align:left;border-bottom:1px solid var(--c-border); } .fft-lesson-table td { padding:6px 7px;border-bottom:1px solid var(--c-bg);color:var(--c-text); } .fft-lesson-table tr:last-child td { border-bottom:none; } .fft-status-done { color:#15803d;font-size:.75rem;font-weight:600; } .fft-status-pend { color:#d97706;font-size:.75rem; } .fft-lesson-path { background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:var(--r);padding:13px 16px;overflow-x:auto; } .fft-lp-track { display:flex;align-items:center;min-width:max-content; } .fft-lp-node { display:flex;flex-direction:column;align-items:center;gap:3px;min-width:48px; } .fft-lp-circle { width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:700;border:2px solid var(--c-border);background:var(--c-bg);color:var(--c-text-muted);transition:.15s; } .fft-lp-node.done .fft-lp-circle { background:var(--c-primary);border-color:var(--c-primary);color:#fff; } .fft-lp-node.active .fft-lp-circle { border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-faint);box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.12); } .fft-lp-label { font-size:.6rem;color:var(--c-text-muted); } .fft-lp-connector { flex:1;height:2px;background:var(--c-border);min-width:14px;margin-bottom:18px; } .fft-lp-connector.done { background:var(--c-primary);opacity:.45; } /* ══════════════════════════════════════ ANIMATIONS ══════════════════════════════════════ */ @keyframes fft-shake { 0%,100%{transform:none} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} } @keyframes fft-fade { from{opacity:0} to{opacity:1} } @keyframes fft-up { from{transform:translateY(10px);opacity:0} to{transform:none;opacity:1} } @keyframes fft-pop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} } /* ══════════════════════════════════════ RESPONSIVE ══════════════════════════════════════ */ @media (max-width:540px) { .fft-k { width:30px;height:30px;font-size:.65rem; } .fft-k-space { width:140px; } .fft-target { font-size:3.4rem; } .fft-word-big { font-size:1.9rem; } .fft-hands-row { gap:30px;padding:10px 10px 6px; } .fft-finger { width:22px; } .f-pinky { height:46px; } .f-ring { height:58px; } .f-middle { height:68px; } .f-index { height:58px; } .f-thumb { height:38px; } }