/** * Naktahu participant-facing design system — v17 mockup fidelity pass. * Colors, layout, and component styles copied directly from * naktahu-participant-frontend-prototype-v17.html rather than approximated. */ .naktahu-public { --bg: #EAF7F3; --surface: #FFFFFF; --surface-2: #F7F6F3; --border: #E6E4DE; --border-strong: #B8B6AF; --text: #1C1B18; --text-secondary: #54524A; --text-muted: #78766D; --accent: #5B4CF0; --accent-soft: #EEECFD; --accent-strong: #4536D8; --success: #16C168; --danger: #D3453B; --brand-blue: #0B82B9; --brand-teal: #40D0C3; font-family: 'Inter', sans-serif; color: var(--text); max-width: 960px; margin: 0 auto; font-size: 16px; line-height: 1.55; padding: 48px 24px; box-sizing: border-box; } /* Mint page background behind the whole participant flow, on every screen (intro, intake, questions, results). Painted on — via the naktahu-assessment-page class added in maybe_add_body_class() — rather than on .naktahu-public itself, so it covers the full page edge-to-edge no matter how wide the active theme's content column is. */ body.naktahu-assessment-page { background: #EAF7F3; } /* Shared buttons */ .naktahu-public .np-btn { border: 1.5px solid var(--text); background: #fff; border-radius: 999px; padding: 12px 22px; font: 600 15px Inter, sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; color: var(--text); transition: .18s; background-clip: padding-box; overflow: hidden; } .naktahu-public .np-btn:hover { transform: translateY(-1px); background: var(--surface-2); } .naktahu-public .np-btn-primary, .naktahu-public .np-btn-gradient { background: linear-gradient(90deg, var(--brand-blue), var(--brand-teal)) !important; background-clip: padding-box !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 8px 22px rgba(18, 150, 188, .20); } .naktahu-public .np-btn-primary:hover, .naktahu-public .np-btn-gradient:hover { background: linear-gradient(90deg, #0A76AC, #38BEB2) !important; background-clip: padding-box !important; color: #fff !important; } .naktahu-public .np-btn:disabled, .naktahu-public .np-btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; pointer-events: none; } .naktahu-public .np-btn-primary.is-disabled { background: #D8D5CE !important; background-clip: padding-box !important; opacity: 1 !important; color: #fff !important; } /* Full-page "something is happening" overlay shown during the handful of real page-to-page navigations in the flow (see naktahuInitLoadingIndicator() in public.js, which creates and appends this element itself — nothing here is server-rendered). Fixed + high z-index so it sits above absolutely everything, including the confirm step and any other modal already on screen. Starts at opacity:0 and fades in via .is-visible (added a couple of animation frames after creation — see that function's comment on why) rather than appearing instantly, so it reads as a deliberate transition rather than a jarring flash. Never needs a "hide" state or transition back out — the page it's covering is about to be replaced by the next one navigating in, not returned to. */ .np-page-loading-overlay { position: fixed; inset: 0; background: rgba(28, 27, 24, .55); z-index: 100000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s ease; } .np-page-loading-overlay.is-visible { opacity: 1; } .np-page-loading-spinner { width: 42px; height: 42px; border: 3.5px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: naktahuSpin .7s linear infinite; } @keyframes naktahuSpin { to { transform: rotate(360deg); } } /* Language choice buttons (intro screen, dual-language mode) */ .naktahu-public .np-language-actions { display: flex; gap: 10px; flex-wrap: wrap; } .naktahu-public .np-language-actions .np-btn { min-width: 160px; } /* Cards */ .naktahu-public .np-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 34px; box-shadow: 0 14px 50px rgba(28, 27, 24, .045); } /* Instructions screen — shown after the welcome screen, before the question flow, only when the admin has configured content for it. See Naktahu_Public::render_instruction_screen(). Topbar + card are wrapped together at the SAME max-width (matching how .np-question-wrap constrains the question screen) so the assessment-name label in the topbar lines up with the card's right edge instead of stretching to the full .naktahu-public width while the card itself is narrower. */ .naktahu-public .np-instruction-wrap { max-width: 760px; margin: 0 auto; } .naktahu-public .np-instruction-card { max-width: none; margin: 0; } .naktahu-public .np-instruction-kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-blue); margin-bottom: 8px; } .naktahu-public .np-instruction-card .np-section-head { margin-bottom: 18px; } .naktahu-public .np-instruction-body { font-size: 15px; line-height: 1.65; color: var(--text-secondary); } .naktahu-public .np-instruction-body p { margin: 0 0 14px; } .naktahu-public .np-instruction-body p:last-child { margin-bottom: 0; } .naktahu-public .np-instruction-body strong, .naktahu-public .np-instruction-body b { color: var(--text); } .naktahu-public .np-instruction-body ul, .naktahu-public .np-instruction-body ol { margin: 0 0 14px; padding-left: 22px; } .naktahu-public .np-instruction-body li { margin-bottom: 6px; } .naktahu-public .np-instruction-body h1, .naktahu-public .np-instruction-body h2, .naktahu-public .np-instruction-body h3 { color: var(--text); font-weight: 700; margin: 20px 0 10px; } .naktahu-public .np-instruction-body h1:first-child, .naktahu-public .np-instruction-body h2:first-child, .naktahu-public .np-instruction-body h3:first-child { margin-top: 0; } .naktahu-public .np-instruction-body a { color: var(--brand-blue); } /* Answer Scale + Important Notes — auto-generated/optional blocks between the free-text instruction body and the Continue button. */ .naktahu-public .np-instruction-section { margin-top: 26px; } .naktahu-public .np-instruction-section h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 12px; } .naktahu-public .np-scale-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .naktahu-public .np-scale-item { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 8px; text-align: center; min-height: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .naktahu-public .np-scale-num { font-size: 15px; font-weight: 700; color: var(--text); } .naktahu-public .np-scale-text { font-size: 12px; line-height: 1.25; font-weight: 700; color: var(--text); } .naktahu-public .np-note-box { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; } .naktahu-public .np-note-box ul, .naktahu-public .np-note-box ol { margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 14px; line-height: 1.65; } .naktahu-public .np-note-box p { margin: 0 0 10px; color: var(--text-secondary); font-size: 14px; line-height: 1.65; } .naktahu-public .np-note-box p:last-child { margin-bottom: 0; } .naktahu-public .np-instruction-card .np-form-actions { margin-top: 26px; } @media (max-width: 760px) { .naktahu-public .np-scale-grid { grid-template-columns: 1fr; } .naktahu-public .np-scale-item { min-height: auto; flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; padding: 11px 13px; } } /* Intro / welcome screen */ .naktahu-public .np-welcome-card { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; box-shadow: 0 18px 60px rgba(28, 27, 24, .06); display: flex; align-items: stretch; } .naktahu-public .np-welcome-card.no-image { max-width: 600px; margin: 0 auto; } .naktahu-public .np-welcome-copy { flex: 1.08 1 0%; padding: 48px 56px; } .naktahu-public .np-client-logo { display: block; width: min(330px, 78%); height: auto; margin: 0 0 28px; } .naktahu-public .np-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--text) !important; font-weight: 700; margin: 0 0 22px; } .naktahu-public .np-welcome-copy h1 { font-size: 44px; line-height: 1.08; margin: 0 0 18px; font-weight: 700; } .naktahu-public .np-lead { font-size: 18px; color: var(--text-secondary); max-width: 580px; margin: 0 0 8px; } .naktahu-public .np-welcome-art { flex: .92 1 0%; align-self: stretch; min-height: 560px; background-size: cover; background-position: center; background-image: linear-gradient(180deg, rgba(0,112,177,.05), rgba(36,202,190,.06)); } .naktahu-public .np-meta-box { display: inline-flex; align-items: stretch; border: 1.5px solid var(--border-strong); border-radius: 14px; background: #fff; margin: 0 0 26px; overflow: hidden; } .naktahu-public .np-meta-item { font-size: 14px; color: #6F6D66; display: flex; gap: 5px; align-items: center; padding: 13px 18px; white-space: nowrap; } .naktahu-public .np-meta-text { display: inline-flex; align-items: center; height: 20px; line-height: 1; } .naktahu-public .np-meta-divider { width: 1.5px; align-self: stretch; background: var(--border-strong); flex: none; } .naktahu-public .np-meta-icon { width: 20px !important; height: 20px !important; min-width: 20px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--text-muted); overflow: visible; box-sizing: content-box; line-height: 0; } .naktahu-public .np-meta-icon svg { display: block; width: 20px !important; height: 20px !important; overflow: visible; stroke: currentColor; flex-shrink: 0; } .naktahu-public .np-lang-switch { margin-bottom: 16px; font-size: 13px; } .naktahu-public .np-lang-switch a { color: var(--text-muted); text-decoration: none; padding: 4px 8px; border-radius: 6px; } .naktahu-public .np-lang-switch a.active { color: var(--accent); font-weight: 600; background: var(--accent-soft); } @media (max-width: 760px) { .naktahu-public { padding: 25px 14px; } .naktahu-public .np-welcome-card { flex-direction: column; } .naktahu-public .np-welcome-copy { padding: 34px 26px; } .naktahu-public .np-client-logo { width: min(290px, 85%); margin-bottom: 24px; } .naktahu-public .np-welcome-copy h1 { font-size: 34px; } .naktahu-public .np-welcome-art { min-height: 340px; } .naktahu-public .np-meta-box { display: flex; width: 100%; margin: 0 0 22px; } .naktahu-public .np-meta-item { flex: 1; justify-content: center; padding: 12px 10px; font-size: 13px; } .naktahu-public .np-language-actions { display: grid; grid-template-columns: 1fr; } .naktahu-public .np-language-actions .np-btn { width: 100%; } .naktahu-public .np-answer { width: 100%; } .naktahu-public .np-progress-top, .naktahu-public .np-progress-track { width: 85%; } .naktahu-public .np-topbar-label { max-width: 170px; } } .naktahu-public *, .naktahu-public *::before, .naktahu-public *::after { box-sizing: border-box; } /* Demographic intake form */ .naktahu-public .np-section-head { margin-bottom: 20px; } .naktahu-public .np-section-head h2 { font: 700 28px/1.3 Inter, sans-serif; color: var(--text) !important; margin: 0 0 7px !important; } .naktahu-public .np-form-grid { display: grid !important; grid-template-columns: 1fr 1fr; row-gap: 16px; column-gap: 24px; align-items: start; } .naktahu-public .np-field { display: flex !important; flex-direction: column; gap: 7px; margin: 0 !important; padding: 0 !important; width: 100% !important; min-width: 0; } .naktahu-public .np-field.full { grid-column: 1 / -1; } .naktahu-public .np-field label { font-size: 13px; font-weight: 600; margin: 0 !important; padding: 0 !important; line-height: 1.3; } .naktahu-public .np-req { color: var(--danger); } .naktahu-public input[type=text], .naktahu-public input[type=email], .naktahu-public input[type=number], .naktahu-public input[type=date], .naktahu-public select, .naktahu-public textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; /* Explicit height (not just padding+line-height) for the same reason as .naktahu-mask-wrap and the select rule below: without it, a theme's own input reset can win by specificity and quietly shrink these a few px shorter than the mask-wrap/select fields next to them in the same grid row — exactly what happened to Full name/ Email before this line was added. textarea is excluded from the fixed height right below, since it needs to grow to several rows. */ height: 48px !important; padding: 13px 14px !important; margin: 0 !important; border: 1.5px solid var(--border-strong) !important; border-radius: 999px !important; background: #fff; font: 15px Inter, sans-serif !important; color: var(--text); line-height: 1.3 !important; vertical-align: middle; } /* Selects get their own native height/padding/arrow by default, which can render a few px off from a plain text input even with identical CSS — removing that native chrome and drawing our own arrow guarantees every field in the grid lines up pixel-for-pixel. */ .naktahu-public select { appearance: none; -webkit-appearance: none; -moz-appearance: none; /* Text inputs center their single line of text fine using top/bottom padding, but a