/* * kaden-enhancements.css * Styles for the Kaden Onboarding Portal enhancement layer. * Works alongside the compiled React bundle without modifying it. * * Covers: * 1. Step progress bar (top of viewport) * 2. Persistent floating IT support widget * 3. Certificate explanation note * 4. "What's Next" cards on the done screen * 5. Print certificate button * 6. Shared animations * 7. Responsive adjustments * 8. Print media styles * * Theme: dark by default (Kaden brand). Switches to light only when * explicitly carries the class "light". The html:not(.dark) selector has been * intentionally removed — it matched too broadly and forced light mode whenever * the React app had not yet set a theme class, causing an incorrect flash. */ /* ── CSS custom properties ──────────────────────────────────────────────────── */ :root { --kd-enh-bg: #131f17; --kd-enh-bg-panel: #1a2820; --kd-enh-bg-card: #1e3025; --kd-enh-text: #e0ddd4; --kd-enh-text-muted: #8a9e90; --kd-enh-border: rgba(45, 122, 74, 0.28); --kd-enh-primary: #2d7a4a; --kd-enh-primary-10: rgba(45, 122, 74, 0.10); --kd-enh-primary-20: rgba(45, 122, 74, 0.20); --kd-enh-gold: #dab87a; --kd-enh-radius: 0.875rem; --kd-enh-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); --kd-enh-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35); --kd-enh-font: 'Cairo', 'Outfit', system-ui, sans-serif; --kd-enh-bar-h: 44px; } /* Light mode — only when explicitly set by the app */ html.light { --kd-enh-bg: #f0ede6; --kd-enh-bg-panel: #faf8f4; --kd-enh-bg-card: #f2efe8; --kd-enh-text: #1a2e20; --kd-enh-text-muted: #5a7060; --kd-enh-border: rgba(45, 122, 74, 0.22); --kd-enh-primary-10: rgba(45, 122, 74, 0.08); --kd-enh-primary-20: rgba(45, 122, 74, 0.16); --kd-enh-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); --kd-enh-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08); } /* ══════════════════════════════════════════════════════════════════════════════ 1. STEP PROGRESS BAR Fixed to the top of the viewport. Shown from step 1 onward. ══════════════════════════════════════════════════════════════════════════════ */ #kd-progress-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; height: var(--kd-enh-bar-h); display: flex; align-items: center; padding: 0 1.25rem; background: var(--kd-enh-bg); border-bottom: 1px solid var(--kd-enh-border); font-family: var(--kd-enh-font); gap: 0.75rem; transition: opacity 0.3s ease; /* backdrop-filter not used — avoids z-index stacking context issues with React modals */ } #kd-progress-bar[hidden] { display: none; } #kd-progress-track { flex: 1; height: 3px; background: var(--kd-enh-border); border-radius: 99px; overflow: hidden; min-width: 60px; max-width: 240px; } #kd-progress-fill { height: 100%; background: linear-gradient(90deg, var(--kd-enh-primary), var(--kd-enh-gold)); border-radius: 99px; width: 0%; transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1); } #kd-progress-label { font-size: 0.7rem; color: var(--kd-enh-text-muted); white-space: nowrap; flex-shrink: 0; letter-spacing: 0.015em; } #kd-progress-steps { display: flex; gap: 5px; align-items: center; flex-shrink: 0; } .kd-prog-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kd-enh-border); transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease; cursor: default; flex-shrink: 0; } .kd-prog-dot.done { background: var(--kd-enh-primary); } .kd-prog-dot.active { background: var(--kd-enh-gold); transform: scale(1.5); /* Widen slightly so the active dot stands out in RTL layouts too */ width: 7px; height: 7px; } /* * Only push content down when the bar is actually visible. * Avoids a 44px layout flash before JS creates the bar element. * The bar is inserted as a sibling immediately before #root, so the ~ selector works. */ #kd-progress-bar:not([hidden]) ~ #root { padding-top: var(--kd-enh-bar-h); } /* ══════════════════════════════════════════════════════════════════════════════ 2. FLOATING IT SUPPORT WIDGET Fixed to the bottom-end corner. Visible on every step. ══════════════════════════════════════════════════════════════════════════════ */ #kd-support-widget { position: fixed; bottom: 1.5rem; inset-inline-end: 1.5rem; z-index: 10001; font-family: var(--kd-enh-font); display: flex; flex-direction: column; align-items: flex-end; } #kd-support-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--kd-enh-border); background: var(--kd-enh-bg-panel); color: var(--kd-enh-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--kd-enh-shadow-sm); transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; flex-shrink: 0; } #kd-support-btn:hover, #kd-support-btn[aria-expanded="true"] { color: var(--kd-enh-primary); border-color: var(--kd-enh-primary); transform: scale(1.1); box-shadow: 0 0 0 3px var(--kd-enh-primary-10), var(--kd-enh-shadow-sm); } #kd-support-btn:focus-visible { outline: 2px solid var(--kd-enh-primary); outline-offset: 3px; } /* Keyboard shortcut hint below the button */ #kd-support-btn-hint { font-size: 0.6rem; color: var(--kd-enh-text-muted); opacity: 0.6; text-align: center; margin-top: 0.25rem; letter-spacing: 0.02em; user-select: none; pointer-events: none; } #kd-support-panel { position: absolute; bottom: calc(100% + 0.75rem); inset-inline-end: 0; width: 240px; background: var(--kd-enh-bg-panel); border: 1px solid var(--kd-enh-border); border-radius: var(--kd-enh-radius); box-shadow: var(--kd-enh-shadow); padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; animation: kd-panel-in 0.18s ease; } #kd-support-panel[hidden] { display: none; } @keyframes kd-panel-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } #kd-support-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--kd-enh-primary); margin: 0 0 0.1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--kd-enh-border); } .kd-support-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.79rem; color: var(--kd-enh-text); text-decoration: none; padding: 0.3rem 0.45rem; border-radius: 0.5rem; transition: background 0.15s ease, color 0.15s ease; } a.kd-support-row:hover { background: var(--kd-enh-primary-10); color: var(--kd-enh-gold); } .kd-support-row svg { color: var(--kd-enh-text-muted); flex-shrink: 0; transition: color 0.15s ease; } a.kd-support-row:hover svg { color: var(--kd-enh-primary); } .kd-support-row.kd-support-ticket { background: var(--kd-enh-primary-10); border: 1px solid var(--kd-enh-border); border-radius: 0.5rem; color: var(--kd-enh-text); font-weight: 500; } a.kd-support-row.kd-support-ticket:hover { background: var(--kd-enh-primary-20); color: var(--kd-enh-text); border-color: var(--kd-enh-primary); } .kd-support-divider { height: 1px; background: var(--kd-enh-border); margin: 0.1rem 0; } /* ══════════════════════════════════════════════════════════════════════════════ 3. CERTIFICATE EXPLANATION NOTE Injected after the certificate body paragraph on the done screen. ══════════════════════════════════════════════════════════════════════════════ */ #kd-cert-note { font-size: 0.78rem; line-height: 1.7; color: var(--kd-enh-text-muted); margin-top: 0.85rem; margin-bottom: 0; padding: 0.7rem 0.9rem; background: var(--kd-enh-primary-10); border: 1px solid var(--kd-enh-border); border-radius: 0.65rem; font-family: var(--kd-enh-font); text-align: start; animation: kd-fade-slide-in 0.4s ease; } /* ══════════════════════════════════════════════════════════════════════════════ 4. "WHAT'S NEXT" CARDS Injected after the certificate card on the done screen. Each item rendered as a card-like row for visual weight and scannability. ══════════════════════════════════════════════════════════════════════════════ */ #kd-whats-next { margin-top: 1.5rem; text-align: start; font-family: var(--kd-enh-font); animation: kd-fade-slide-in 0.45s ease 0.1s both; } .kd-wn-heading { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kd-enh-primary); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--kd-enh-border); } .kd-wn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .kd-wn-item { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.82rem; color: var(--kd-enh-text); line-height: 1.6; padding: 0.65rem 0.85rem; background: var(--kd-enh-bg-card); border: 1px solid var(--kd-enh-border); border-radius: 0.75rem; transition: border-color 0.2s ease, background 0.2s ease; } .kd-wn-item:hover { border-color: var(--kd-enh-primary); background: var(--kd-enh-primary-10); } .kd-wn-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.6; } .kd-wn-item a { color: var(--kd-enh-gold); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(218, 184, 122, 0.35); transition: text-decoration-color 0.15s ease; } .kd-wn-item a:hover { text-decoration-color: var(--kd-enh-gold); } /* ══════════════════════════════════════════════════════════════════════════════ 5. PRINT CERTIFICATE BUTTON Injected below the "What's Next" block on the done screen. ══════════════════════════════════════════════════════════════════════════════ */ #kd-print-btn { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding: 0.6rem 1.2rem; background: transparent; border: 1px solid var(--kd-enh-border); border-radius: 0.65rem; color: var(--kd-enh-text-muted); font-family: var(--kd-enh-font); font-size: 0.8rem; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; animation: kd-fade-slide-in 0.4s ease 0.2s both; } #kd-print-btn:hover { border-color: var(--kd-enh-primary); color: var(--kd-enh-text); background: var(--kd-enh-primary-10); } #kd-print-btn:focus-visible { outline: 2px solid var(--kd-enh-primary); outline-offset: 2px; } #kd-print-btn svg { flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════════════════════ 6. SHARED ANIMATION ══════════════════════════════════════════════════════════════════════════════ */ @keyframes kd-fade-slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════════════════════════════════════ 7. RESPONSIVE ADJUSTMENTS ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { #kd-support-panel { width: 210px; } #kd-progress-label { display: none; } #kd-support-btn-hint { display: none; } } /* ══════════════════════════════════════════════════════════════════════════════ 8. PRINT STYLES When printing the certificate page, hide all UI chrome. The React certificate card prints with its own styles. ══════════════════════════════════════════════════════════════════════════════ */ @media print { #kd-progress-bar, #kd-support-widget, #kd-whats-next, #kd-print-btn, #kd-preload { display: none !important; } /* Remove progress bar padding from root when printing */ #kd-progress-bar:not([hidden]) ~ #root { padding-top: 0 !important; } /* Certificate note is useful to keep in print output */ #kd-cert-note { border: 1px solid #ccc; background: #f9f9f9; color: #555; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }