/* ========================================================== TypingTutor.Online Capsule True Front Layer v17.0.9 File: css/capsule-front-layer.css ========================================================== */ /* * This file loads AFTER keyboard.css and every other stylesheet. * It creates one explicit stacking order for Capsule / Ribbon mode: * * 1. keyboard card background * 2. all key surfaces, borders, symbols and highlights * 3. capsule/ribbon fingers * 4. target-row guide * * The key characters remain naturally visible through the translucent skin, * but they no longer render as separate foreground objects above the fingers. */ html[data-hand-guidance-style="capsule"] .keyboard-guidance-card { position: relative !important; isolation: isolate !important; } /* Put the complete keyboard—including labels and highlighted keys—below hands. */ html[data-hand-guidance-style="capsule"] #keyboardContainer { position: relative !important; z-index: 1 !important; isolation: isolate !important; } html[data-hand-guidance-style="capsule"] #keyboardContainer .keyboard-row, html[data-hand-guidance-style="capsule"] #keyboardContainer .key, html[data-hand-guidance-style="capsule"] #keyboardContainer .key-primary, html[data-hand-guidance-style="capsule"] #keyboardContainer .key-secondary, html[data-hand-guidance-style="capsule"] #keyboardContainer .home-bump { z-index: 1 !important; } /* * Key-secondary may be absolutely positioned by keyboard.css. * Do not alter its position—only keep its stacking below the hand overlay. */ html[data-hand-guidance-style="capsule"] #keyboardContainer .key-secondary { position: absolute !important; } /* The entire hand artwork is now one guaranteed foreground layer. */ html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay { position: absolute !important; z-index: 50 !important; opacity: 1 !important; transform: translateZ(0); pointer-events: none !important; } html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay svg, html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-finger, html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-segment, html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-base { position: relative; z-index: 1; } /* Keep fingers translucent, but give the foreground silhouette more presence. */ html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline { opacity: .94 !important; filter: drop-shadow( 0 2px 2px rgba(92, 65, 44, .13) ) !important; } html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-body { opacity: .96 !important; } /* * Active finger stays soft and transparent. The blue border is clearer than * the key highlight, so the finger—not the key—is the main visual guide. */ html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay { --capsule-edge-active: rgba(66, 126, 244, .62) !important; } html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-outline { filter: drop-shadow( 0 0 5px rgba(66, 126, 244, .24) ) !important; } /* Target key stays below the finger and uses a lighter background. */ html[data-hand-guidance-style="capsule"] #keyboardContainer .key-next { z-index: 1 !important; background: rgba(47, 103, 246, .11) !important; border-color: rgba(79, 139, 255, .66) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 0 0 3px rgba(47, 103, 246, .07) !important; } html[data-theme="dark"] [data-hand-guidance-style="capsule"] #keyboardContainer .key-next { background: rgba(79, 139, 255, .13) !important; border-color: rgba(112, 169, 255, .68) !important; } /* The target-row chips remain usable above the hand illustration. */ html[data-hand-guidance-style="capsule"] #targetRowGuide { position: relative !important; z-index: 70 !important; } /* Other hand modes keep their existing calibrated layers. */ /* ========================================================== CAPSULE FRONT-DEPTH POLISH v17.0.10 ========================================================== */ /* * The overlay was already above the keyboard in v17.0.9. Because the skin * body was only about 14–18% opaque, the key borders and characters remained * so clear that the fingers still looked as if they were underneath. * * This pass keeps them translucent but gives the skin enough coverage to * visually occlude the key surface and read unmistakably as the front layer. */ html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay { --capsule-skin: rgba(238, 225, 209, .42) !important; --capsule-skin-active: rgba(238, 225, 209, .46) !important; --capsule-edge: rgba(170, 139, 112, .58) !important; --capsule-edge-active: rgba(66, 126, 244, .66) !important; } html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-body { opacity: 1 !important; mix-blend-mode: normal !important; } html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline { opacity: .98 !important; mix-blend-mode: normal !important; filter: drop-shadow( 0 2px 3px rgba(83, 58, 39, .16) ) !important; } /* Warm skin body stays visible inside the active blue instructional edge. */ html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-body { stroke: rgba(232, 220, 207, .48) !important; } html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-outline { filter: drop-shadow( 0 0 5px rgba(66, 126, 244, .28) ), drop-shadow( 0 2px 2px rgba(83, 58, 39, .12) ) !important; } /* The expected key remains visible but no longer visually overpowers hand. */ html[data-hand-guidance-style="capsule"] #keyboardContainer .key-next { background: rgba(47, 103, 246, .08) !important; border-color: rgba(79, 139, 255, .58) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 2px rgba(47, 103, 246, .06) !important; } html[data-theme="dark"] [data-hand-guidance-style="capsule"] #handsKeyboardOverlay { --capsule-skin: rgba(214, 183, 153, .36) !important; --capsule-skin-active: rgba(220, 191, 162, .40) !important; --capsule-edge: rgba(228, 204, 181, .55) !important; } html[data-theme="dark"] [data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-body { stroke: rgba(217, 188, 160, .42) !important; } /* ========================================================== LIGHT WARM CAPSULE SKIN v17.0.11 ========================================================== */ /* * Keep the confirmed foreground stacking from v17.0.10, but return to a * lighter peach-cream skin tone. Opacity remains high enough to visually * separate fingers from the keyboard while preserving label readability. */ html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay { --capsule-skin: rgba(251, 232, 214, .34) !important; --capsule-skin-active: rgba(252, 233, 216, .38) !important; --capsule-edge: rgba(205, 167, 134, .44) !important; --capsule-edge-active: rgba(75, 136, 250, .58) !important; } html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline { opacity: .92 !important; filter: drop-shadow( 0 2px 3px rgba(116, 75, 45, .12) ) !important; } html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-body { opacity: 1 !important; } html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-body { stroke: rgba(252, 233, 216, .40) !important; } html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-outline { filter: drop-shadow( 0 0 5px rgba(75, 136, 250, .22) ), drop-shadow( 0 2px 2px rgba(116, 75, 45, .10) ) !important; } html[data-theme="dark"] [data-hand-guidance-style="capsule"] #handsKeyboardOverlay { --capsule-skin: rgba(232, 198, 167, .32) !important; --capsule-skin-active: rgba(237, 204, 174, .36) !important; --capsule-edge: rgba(237, 211, 187, .46) !important; } html[data-theme="dark"] [data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-body { stroke: rgba(237, 204, 174, .38) !important; }