/* ==========================================================================
EnergyFocus — Design tokens (NeuPractix shared "Calm Premium Wellness" system)
Copied from the EyeFocus reference; only the accent hue was changed.
========================================================================== */
:root {
/* Core Color Palette */
--bg: #F0F4F8; /* Soft Blue-Grey — base background */
--white: #FFFFFF;
--border: #E2E8F0;
--circle-bg: #E1E8F0;
--circle-rim: #B9C6D6;
--text: #1E293B; /* Deep Slate — primary text */
--muted: #526079;
--muted-text: #475569; /* darker body-copy shade used inside expanded welcome-screen cards, matched to reference */
--muted-light: #64748B; /* lighter subtitle shade used under the welcome hero title, matched to reference */
--gold: #e8b800;
--gold-dark: #c09600;
--green: #14B8A6; /* Healing Mint-Teal — shared portfolio success/healthy state (kept as-is; EnergyFocus's own brand teal is the separate --teal token below) */
--yellow-m: #d4a000;
--orange-m: #e07020;
--red-m: #F43F5E;
--accent: #903FF9; /* EnergyFocus PRIMARY BRAND COLOR — electric violet, sampled directly from the logo's compass-ring gradient (distinct from EaseFocus's softer periwinkle #9C8FF0) */
--accent-dark: #5F2ED1;
--accent-rgb: 144,63,249; /* same color as --accent, as an r,g,b triplet — every rgba(accent, alpha) below reads this var instead of hardcoding the triplet, so re-theming a sibling app only means editing this block */
--accent-soft: rgba(var(--accent-rgb), 0.08);
/* Accessible TEXT-ONLY variants — never used as backgrounds/borders */
--accent-text: #4A22B8; /* darkened from --accent to 9.5:1 contrast on white/--bg, checked programmatically */
--green-text: #0F766E;
--red-text: #BE123C;
--yellow-text: #8A6000;
--orange-text: #A04C17;
--navy: #1E293B;
--indigo-deep: #1E1B4B;
--teal: #00BFAE; /* EnergyFocus's own teal — sampled from the logo's "Energy" wordmark gradient */
--violet: #903FF9;
--gradient-brand: linear-gradient(135deg, #00BFAE 0%, #903FF9 100%);
--gradient-focus: linear-gradient(90deg, #00BFAE 0%, #903FF9 100%);
/* Rainbow button gradient per Lea's reference icon (purple -> pink -> orange -> yellow).
Stops are lightened slightly from the icon's raw colors so --navy button text keeps
WCAG AA contrast (>=4.5:1) at every stop — the icon's own saturated purple/pink would
drop navy-on-purple to ~2.5:1, which is unreadable. */
--gradient-cta: linear-gradient(135deg, #B685F5 0%, #FF6FB5 35%, #FF8A00 70%, #FFD60A 100%);
/* Dual-theme surface tokens: #test is shared between the assessment
(light — same background as the home page, per Lea's spec) and the
daily training session (dark, via .dark-screen toggled on dynamically
in js/training.js). Progress bar / step label / instruction sub-text
are literally the same DOM elements in both contexts, so they read
these variables instead of a hardcoded white — dark defaults here,
.dark-screen below overrides them back to white-on-dark. */
--surface-text-soft: rgba(30,41,59,0.65);
--surface-track: rgba(30,41,59,0.15);
--font-body: 'Assistant', sans-serif;
--font-ui: 'Rubik', sans-serif;
--glow-primary: 0 0 25px rgba(var(--accent-rgb),0.2), 0 4px 12px rgba(var(--accent-rgb),0.15);
--glow-accent: 0 0 25px rgba(20,184,166,0.25), 0 4px 12px rgba(20,184,166,0.15);
--glass-bg: rgba(255,255,255,0.85);
--glass-border: rgba(255,255,255,0.6);
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: #D7DBE3; /* empirically-measured EyeFocus reference background, not the --bg token */
color: var(--text);
font-family: var(--font-body);
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
body { position: relative; min-height: 100vh; min-height: 100dvh; }
/* Global image protection (2026-08-31): every ![]()
in the app is decorative
art (chakra figures, icons, illustrations) that a mobile browser would
otherwise treat as a "real" photo — long-press brings up Save/Share/Copy/
Open-in-new-tab, and a drag attempt shows a translucent "ghost" outline
(reported as "a weird transparent square that looks like it marks a
frame"). None of that is ever wanted here, so it is switched off for
every image site-wide rather than case by case. */
img {
max-width: 100%; display: block;
-webkit-touch-callout: none; /* iOS Safari long-press menu */
-webkit-user-select: none;
user-select: none;
-webkit-user-drag: none; /* Safari drag-ghost */
user-drag: none;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: var(--font-ui); cursor: pointer; }
h1, h2, h3 { font-family: var(--font-ui); margin: 0; }
.app-shell {
max-width: 480px;
margin: 0 auto;
min-height: 100vh;
min-height: 100dvh;
background: var(--bg);
position: relative;
box-shadow: var(--border) 0 0 0 1px, rgba(0,15,71,0.16) 0 12px 60px 0;
}
/* ---------- Screens ---------- */
.screen { display: none; position: relative; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.screen.active { display: flex; animation: screenFadeIn 350ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes screenFadeIn {
from { opacity: 0; transform: translateY(6px) scale(0.99); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.screen.active { animation: none; }
}
/* ---------- Buttons ---------- */
.btn-primary {
padding: 14px 22px;
background: var(--gradient-cta);
color: var(--navy);
border: none;
border-radius: 999px;
font-weight: 900;
font-size: 16px;
box-shadow: var(--glow-primary);
transition: transform .12s, filter .15s;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary:hover { filter: brightness(0.96); }
.btn-primary:active { transform: scale(0.96); }
.btn-quiet {
padding: 12px 18px;
background: var(--accent-soft);
color: var(--accent-text);
border: 1.5px solid rgba(var(--accent-rgb),0.25);
border-radius: 999px;
font-weight: 700;
font-size: 14px;
}
/* ---------- Top bar / language picker ---------- */
.welcome-top {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px 6px;
}
.welcome-top .wordmark { height: 34px; width: auto; }
.lang-picker { display: flex; align-items: center; gap: 8px; }
.lang-dd { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.langSel {
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
padding: 5px 10px;
border-radius: 10px;
border: 1px solid var(--border);
background-color: var(--white);
box-shadow: none;
color: var(--navy);
}
/* ---------- Hero ---------- */
.welcome-hero-wrap {
width: 100%;
padding: 4px 16px;
}
.welcome-hero-wrap img {
width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
border-radius: 14px;
}
.welcome-intro { padding: 22px 22px 8px; text-align: center; }
.welcome-intro h1 {
font-family: var(--font-body); font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--navy);
outline: none;
}
.welcome-intro p.subtitle {
margin: 12px 0 20px; color: var(--muted-light); font-size: 14.5px; line-height: 1.6;
}
/* ---------- Sections ---------- */
.welcome-section { padding: 26px 22px; border-top: 1px solid var(--border); }
.welcome-section h2 { font-family: var(--font-body); font-size: 15.5px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.welcome-section p { color: var(--muted-text); font-size: 13.5px; line-height: 1.7; margin: 0 0 6px; }
.more-toggle {
display: inline; color: var(--accent-text); font-weight: 700; font-size: 13.5px;
font-family: var(--font-body); cursor: pointer; border: none; background: none; padding: 0;
}
.more-content { display: none; margin-top: 10px; }
.more-content.open { display: block; }
.more-content ul { margin: 10px 0; padding-inline-start: 20px; }
.more-content li { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin-bottom: 8px; }
/* Research card */
.research-card {
margin-top: 8px; border: 1.25px solid #EEF0F3; border-radius: 14px;
background: var(--white); padding: 12px 16px;
}
.research-card summary {
cursor: pointer; padding: 0; font-weight: 700; font-size: 13.5px; color: var(--accent-text);
list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.research-card summary::-webkit-details-marker { display: none; }
.research-card .research-intro { color: var(--muted-text); font-size: 13.5px; line-height: 22.95px; margin: 10px 0 0; }
.research-card .research-intro:empty { display: none; }
.research-list { list-style: none; margin: 10px 0 0; padding: 0; }
.research-item { margin: 0 0 14px; }
.research-item:last-child { margin-bottom: 0; }
.research-item .r-title { font-weight: 400; font-size: 12.5px; line-height: 20px; color: var(--muted-text); margin: 0 0 4px; }
.research-item .r-title strong { font-weight: 700; }
.research-item .r-cite { font-size: 11.5px; color: #94A3B8; margin: 0; }
.research-item .r-links a { color: var(--accent-text); text-decoration: underline; margin-inline-end: 8px; }
/* Method steps */
.welcome-step {
border: 1.25px solid #EEF0F3; border-radius: 14px; background: var(--white);
margin: 8px 0; padding: 12px 16px;
}
.welcome-step summary {
list-style: none; cursor: pointer; padding: 0; display: flex; align-items: center; gap: 10px;
font-weight: 700; font-size: 13.5px; color: var(--accent-text);
}
.welcome-step summary::-webkit-details-marker { display: none; }
.welcome-step .step-icon { width: 30px; height: 30px; flex-shrink: 0; }
.welcome-step .step-num {
font-family: var(--font-ui); font-weight: 900; color: var(--accent-text); font-size: 13px;
}
.welcome-step .step-detail { color: var(--muted-text); font-size: 13.5px; line-height: 22.95px; margin: 10px 0 0; padding: 0; }
[dir="rtl"] .welcome-step .step-detail { margin: 10px 0 0; padding: 0; }
/* Explore tiles */
.welcome-explore-section h2 a { color: var(--navy); }
.explore-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px;
}
.explore-tile { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
.explore-tile img { width: 100%; height: 100%; object-fit: cover; }
.explore-tile .tile-label {
position: absolute; inset-inline-start: 0; bottom: 0; width: 100%;
padding: 8px 10px; font-size: 12.5px; font-weight: 800; color: #fff;
background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
}
/* CTA bubble — narrower than full-width, centered with visible side gaps
(matches the reference MoveFocus button proportions) */
.welcome-cta-wrap { text-align: center; margin-top: 4px; }
.welcome-cta-wrap .btn-primary { width: 82%; }
/* Footer */
.app-footer {
margin-top: auto; padding: 22px; text-align: center;
font-size: 12px; color: var(--muted); position: relative;
}
.app-footer .footer-link { color: var(--muted); text-decoration: underline; pointer-events: auto; }
/* ---------- Auth screen (ground-truth: MoveFocus's real css/styles.css + js/auth.js) ---------- */
#auth { background: var(--bg); align-items: center; justify-content: center; overflow-y: auto; padding: 28px 24px 40px; }
.auth-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 28px; }
.auth-top .lang-picker { align-self: center; }
.auth-logo { cursor: pointer; border-radius: 18px; }
.auth-logo-img {
width: 150px; height: 150px; object-fit: contain; background: var(--white);
border-radius: 18px; box-shadow: 0 4px 20px rgba(var(--accent-rgb),0.14);
}
.auth-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 18px; }
.auth-top .auth-sub { color: var(--muted); font-size: 13px; margin: 0; max-width: 260px; text-align: center; line-height: 1.5; }
.field-label { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 6px; display: block; }
.text-input {
width: 100%; padding: 13px 16px; border-radius: 14px; border: 1.5px solid var(--border);
background: var(--white); font-size: 15px; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
font-family: var(--font-body);
}
.text-input.err { border-color: var(--red-m); box-shadow: 0 0 0 3px rgba(244,63,94,0.1); }
.text-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18); border-color: var(--accent); }
.name-input-row {
display: flex; flex-direction: row; gap: 8px; align-items: stretch;
width: 100%; max-width: 340px; margin: 0 0 20px;
}
.name-input-row .text-input { flex: 1; min-width: 0; }
.name-input-row .btn-primary, .name-input-row .btn-quiet { flex-shrink: 0; white-space: nowrap; }
.err-msg { display: none; color: var(--red-text); font-size: 12px; margin: -14px 0 8px; padding-inline-start: 4px; width: 100%; max-width: 340px; }
.err-msg.show { display: block; }
.home-link {
display: block; background: none; border: none; padding: 0 0 4px; margin: 0 0 4px;
color: var(--muted); font-size: 14px; font-family: var(--font-body); text-decoration: underline;
text-align: center; cursor: pointer;
}
.restore-section { display: none; width: 100%; max-width: 340px; border-top: 1px dashed var(--border); padding-top: 14px; margin-top: 4px; }
.restore-section.show { display: block; }
.restore-label { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 8px; text-align: start; }
.section-label { width: 100%; max-width: 340px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.users-list { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.user-row {
display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
background: var(--white); border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.04);
cursor: pointer;
}
.user-avatar {
width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
background: var(--gradient-cta); display: flex; align-items: center; justify-content: center;
overflow: hidden; font-family: var(--font-ui); font-weight: 900; font-size: 15px; color: var(--navy);
border: none; cursor: pointer;
}
.user-avatar:hover { box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18); }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-emoji { font-size: 18px; line-height: 1; }
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 14px; font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.user-arrow { font-size: 18px; color: var(--border); flex-shrink: 0; transform: scaleX(var(--dir-flip, 1)); }
[dir="rtl"] .user-arrow { transform: scaleX(-1); }
.empty-state { text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.7; padding: 18px 10px; }
.empty-state .es-icon { display: block; font-size: 26px; margin-bottom: 6px; }
.device-notice {
margin: 16px 22px; padding: 12px 14px; border-radius: 14px; background: rgba(244,63,94,0.06);
border: 1px solid rgba(244,63,94,0.18); font-size: 12.5px; color: var(--red-text); font-weight: 700;
text-align: center;
}
/* ---------- Consent screen ---------- */
.consent-top-nav { padding: 18px 22px 0; }
.consent-back-link { display: inline-block; margin: 0; padding: 0; }
.consent-wrap { padding: 10px 22px 30px; flex: 1; }
.consent-card {
background: var(--glass-bg); border: 1.5px solid var(--glass-border); border-radius: 22px;
padding: 24px 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.consent-title { font-family: var(--font-ui); font-size: 18px; font-weight: 900; text-align: center; margin: 0; }
.consent-sub { font-size: 13px; color: var(--muted); text-align: center; margin: -8px 0 0; font-weight: 400; }
.consent-sub strong { font-weight: 800; color: var(--text); }
.consent-scroll {
max-height: 44vh; overflow-y: auto; font-size: 13px; line-height: 1.65;
background: var(--bg); border-radius: 14px; padding: 14px; border: 1px solid var(--border);
}
.consent-scroll p { margin: 0 0 10px; color: var(--text); }
.consent-scroll a { color: var(--accent-text); font-weight: 700; text-decoration: underline; font-size: 13px; }
.consent-danger {
background: rgba(244,63,94,0.06); border: 1.5px solid rgba(244,63,94,0.25); border-radius: 12px;
padding: 10px 12px; color: var(--red-text) !important;
}
.consent-danger strong { display: block; margin-bottom: 4px; }
.consent-check { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.55; color: var(--text); cursor: pointer; }
.consent-check input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--accent); }
#consentAgree:disabled { background: var(--border); color: var(--muted); box-shadow: none; opacity: 1; cursor: not-allowed; filter: none; }
/* ---------- Avatar picker modal ---------- */
.avatar-emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 4px 0 14px; }
.avatar-emoji-btn { font-size: 22px; padding: 6px 0; background: var(--bg);
border: 1.5px solid transparent; border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.avatar-emoji-btn:hover, .avatar-emoji-btn:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.avatar-upload-label {
display: block; text-align: center; padding: 12px 18px; border-radius: 999px;
background: var(--accent-soft); color: var(--accent-text); border: 1.5px solid rgba(var(--accent-rgb),0.25);
font-weight: 700; font-size: 14px; cursor: pointer;
}
/* ---------- User topbar (present on every screen after login) ---------- */
.user-topbar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.ut-avatar {
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: var(--gradient-cta);
display: flex; align-items: center; justify-content: center; overflow: hidden;
font-family: var(--font-ui); font-weight: 900; color: var(--navy); border: none; cursor: pointer; font-size: 14px;
}
.ut-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ut-name { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-icon-btn {
width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); border: none;
font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ut-logout { background: none; border: none; color: var(--muted); font-size: 12.5px; text-decoration: underline; flex-shrink: 0; }
/* ---------- My-code modal ---------- */
.my-code-value {
text-align: center; font-family: var(--font-ui); font-weight: 900; font-size: 22px; letter-spacing: 1px;
color: var(--accent-text); background: var(--accent-soft); border-radius: 14px; padding: 14px; margin-top: 10px;
}
/* ---------- Home placeholder screen ---------- */
.home-card {
margin: 20px 22px; padding: 22px; border-radius: 18px; background: var(--glass-bg);
border: 1px solid var(--glass-border); text-align: center;
}
.home-card h2 { font-size: 17px; margin-bottom: 8px; }
.home-card p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.home-greeting { padding: 22px 22px 0; text-align: center; }
.home-greeting h1 { font-size: 20px; }
/* ---------- Modal ---------- */
.app-modal { position: fixed; inset: 0; background: rgba(15,20,35,0.5); display: none; align-items: center; justify-content: center; z-index: 800; padding: 20px; }
.app-modal.open { display: flex; }
.app-modal-inner { background: var(--white); border-radius: 20px; max-width: 440px; width: 100%; max-height: 82vh; overflow-y: auto; padding: 24px; position: relative; }
.app-modal-title { font-size: 18px; margin-bottom: 12px; padding-inline-end: 30px; }
.app-modal-body { font-size: 14px; line-height: 1.7; color: var(--muted); }
.app-modal-body p { margin: 0 0 12px; }
.app-modal-close { position: absolute; top: 16px; inset-inline-end: 16px; background: none; border: none; font-size: 22px; color: var(--muted); line-height: 1; }
.app-modal-actions { margin-top: 18px; text-align: center; }
/* ---------- Guided meditation modal (Body Scan) ---------- */
.meditation-modal-inner { max-width: 480px; }
.meditation-progress-track { height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; margin: 16px 0 12px; }
.meditation-progress-fill { height: 100%; width: 0%; background: var(--gradient-cta); transition: width .5s ease; }
.meditation-caption { min-height: 70px; font-size: 14px; line-height: 1.7; color: var(--text); text-align: center; padding: 8px 4px 4px; }
.meditation-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.meditation-actions .btn-primary, .meditation-actions .btn-quiet { flex: 1 1 120px; min-width: 100px; }
/* ---------- Floating action buttons ---------- */
.fab {
position: fixed; inset-inline-end: 16px; width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; border: none; z-index: 500;
box-shadow: 0 4px 14px rgba(0,0,0,0.18); color: #fff;
}
.fab svg { width: 22px; height: 22px; }
#fabShare { bottom: 64px; background: #4083F3; }
#fabFeedback { bottom: 120px; background: #20B8A6; }
#fabInstall { bottom: 176px; background: #6435D9; display: none; }
/* ---------- Legal pages (accessibility.html / terms.html) — matched to MoveFocus's live legal-page design ---------- */
body.legal-page { background: #F3F5FA; padding: 32px 18px 80px; box-sizing: border-box; min-height: 100vh; min-height: 100dvh; }
.legal-wrap {
max-width: 760px; margin: 0 auto; background: var(--white);
border: 1px solid #E2E5F3; border-radius: 18px; padding: 32px 28px;
color: #000F47;
}
.legal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.legal-back { font-size: 13px; font-weight: 700; color: #2A75D0; text-decoration: none; }
.legal-wrap h1 { font-size: 22px; font-weight: 900; color: #000F47; line-height: 1.75; margin: 0 0 4px; }
.legal-updated { color: #38425A; font-size: 12px; margin-bottom: 24px; }
.legal-wrap h2 { font-size: 16px; font-weight: 900; margin: 26px 0 8px; color: #9A3412; }
.legal-wrap p { color: #000F47; font-size: 14px; line-height: 1.75; margin: 0 0 8px; }
.legal-wrap ul { color: #000F47; font-size: 14px; line-height: 1.75; margin: 0 0 8px; padding-inline-start: 22px; }
.legal-wrap ul li { margin: 0 0 8px; }
.legal-wrap .legal-intro { font-size: 14px; color: #000F47; line-height: 1.75; margin-bottom: 8px; }
#tS3.danger {
background: rgba(244,63,94,0.06); border: 1px solid rgba(244,63,94,0.25);
border-radius: 12px; padding: 14px 16px; margin: 14px 0;
}
.legal-forward { display: block; margin-top: 28px; font-weight: 700; font-size: 13px; color: #2A75D0; text-decoration: none; }
/* ==========================================================================
EnergyFocus — Assessment (מיפוי תדר בסיסי) + Results + Training screens
New mechanic-specific UI: chakra sweep, breath gate, goal chips, BRI gauge,
chakra bars, harmonic-signature card, 14-day sprint, before/after
comparison, maintenance dashboard, daily 3-segment session visuals.
========================================================================== */
/* ---------- #intro (assessment entry) ----------
תוקנן (2026-08-27, לבקשת לאה) לפי #intro של MoveFocus/EyeFocus — ראו
ההערה במקטע המקביל ב-index.html. המחלקות כאן נושאות בכוונה את אותם שמות
כמו באפליקציות האחיות (.intro-body / .intro-logo-img / .preview-circle /
.intro-explain / .touch-note / .history-badge), כך שהשוואה בין שתי
האפליקציות — או העתקת תיקון מאחת לשנייה — נשארת טריוויאלית. */
.intro-body {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 15px; padding: 18px 26px 30px; overflow-y: auto;
}
.intro-logo-img { width: auto; height: 46px; max-width: 240px; object-fit: contain; display: block; }
.preview-circle {
width: 118px; height: 118px; border-radius: 50%;
background: var(--circle-bg); border: 5px solid var(--circle-rim);
box-shadow: inset 0 2px 6px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.08);
display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
}
.preview-figure-icon { width: 78px; height: 78px; object-fit: contain; }
.intro-explain { text-align: center; font-size: 14px; color: var(--muted-text); line-height: 1.65; max-width: 305px; margin: 0; }
/* הערה שקטה ללא רקע (לבקשת לאה: "הערה 'מומלץ לבצע ברוגע ותוך כדי מדיטציה' ללא רקע") */
.intro-note { text-align: center; font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 290px; margin: 0; }
/* בועית "מסך מגע בלבד" — מיושרת לצד אחד עם אייקון יד, כמו .touch-note של
MoveFocus (הטקסט מיושר לתחילת השורה, לא ממורכז, כדי שייקרא כהערת-מידע). */
.touch-note {
width: 100%; max-width: 340px;
background: rgba(var(--accent-rgb),0.07); border: 1.5px solid rgba(var(--accent-rgb),0.30);
border-radius: 16px; padding: 11px 14px;
display: flex; align-items: center; gap: 10px; text-align: start;
}
.touch-note .tn-icon { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.touch-note .tn-text { font-size: 12.5px; color: var(--accent-text); line-height: 1.45; font-weight: 700; }
/* תג "המיפוי האחרון שלכם" — לחיץ, פותח את מסך התוצאות */
.history-badge {
display: flex; align-items: center; gap: 10px; width: 100%; max-width: 340px;
background: var(--white); border: 1px solid var(--border); border-radius: 16px;
padding: 10px 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); cursor: pointer;
text-align: start; transition: box-shadow .15s, border-color .15s;
}
.history-badge:hover { border-color: rgba(var(--accent-rgb),0.45); box-shadow: 0 3px 12px rgba(var(--accent-rgb),0.14); }
.history-badge:focus-visible { outline: 3px solid rgba(var(--accent-rgb),0.45); outline-offset: 2px; }
.history-badge .hb-icon { display: flex; flex: 0 0 auto; }
.history-badge .hb-icon img { width: 20px; height: 20px; object-fit: contain; }
.history-badge .hb-text { flex: 1; }
.history-badge .hb-title { font-size: 12px; font-weight: 800; color: var(--navy); }
.history-badge .hb-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.history-badge .hb-arrow { font-size: 18px; color: var(--accent-text); margin-inline-start: auto; }
/* החץ מצביע תמיד "קדימה" — נהפך אוטומטית בעברית, כמו .user-arrow */
[dir="rtl"] .history-badge .hb-arrow { transform: scaleX(-1); }
.intro-start-btn { width: 100%; max-width: 340px; }
/* קישור שקט ללא רקע (תוכנית האימונים / מדיטציה) — לבקשת לאה: "ללא רקע
My training program עם איקון של מטרה" */
.intro-link {
background: none; border: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-family: var(--font-body); font-size: 13.5px; font-weight: 700;
color: var(--accent-text); padding: 4px 8px; border-radius: 8px;
}
.intro-link:hover { text-decoration: underline; }
.intro-link:focus-visible { outline: 3px solid rgba(var(--accent-rgb),0.45); outline-offset: 2px; }
/* כלל בסיס גנרי ל-.icon-inline (לבקשת לאה, 2026-08-31: להתאים רכיבים
ל-MoveFocus, שם יש כלל .icon-inline גנרי — כאן היה קיים רק כלל מצומצם
בתוך .intro-link). ערכי ברירת-מחדל זהים לאלה שכבר נהוגים באפליקציה.
display:inline-block חובה כאן: יש כלל גלובלי img{display:block} (למעלה
בקובץ), וכל עוד .icon-inline לא דורס אותו, כל ![]()
הופך לקופסת בלוק נפרדת שנתלשת מזרימת הטקסט לגמרי — זה בדיוק מה שגרם
לאייקונים בכפתורי מסך 14 הימים "לברוח" לשוליים ולא לשבת ליד הטקסט
(לבקשת לאה, 2026-09-01: "האייקונים צריכים להיות בתחילת המשפטים
הרלוונטים ולא בצד"). */
.icon-inline { display: inline-block; width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; }
.intro-link .icon-inline { width: 16px; height: 16px; object-fit: contain; }
/* ---------- #test shell (dark session container, shared by assessment + daily session) ---------- */
.dark-screen {
background: var(--indigo-deep); color: #fff;
--surface-text-soft: rgba(255,255,255,0.65);
--surface-track: rgba(255,255,255,0.15);
}
.countdown-overlay {
/* position:absolute (not fixed) חשוב: fixed נצמד לחלון הדפדפן כולו, כך
שב-desktop השכבה הזו הייתה נפרשת על פני כל רוחב המסך במקום להישאר
בגודל ה-480px של .app-shell כמו כל שאר האפליקציה (לבקשת לאה, 2026-08-28).
.app-shell הוא position:relative, אז absolute כאן נצמד אליו ולא לחלון. */
position: absolute; inset: 0; z-index: 700; display: none; flex-direction: column;
align-items: center; justify-content: center; gap: 18px;
/* רקע רגיל/בהיר, לא כהה (לבקשת לאה, 2026-08-28) — תואם את מה ש-#test
כבר אמור להיות באבחון לפי ההערה למעלה ("light — same background as
the home page, per Lea's spec"); העל-שכבה הכהה כאן פשוט לא התאימה
לזה עד עכשיו. */
background: var(--bg); color: var(--text);
}
.countdown-overlay.show { display: flex; }
.cd-instruction { font-size: 16px; font-weight: 700; text-align: center; padding: 0 30px; }
.cd-numbers { font-size: 64px; font-weight: 900; font-family: var(--font-ui); }
/* מסך ההנחיה שלפני האבחון + הספירה לאחור (2026-08-27, לבקשת לאה) —
מקביל ל-cd-instruction/cdNumbers של MoveFocus, ראו showAssessmentOnboarding
ב-js/assessment.js. יושב על גבי .countdown-overlay הבהיר הקיים. */
.cd-instruction { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 340px; }
.cd-logo-img { width: 128px; max-height: 40px; object-fit: contain; margin-bottom: 2px; }
.cd-instruction-icon img { width: 84px; height: 84px; object-fit: contain; }
.cd-instruction-title { font-size: 20px; font-weight: 900; font-family: var(--font-ui); color: var(--text); }
.cd-instruction-body { font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--muted-text); }
.cd-instruction-body strong.touch-emphasis {
display: block; margin-top: 12px; font-weight: 800; color: var(--orange-text);
}
.cd-start-btn {
width: 100%; padding: 16px; margin-top: 4px;
background: var(--gradient-cta); color: var(--navy); border: none; border-radius: 999px;
font-family: var(--font-ui); font-size: 15.5px; font-weight: 900; cursor: pointer;
box-shadow: var(--glow-primary); transition: transform .12s, filter .15s;
}
.cd-start-btn:active { transform: scale(0.97); }
.cd-start-btn:hover { filter: brightness(0.96); }
.cd-numbers { display: none; flex-direction: column; align-items: center; gap: 12px; }
.countdown-num, .countdown-go {
font-family: var(--font-ui); font-weight: 900; color: var(--text); line-height: 1;
animation: cdPop .5s ease-out;
}
.countdown-num { font-size: 84px; }
.countdown-go {
font-size: 62px; cursor: pointer;
background: var(--gradient-cta); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.countdown-hint { font-size: 13.5px; font-weight: 600; color: var(--muted); }
@keyframes cdPop { from { transform: scale(0.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.countdown-num, .countdown-go { animation: none; }
}
.test-topbar { padding: 18px 20px 6px; }
.test-progress-bar { height: 6px; border-radius: 999px; background: var(--surface-track); overflow: hidden; }
.test-progress-fill { height: 100%; background: var(--gradient-cta); border-radius: 999px; transition: width .35s ease; }
.test-step-label { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--surface-text-soft); text-align: center; letter-spacing: .3px; }
.test-instruction { text-align: center; padding: 16px 24px 4px; font-size: 16px; line-height: 1.55; }
.test-instruction strong { display: block; font-size: 17px; font-weight: 800; margin-bottom: 2px; }
.test-instruction-sub { display: block; font-size: 13px; font-weight: 400; color: var(--surface-text-soft); }
.test-arena {
flex: 1; display: flex; align-items: center; justify-content: center;
padding: 20px 24px 100px; min-height: 320px;
}
/* ---------- Chakra sweep (Phase 1) ---------- */
.chakra-sweep-wrap {
width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 10px;
/* Overrides .test-arena's vertical centering (align-items:center) just for
this step, so the body figure sits right under the instruction text at
the top of the screen instead of floating in the middle of the screen —
other steps sharing .test-arena (love scales, goals, breath gate) keep
their normal centered layout. Horizontal centering still comes from
.test-arena's own justify-content:center, so the figure/scale stay
centered on screen while riding at the top. Negative margin pulls the
figure up so it sits close under the "Tune your X" subtitle, eating
into .test-arena's own top padding — scoped to this class only, so it
can't affect any other step sharing #testArena. */
align-self: flex-start;
margin-top: -16px;
}
/* Aura sits directly on the slider's own track, centered on the thumb's
current position (positioned in JS via ef_positionAuraOnThumb — see
assessment.js), instead of as a large block floating above the scale.
Half its old size so the whole step reads shorter and the scale itself
doesn't sit so far down the screen. Extra margin above/below (per Lea's
request for more breathing room around the scale, now that the figure
itself sits higher) keeps the scale from feeling cramped against the
figure above it or the Next button below it. */
.scale-track-wrap { position: relative; width: 100%; display: flex; align-items: center; margin-top: 48px; }
.scale-track-wrap input[type="range"] { position: relative; z-index: 1; }
.chakra-aura, .love-scale-aura {
position: absolute; top: 50%; left: 0; pointer-events: none; z-index: 0;
border-radius: 50%; background: radial-gradient(circle, var(--aura-color) 0%, transparent 72%);
transition: left .12s linear, transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.chakra-aura { width: 70px; height: 70px; }
.chakra-slider { width: 100%; height: 8px; -webkit-appearance: none; appearance: none; border-radius: 999px; background: var(--surface-track); }
.chakra-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid rgba(30,41,59,0.2); box-shadow: 0 2px 8px rgba(0,0,0,0.25); cursor: pointer; }
.chakra-slider::-moz-range-thumb { width: 26px; height: 26px; border: 2px solid rgba(30,41,59,0.2); border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.25); cursor: pointer; }
.chakra-slider-labels { display: flex; justify-content: space-between; width: 100%; font-size: 11.5px; color: var(--surface-text-soft); margin-top: -12px; margin-bottom: 40px; }
/* תווית "כיוון היעד" (2026-08-26, לבקשת לאה) — יושבת בקצה ה-chakraHigh
(הקצה הרצוי, "זרימה מלאה") עם אייקון bullseye + צבע הצ'אקרה הפעילה +
משקל טקסט מודגש, כרמז חזותי חופף (icon + color + weight) לכיוון
שאליו כדאי לשאוף בסקאלה. */
.chakra-slider-label-goal {
display: inline-flex; align-items: center; gap: 3px;
color: var(--goal-color); font-weight: 800;
}
.chakra-slider-label-goal svg { width: 12px; height: 12px; flex: 0 0 auto; }
.chakra-next-btn { width: 100%; }
/* ---------- Chakra body visualization — Lea's "Energy Chakras" reference
photo (real image, assets/chakra/energy-chakras-figure.png — a glowing
blue meditating figure with all 7 chakra mandalas already rendered into
the photo itself, true alpha transparency) with 7 positioned hotspots on
top, so people understand *where on the body* they're connecting to.
The active chakra's hotspot glows larger than the rest. Shown on both
the assessment chakra-sweep step and the training session's
single-chakra reset segment. ---------- */
/* לבקשת לאה (2026-08-26): "וודא שהדמות של הצ'קרוט הינה בגודל שווה ובמיקום
זהה לדמות של שלב אהבה" — גודל/מרווח זהים ל-.love-figure-viz בדיוק
(128px, margin: 18px auto 8px), כך שהדמות עצמה ממורכזת אמיתית על המסך.
בעבר היה כאן padding-inline-end א-סימטרי ששמר מקום לסמן הצידי, מה
שהזיז את הדמות בפועל שמאלה מהמרכז (LTR) — הוסר. הסמן הצידי עצמו עבר
להיות תמיד בצד הימני הפיזי של המסך (ראו chakraBodyImage ב-assessment.js
וההערה ליד .chakra-hotspot-marker-left למטה), אז אין יותר צורך "לשמור
מקום" עבורו בתוך הקופסה הממורכזת של הדמות עצמה — הסמן פשוט גולש
ימינה החוצה ממנה. */
.chakra-body-viz { position: relative; width: 128px; margin: 18px auto 8px; }
.chakra-body-img-wrap { position: relative; width: 100%; line-height: 0; }
/* pointer-events:none (2026-08-31): purely decorative reference figure —
never itself a tap target — so it can never intercept a touch and trigger
a native long-press/share menu. */
.chakra-body-img { width: 100%; height: auto; display: block; border-radius: 8px; pointer-events: none; }
.chakra-hotspot {
/* Inactive dots read as secondary reference points, not competing markers —
small, muted, and slightly translucent so the active one is unmistakable. */
position: absolute; width: 7px; height: 7px; border-radius: 50%;
background: var(--hotspot-color); opacity: 0.55; transform: translate(-50%, -50%);
box-shadow: 0 0 3px 0.5px rgba(0,0,0,0.25);
transition: width .3s ease, height .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.chakra-hotspot.active {
width: 17px; height: 17px; opacity: 1;
box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--hotspot-color) 35%, transparent), 0 0 15px 5.5px var(--hotspot-color);
animation: chakraHotspotPulse 2.2s ease-in-out infinite;
}
@keyframes chakraHotspotPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.72; }
}
/* Side marker — a small badge holding the chakra's traditional symbol,
shown ONLY for the active chakra (all others show just their small dot,
no marker) and linked to its dot by a dashed line in the chakra's own
color (--hotspot-color, inherited from the parent .chakra-hotspot).
לבקשת לאה (2026-08-26): "כשהדמות תהיה במרכז החיצים שיוצאים ממנה יהיו
בחלק הימני של המסך" — עכשיו שהדמות עצמה ממורכזת אמיתית (ראו
.chakra-body-viz למעלה), הסמן תמיד גולש לצד הימני הפיזי של המסך, בלי
קשר לכיווניות (RTL/LTR) — ראו chakraBodyImage ב-assessment.js, שתמיד
שולח side="left" (מחלקת ה-CSS "-left" למטה, לפי שם מאפיין ה-CSS
שהיא משתמשת בו, ממקמת את הסמן חזותית מימין לנקודה). מחלקת ה-"-right"
(הישנה, שהייתה משמשת RTL למקם משמאל) נשארת כאן כ-CSS מת בלתי מזיק. */
.chakra-hotspot-marker {
position: absolute; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: #fff; border: 1.5px solid var(--hotspot-color); color: var(--hotspot-color);
box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}
.chakra-hotspot-marker svg { width: 15px; height: 15px; }
.chakra-hotspot-marker::before {
content: ""; position: absolute; top: 50%; width: 33px;
border-top: 1.5px dashed var(--hotspot-color); transform: translateY(-50%);
}
.chakra-hotspot-marker-left { left: calc(100% + 40px); }
.chakra-hotspot-marker-left::before { right: 100%; }
.chakra-hotspot-marker-right { right: calc(100% + 40px); }
.chakra-hotspot-marker-right::before { left: 100%; }
/* ---------- Breath & self-love gate (Phase 2) ---------- */
/* לבקשת לאה (2026-08-26): "במסך נשיפה צריך להגביה את העיגול והמילים
והרמקול קרוב יותר לכותרת" — .test-arena ממרכז אנכית כברירת מחדל
(align-items:center), מה שהשאיר את כל breath-wrap צף באמצע המסך עם
הרבה רווח ריק מתחת לכותרת. align-self:flex-start "מנתק" אותו מהמרכוז
האנכי ותופס אותו קרוב לראש test-arena במקום זאת — בדיוק אותו פתרון
שכבר קיים ל-.chakra-sweep-wrap (ראו למטה) לאותה בעיה בדיוק. */
/* הדמות במקום הלב/ההילה (לבקשת לאה, 2026-08-30) — אותו גודל/מרווח
בדיוק כמו .chakra-body-viz/.love-figure-viz (128px, margin: 18px auto
8px), כדי שהדמות תיראה באותו גודל ומיקום בכל שלושת המסכים. שכבת
המילוי (.breath-figure-fill) ממוסכת לצורת האלפא של figure-love.png
עצמה (mask-image) כך שהצבע "נשפך" רק בתוך קווי המתאר של הדמות, לא
בריבוע מסביבה — ומתמלאת/מתרוקנת (clip-path) בקצב הנשימה עצמו, בלי שום
תלות במגע (setBreathFigure ב-assessment.js קובעת גם את משך המעבר
וגם את מחלקת inhale/exhale). */
.breath-figure-wrap { position: relative; width: 128px; margin: 18px auto 8px; }
.breath-figure-wrap .chakra-body-img-wrap { position: relative; width: 100%; line-height: 0; }
.breath-figure-wrap .chakra-body-img { width: 100%; height: auto; display: block; border-radius: 8px; }
.breath-figure-fill {
position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
-webkit-mask-image: url('../assets/love/figure-love.png');
mask-image: url('../assets/love/figure-love.png');
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
background: var(--gradient-cta);
opacity: .82;
clip-path: inset(88% 0 0 0); /* נשיפה = כמעט ריקה */
transition: clip-path 5s linear; /* המשך בפועל נקבע ב-JS לפי אורך הפאזה */
}
.breath-figure-wrap.inhale .breath-figure-fill { clip-path: inset(14% 0 0 0); } /* שאיפה = כמעט מלאה */
.breath-figure-wrap.exhale .breath-figure-fill { clip-path: inset(88% 0 0 0); }
/* ---------- Breath & self-love gate (Phase 2) — .breath-heart/.breath-halo
למטה כבר לא בשימוש (הוחלפו בדמות למעלה, 2026-08-30) אבל נשארים כ-CSS
מת בלתי מזיק, לפי הנוהג הקיים בקובץ הזה. ---------- */
.breath-wrap {
position: relative; width: 100%; max-width: 300px; display: flex; flex-direction: column; align-items: center; gap: 14px;
align-self: flex-start; margin-top: -6px;
}
.breath-heart-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.breath-heart {
position: relative; z-index: 1; /* מעל ה-halo (z-index:0) */
width: 130px; height: 130px; border: none; border-radius: 50%; cursor: pointer;
display: flex; align-items: center; justify-content: center; /* למרכוז breath-press-hint בפנים */
background: linear-gradient(135deg, var(--love-color1), var(--love-color2));
box-shadow: 0 6px 22px rgba(30,41,59,0.22);
transform: scale(0.86); transition: transform .35s ease, box-shadow .35s ease;
}
/* מסירים את טבעת ה-focus הדפדפנית המובנית (שהופיעה כ"ריבוע שמופיע
ונעלם" בלחיצה/נגיעה — לבקשת לאה, 2026-08-26) ומחליפים אותה בטבעת
focus-visible נגישה שמופיעה רק בניווט מקלדת אמיתי, לא בנגיעה/קליק. */
.breath-heart:focus { outline: none; }
.breath-heart:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.breath-heart.active { transform: scale(1.05); box-shadow: 0 10px 32px rgba(30,41,59,0.32); }
/* .breath-heart.in/.out — משמשות רק במצב מונחה-קול (runVoiceGuided), כדי
שהעיגול עצמו "יינשם" עדין בקצב הקריינות גם בלי החזקת אצבע. */
.breath-heart.in { transform: scale(0.98); }
.breath-heart.out { transform: scale(0.86); }
.breath-heart.active.in, .breath-heart.active.out { transform: scale(1.05); }
/* מילת ההנחיה הקבועה "לחץ"/"Press" במרכז ההילה, בכל השפות — לבקשת לאה
(2026-08-26): "אני רוצה שתופיע המילה לחץ באמצע ההילה". קבועה ותמיד
גלויה (לא תלויה במצב קול/שקט), שלא כמו breath-subtitle למטה. */
.breath-press-hint {
font-family: var(--font-ui); font-size: 13px; font-weight: 800; color: #fff;
letter-spacing: .02em; pointer-events: none; opacity: .92;
text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* ה"הילה" — זוהר נפרד מאחורי עיגול הלב שגדל ונשאר גדול לאורך כל משך
הלחיצה עצמה (halo.active מוצמד ל-holding באמצעות אותם pointerdown/up/
leave כמו heart.active — ראו runBreathGate ב-assessment.js), ולא רק
הבהוב קצר. לבקשת לאה (2026-08-26): "צריך שההילה תגדל ותשאר גדולה כל
עוד אנחנו לוחצים". */
.breath-halo {
position: absolute; top: 50%; left: 50%; width: 130px; height: 130px; z-index: 0;
transform: translate(-50%,-50%) scale(0.88); border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, var(--love-color1) 0%, var(--love-color2) 55%, transparent 74%);
opacity: 0; filter: blur(3px);
transition: transform .45s ease, opacity .45s ease;
}
.breath-halo.active { transform: translate(-50%,-50%) scale(1.6); opacity: .6; }
.breath-cue { font-size: 20px; font-weight: 800; min-height: 28px; transition: color .3s ease; }
.breath-cue.in { color: #0D9C86; }
.breath-cue.out { color: #7B3FE0; }
.breath-cycle-label { font-size: 12.5px; color: var(--surface-text-soft); }
/* כתובית זוהרת "Breathe In / Release" — לבקשת לאה (2026-08-26, מתוקן):
"המילים שמופיעות מעל ההילה הן ההנחיות: שאיפה, שחרור" — יושבת כאלמנט
רגיל בזרימת הפלקס מעל עיגול הלב/ההילה (לא absolute במרכז העיגול כמו
בסבב הקודם, כדי לא להתנגש עם breath-press-hint שתפס את המרכז). צבע
הטקסט שונה מלבן לוורוד מלא (היה קריא על גבי גרדיאנט הלב, אבל לא על
רקע --bg הבהיר שמעליו הוא יושב עכשיו) — הזוהר הוורוד-זהוב נשאר. פעילה
רק במצב מונחה-קול (runVoiceGuided ב-assessment.js) — במצב השקט
נשארת ריקה, min-height שומר על גובה קבוע כדי שהעיגול לא "יקפוץ". */
.breath-subtitle {
min-height: 22px;
font-family: var(--font-ui); font-size: 15.5px; font-weight: 800; color: #FF2F92;
letter-spacing: .02em; white-space: nowrap; pointer-events: none;
opacity: 0; transform: scale(0.92); transition: opacity .5s ease, transform .5s ease;
text-shadow: 0 0 10px rgba(255,105,180,.55), 0 0 20px rgba(255,184,0,.4);
}
.breath-subtitle.show { opacity: 1; transform: scale(1); }
/* בקרת ON/OFF להנחיה קולית — פינה עליונה של המסך (לבקשת לאה), מוצגת רק
כשיש הקלטה אמיתית לשפה הנוכחית (ראו hasBreathVoice ב-js/breath-voice.js
ו-runBreathGate ב-assessment.js). */
.breath-voice-toggle {
position: absolute; top: -8px; inset-inline-end: 2px;
width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid rgba(30,41,59,0.16); background: rgba(30,41,59,0.04);
color: var(--surface-text-soft); cursor: pointer;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.breath-voice-toggle svg { width: 16px; height: 16px; }
.breath-voice-toggle.on { border-color: #FF69B4; color: #FF69B4; background: rgba(255,105,180,.1); }
/* ---------- Love scales (Phase 2b) — self-love + love-for-the-universe,
same sound+vibration+color feedback pattern as the chakra sweep. ---------- */
.love-scales-wrap { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.love-scale-row { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.love-scale-label { font-size: 14px; font-weight: 800; text-align: center; }
.love-scale-aura { width: 50px; height: 50px; }
.love-slider { width: 100%; height: 8px; -webkit-appearance: none; appearance: none; border-radius: 999px; background: var(--surface-track); }
.love-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid rgba(30,41,59,0.2); box-shadow: 0 2px 8px rgba(0,0,0,0.25); cursor: pointer; }
.love-slider::-moz-range-thumb { width: 26px; height: 26px; border: 2px solid rgba(30,41,59,0.2); border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.25); cursor: pointer; }
/* ---------- LOVE screen (redesign, 2026-08-21; refined 2026-08-25) — three
vertical scales: Self → Restoration → Universal, matching Lea's reference
mockup. A "clean" version of the chakra figure is used here (assets/love/
figure-love.png — mandala symbols removed, see the comment next to
runLoveScales() in assessment.js), with three concentric "energy rings"
over it instead of the seven chakra hotspots — one ring per scale, always
a true circle (aspect-ratio, not tied to the image's own aspect ratio),
glowing brighter/thicker as that scale's value rises. Only "Self" starts
revealed; Restoration/Universal start dimmed+locked and unlock one at a
time as the user actually commits the scale before them (js side). The
above .love-scales-wrap/.love-scale-row/.love-slider rules are now unused
(superseded by this block) but left in place as harmless dead CSS. ---------- */
.love-wrap { width: 100%; max-width: 380px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.love-figure-viz { position: relative; width: 128px; margin: 18px auto 8px; }
.love-figure-viz .chakra-body-img-wrap { position: relative; width: 100%; line-height: 0; }
.love-figure-viz .chakra-body-img { width: 100%; height: auto; display: block; border-radius: 8px; }
.love-ring {
position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
aspect-ratio: 1 / 1; border-radius: 50%; border: 2px solid var(--ring-color); pointer-events: none;
transition: opacity .35s ease, box-shadow .35s ease;
}
.love-ring-self { width: 40%; }
.love-ring-restoration { width: 66%; }
.love-ring-universal { width: 94%; }
.love-scales-row { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.love-scale-col {
flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 9px;
transition: opacity .3s ease, filter .3s ease;
}
.love-scale-col.is-locked { opacity: .4; filter: grayscale(.75); }
.love-scale-title {
font-size: 10.5px; font-weight: 900; text-align: center; line-height: 1.25;
padding: 5px 8px; border-radius: 14px; border: 1.5px solid var(--scale-color);
background: rgba(var(--scale-rgb), .14); color: var(--scale-color);
width: 100%; box-sizing: border-box; height: 38px; /* fixed (not min-height) so all 3 pills match regardless of label length */
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.love-scale-pct-pill {
font-size: 14.5px; font-weight: 900; min-width: 46px; text-align: center;
padding: 3px 12px; border-radius: 999px; border: 1.5px solid var(--scale-color);
background: rgba(var(--scale-rgb), .08); color: var(--scale-color);
}
.love-vertical-track-wrap { display: flex; align-items: center; justify-content: center; height: 190px; }
.love-slider-vertical {
--val: 50%;
writing-mode: vertical-lr; direction: rtl;
-webkit-appearance: none; appearance: none;
width: 16px; height: 190px; border-radius: 999px;
background: rgba(var(--scale-rgb), .12); cursor: pointer;
margin: 0;
}
.love-slider-vertical:disabled { cursor: not-allowed; }
.love-slider-vertical::-webkit-slider-runnable-track {
width: 16px; border-radius: 999px;
background: linear-gradient(to top,
var(--scale-color) 0%, var(--scale-color) var(--val),
rgba(var(--scale-rgb), .14) var(--val), rgba(var(--scale-rgb), .14) 100%);
box-shadow: 0 0 12px 1px rgba(var(--scale-rgb), .55), inset 0 0 5px rgba(0,0,0,.35);
border: 1px solid rgba(var(--scale-rgb), .5);
}
.love-slider-vertical::-moz-range-track {
width: 16px; border-radius: 999px;
background: linear-gradient(to top,
var(--scale-color) 0%, var(--scale-color) var(--val),
rgba(var(--scale-rgb), .14) var(--val), rgba(var(--scale-rgb), .14) 100%);
box-shadow: 0 0 12px 1px rgba(var(--scale-rgb), .55);
border: 1px solid rgba(var(--scale-rgb), .5);
}
.love-slider-vertical::-webkit-slider-thumb {
-webkit-appearance: none; margin-left: -9px; width: 34px; height: 34px; border-radius: 50%;
background-color: var(--scale-color); background-image: var(--thumb-icon);
background-repeat: no-repeat; background-position: center; background-size: 17px 17px;
border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(var(--scale-rgb), .5), 0 0 16px 4px rgba(var(--scale-rgb), .8);
cursor: pointer;
}
.love-slider-vertical::-moz-range-thumb {
width: 34px; height: 34px; border-radius: 50%;
background-color: var(--scale-color); background-image: var(--thumb-icon);
background-repeat: no-repeat; background-position: center; background-size: 17px 17px;
border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(var(--scale-rgb), .5), 0 0 16px 4px rgba(var(--scale-rgb), .8);
cursor: pointer;
}
.love-scale-caption { font-size: 10.5px; color: var(--surface-text-soft); text-align: center; line-height: 1.4; min-height: 28px; }
.love-next-hint { font-size: 11.5px; color: var(--surface-text-soft); text-align: center; margin-top: -10px; }
.btn-primary:disabled { opacity: .45; filter: grayscale(.3); box-shadow: none; cursor: not-allowed; }
/* ---------- Goals & friction (Phase 3) ---------- */
/* position+z-index:0 יחד יוצרים הקשר-מיסוד (stacking context) עצמאי,
כדי ש-.goals-figure-bg עם z-index:-1 יישאר "מתחת לכול" רק בתוך
.goals-wrap עצמו ולא יגלוש מתחת לאלמנטים אחרים במסך (לבקשת לאה,
2026-08-30: "לשים אותה מאחורי כל מה שיש במסך"). */
.goals-wrap { position: relative; z-index: 0; width: 100%; max-width: 360px; }
.goals-figure-bg {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
z-index: -1; width: 290px; max-width: 84vw; opacity: .12;
pointer-events: none; user-select: none;
}
.goals-figure-bg img { width: 100%; display: block; }
/* .goal-cat-tabs/.goal-cat-tab* להלן — טאבי הקטגוריות של קטלוג 16
היעדים הישן (Phase 3) — לא בשימוש יותר מאז צמצום הקטלוג ל-8 יעדים/
בחירה יחידה (2026-08-26, ראו .goal-cat-grid למטה). נשארים כ-CSS מת
ובלתי מזיק, כמו legacy דומה אחרים בקובץ הזה. */
.goal-cat-tabs { display: flex; gap: 7px; margin-bottom: 12px; }
.goal-cat-tab {
flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
padding: 9px 4px 8px; border-radius: 14px; border: 1.5px solid rgba(30,41,59,0.14);
background: rgba(30,41,59,0.04); color: var(--surface-text-soft);
font-size: 10.5px; font-weight: 800; line-height: 1.22; text-align: center;
min-height: 62px; justify-content: center;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.goal-cat-tab-label {
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
white-space: normal; word-break: break-word; max-width: 100%;
}
.goal-cat-tab.active {
border-color: var(--cat-color); color: var(--cat-color);
background: color-mix(in srgb, var(--cat-color) 14%, transparent);
}
.goal-cat-tab-icon {
width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; opacity: .85;
}
.goal-cat-tab.active .goal-cat-tab-icon { opacity: 1; box-shadow: 0 0 10px 2px var(--cat-color); }
.goal-cat-tab-icon svg { width: 13px; height: 13px; }
/* קטלוג מצומצם ל-8 יעדים קבועים / 4 קטגוריות × 2, בחירה יחידה
(2026-08-26, לבקשת לאה): "חלק את המסך ל-4 חלקים כאשר בכל חלק יש את
האייקון של הקטגוריה (ללא כותרת) ומתחת כבר את הייעדים עצמם" — רשת
2×2 קבועה, בלי מעבר-טאב; כל חלק מציג רק את אייקון הקטגוריה (עגול,
בצבע היעד הראשון שבה, ללא טקסט כותרת — יש aria-label לנגישות) ומתחתיו
שני צ'יפי היעדים של אותה קטגוריה, עטופים באנך במלוא הרוחב. */
.goal-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.goal-cat-block {
display: flex; flex-direction: column; align-items: center; gap: 9px;
padding: 14px 8px 12px; border-radius: 16px; border: 1.5px solid rgba(30,41,59,0.1);
background: rgba(30,41,59,0.03);
}
.goal-cat-block-icon {
/* לבקשת לאה (2026-08-26): "הקטן מעט את הלוגו של הקטגוריה" — היה 34px/18px */
width: 27px; height: 27px; border-radius: 50%; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; opacity: .92;
}
.goal-cat-block-icon svg { width: 14px; height: 14px; }
.goal-cat-block-chips { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.goal-cat-block .goal-chip2 { width: 100%; justify-content: center; }
.goal-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; min-height: 40px; }
.goal-chip { /* legacy — kept as harmless dead CSS, superseded by .goal-chip2 below */
padding: 9px 16px; border-radius: 999px; border: 1.5px solid rgba(30,41,59,0.2);
background: rgba(30,41,59,0.05); color: var(--text); font-size: 13px; font-weight: 700;
transition: opacity .15s ease;
}
.goal-chip.active { background: var(--gradient-cta); border-color: transparent; color: var(--navy); }
.goal-chip.disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
/* צ'יפ יעד חדש (Phase 3 redesign) — כפתור עם אייקון קטן עגול בצבע היעד
+ תווית. בחירה מדליקה "הילה ניאונית" בצבע היעד עצמו (box-shadow +
רקע/גבול שקופים בגוון היעד), לפי בקשת לאה: "יעד שנבחר יאיר בהילת
ניאון בצבע שלו". */
.goal-chip2 {
/* לבקשת לאה (2026-08-26): האייקון הוסר מהצ'יפ עצמו (נשאר רק על הסקאלה),
אז ה-padding האסימטרי שהיה שמור לו הוחלף ב-padding סימטרי לצ'יפ טקסט-בלבד. */
display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px;
border-radius: 999px; border: 1.5px solid rgba(30,41,59,0.16);
background: rgba(30,41,59,0.04); color: var(--text); font-size: 12.5px; font-weight: 700;
transition: box-shadow .2s ease, border-color .2s ease, background .2s ease, opacity .15s ease;
}
.goal-chip2.active {
border-color: var(--goal-color); color: var(--goal-color);
background: rgba(var(--goal-rgb), .16);
box-shadow: 0 0 14px 2px rgba(var(--goal-rgb), .55);
}
.goal-chip2.disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.goal-chip-icon {
width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
}
.goal-chip-icon svg { width: 11px; height: 11px; }
.goal-custom-row { display: flex; gap: 8px; margin-bottom: 14px; }
.goal-custom-input {
flex: 1; min-width: 0; padding: 10px 14px; border-radius: 12px; border: 1.5px solid rgba(30,41,59,0.18);
background: rgba(30,41,59,0.04); color: var(--text); font-size: 14px; font-family: var(--font-body);
}
.goal-custom-input::placeholder { color: rgba(30,41,59,0.4); }
.goal-custom-input:disabled, #goalCustomAdd:disabled { opacity: .35; cursor: not-allowed; }
/* ── סקאלות החיכוך של היעדים (redesign 2026-08-25, לפי משוב לאה: "הפוך
את העיגול של הסקאלה לאייקון שמוצג ליד שם היעד... והפוך את הסקאלות
בצבעוניות של נאון בדומה לעיצוב הסקאלה והצבעוניות שיש בחלק של האהבה")
— כל שורה מקבלת badge אייקון עגול בצבע היעד (כמו .goal-chip-icon),
כפתור הסרה קטן, וסליידר אופקי בזוהי ניאון התואם בדיוק לטכניקת
.love-slider-vertical (track בגרדיאנט לפי --val, thumb עם אייקון
רקע לפי --thumb-icon, זוהר box-shadow לפי --scale-rgb). ── */
.goal-friction-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 8px; }
.goal-friction-row { text-align: start; }
.goal-friction-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.goal-friction-icon {
width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 10px 2px rgba(var(--scale-rgb), .55);
}
.goal-friction-icon svg { width: 13px; height: 13px; }
.goal-friction-label { flex: 1 1 0; min-width: 0; font-size: 13px; font-weight: 800; color: var(--scale-color); }
.goal-friction-remove {
flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(30,41,59,0.18);
background: rgba(30,41,59,0.04); color: var(--surface-text-soft); font-size: 11px; line-height: 1;
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.goal-friction-remove:hover { border-color: #e46b6b; background: rgba(228,107,107,.12); color: #e46b6b; }
.goal-friction-slider {
--val: 50%;
-webkit-appearance: none; appearance: none;
width: 100%; height: 16px; border-radius: 999px;
background: transparent; cursor: pointer;
/* לבקשת לאה (2026-08-26): "תגדיל את הרווח שמעל ומתחת לסקאלה עצמה" — היה margin: 0 */
margin: 14px 0 18px;
}
.goal-friction-slider::-webkit-slider-runnable-track {
height: 16px; border-radius: 999px;
background: linear-gradient(to right,
var(--scale-color) 0%, var(--scale-color) var(--val),
rgba(var(--scale-rgb), .14) var(--val), rgba(var(--scale-rgb), .14) 100%);
box-shadow: 0 0 12px 1px rgba(var(--scale-rgb), .55), inset 0 0 5px rgba(0,0,0,.35);
border: 1px solid rgba(var(--scale-rgb), .5);
}
/* תיקון RTL (2026-08-26, לבקשת לאה: "הסקאלה בבחירת יעד גם לא מאופסת
בעברית עיגול הולך לצד אחד ואיקון לצד שני") — אותה משפחת באג כמו
ef_positionAuraOnThumb: הדפדפן הופך ויזואלית את ה-thumb (עם האייקון,
ראו --thumb-icon למטה) תחת direction:rtl, אבל הגרדיאנט של המילוי
הצבעוני היה קבוע "to right" בלי קשר לכיוון — כך שהחלק הצבעוני (העיגול
התפוס) התמלא מכיוון אחד וה-thumb (עם האייקון) ישב בפועל בכיוון ההפוך.
כמו שאר תיקוני ה-RTL באפליקציה, נעזרים ב-[dir="rtl"] (ראו גם
.user-arrow/.welcome-step למעלה) כדי להפוך את כיוון הגרדיאנט בעברית. */
[dir="rtl"] .goal-friction-slider::-webkit-slider-runnable-track {
background: linear-gradient(to left,
var(--scale-color) 0%, var(--scale-color) var(--val),
rgba(var(--scale-rgb), .14) var(--val), rgba(var(--scale-rgb), .14) 100%);
}
.goal-friction-slider::-moz-range-track {
height: 16px; border-radius: 999px;
background: linear-gradient(to right,
var(--scale-color) 0%, var(--scale-color) var(--val),
rgba(var(--scale-rgb), .14) var(--val), rgba(var(--scale-rgb), .14) 100%);
box-shadow: 0 0 12px 1px rgba(var(--scale-rgb), .55);
border: 1px solid rgba(var(--scale-rgb), .5);
}
[dir="rtl"] .goal-friction-slider::-moz-range-track {
background: linear-gradient(to left,
var(--scale-color) 0%, var(--scale-color) var(--val),
rgba(var(--scale-rgb), .14) var(--val), rgba(var(--scale-rgb), .14) 100%);
}
.goal-friction-slider::-webkit-slider-thumb {
-webkit-appearance: none; margin-top: -7px; width: 30px; height: 30px; border-radius: 50%;
background-color: var(--scale-color); background-image: var(--thumb-icon);
background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(var(--scale-rgb), .5), 0 0 16px 4px rgba(var(--scale-rgb), .8);
cursor: pointer;
}
.goal-friction-slider::-moz-range-thumb {
width: 30px; height: 30px; border-radius: 50%;
background-color: var(--scale-color); background-image: var(--thumb-icon);
background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(var(--scale-rgb), .5), 0 0 16px 4px rgba(var(--scale-rgb), .8);
cursor: pointer;
}
.goal-finish-hint { font-size: 11.5px; color: var(--surface-text-soft); text-align: center; margin-top: -4px; margin-bottom: 4px; }
/* ---------- #results (BRI dashboard) ---------- */
#results { background: var(--bg); padding-bottom: 10px; }
.results-header { text-align: center; padding: 10px 22px 4px; }
.results-rank { font-size: 44px; line-height: 1; margin-bottom: 6px; }
.results-header h1 { font-size: 20px; font-weight: 800; color: var(--navy); }
.gauge-card {
margin: 14px 22px; padding: 20px; border-radius: 18px; background: var(--white);
border: 1px solid var(--border); text-align: center; position: relative;
}
.gauge-card-head { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 4px; position: relative; }
.gauge-card-head h2 { font-size: 15px; font-weight: 800; color: var(--navy); }
.info-btn {
width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted); background: none;
color: var(--muted); font-size: 10px; font-weight: 800; line-height: 1; padding: 0;
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.info-pop {
display: none; position: absolute; top: 100%; inset-inline-start: 10%; inset-inline-end: 10%;
margin-top: 8px; background: var(--navy); color: #fff; font-size: 12px; line-height: 1.6;
padding: 10px 12px; border-radius: 10px; text-align: start; z-index: 20; font-weight: 400;
}
.info-pop.show { display: block; }
.gauge-wrap { width: 100%; max-width: 260px; margin: 8px auto 0; aspect-ratio: 260/150; }
.gauge-wrap canvas { width: 100%; height: 100%; }
.gauge-pct { font-size: 30px; font-weight: 900; font-family: var(--font-ui); color: var(--navy); margin-top: -4px; }
.gauge-tier { font-size: 13px; font-weight: 700; color: var(--accent-text); margin-top: 2px; }
/* פירוט הניקוד עטוף מ-2026-08-27 בכרטיס עם כותרת + (i), אז מסגרת/רקע
הכרטיס עברו לעוטף ו-.chakra-bars עצמו נשאר רשימה "עירומה" בתוכו. */
.results-breakdown-card { margin: 0 22px 16px; padding: 16px; border-radius: 18px; background: var(--white); border: 1px solid var(--border); }
.results-breakdown-card .gauge-card-head { margin-bottom: 12px; }
.chakra-bars { margin: 0; padding: 0; }
.chakra-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.chakra-bar-row:last-child { margin-bottom: 0; }
.chakra-bar-label { width: 92px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chakra-bar-track { flex: 1; height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.chakra-bar-fill { height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(0.25,1,0.5,1); }
.chakra-bar-pct { width: 34px; flex-shrink: 0; text-align: end; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.ringtone-card { margin: 0 22px 16px; padding: 18px; border-radius: 18px; background: var(--white); border: 1px solid var(--border); }
.ringtone-card h3 { font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.ringtone-card p { font-size: 13px; color: var(--muted-text); line-height: 1.6; margin: 0 0 12px; }
/* "שיתוף" + הנחיות שמירה כרינגטון (2026-08-26, לבקשת לאה — ראו ההסבר
המלא ליד shareRingtone() ב-assessment.js: אין API דפדפן שקובע רינגטון
מערכת ישירות, זה הקירוב הכי טוב + הנחיה כתובה). */
.ringtone-actions-row { display: flex; gap: 8px; margin-top: 8px; }
.ringtone-actions-row #ringtoneDownload,
.ringtone-actions-row #ringtoneShareBtn { flex: 1 1 0; text-align: center; }
.ringtone-set-instructions {
margin-top: 12px; padding: 12px 14px; border-radius: 14px;
background: rgba(30,41,59,0.035); border: 1px solid rgba(30,41,59,0.08);
}
.ringtone-set-instructions-title { font-size: 11.5px; font-weight: 800; color: var(--surface-text-soft); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .02em; }
.ringtone-set-instructions-body { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.55; color: var(--muted-text); }
.ringtone-set-instructions-body strong { color: var(--text); font-weight: 800; }
/* כרטיסיית "היעדים שכיוונתם" במסך התוצאות (משוב לאה פריט 9) — משתמשת
באותה שורת chakra-bar-row/track/fill/pct, עם label ברוחב גמיש (במקום
92px קבוע) כדי להכיל גם אייקון עגול קטן וגם שם יעד ארוך יותר משם צ'קרה. */
.results-goals-card { margin: 0 22px 16px; padding: 16px; border-radius: 18px; background: var(--white); border: 1px solid var(--border); }
.results-goals-card h3 { font-size: 15px; font-weight: 800; color: var(--navy); }
.results-goals-card .gauge-card-head { margin-bottom: 12px; }
.results-goals-list .chakra-bar-label { width: auto; flex: 1 1 auto; max-width: 55%; }
/* שורת פעולות הסיום של מסך התוצאות — מקבילה ל-.dash-btns של MoveFocus:
מיפוי חוזר + חזרה למסך הראשון של האבחון, זה לצד זה. */
.dash-btns { display: flex; gap: 8px; margin: 0 22px 16px; }
.dash-btns .btn-quiet { flex: 1 1 0; }
.results-teaser { margin: 0 22px 16px; padding: 20px; border-radius: 18px; background: var(--gradient-cta); color: var(--navy); text-align: center; }
.results-teaser h3 { font-size: 16px; font-weight: 900; margin-bottom: 6px; }
.results-teaser p { font-size: 13px; line-height: 1.55; margin: 0 0 14px; opacity: .9; }
.results-teaser .btn-primary { background: var(--navy); color: #fff; box-shadow: none; }
/* ---------- #training (14-day sprint + maintenance, fully JS-rendered) ---------- */
#training { background: var(--bg); }
#trainingContent { padding: 22px; flex: 1; }
.training-empty-card, .training-intro-card, .comparison-card {
background: var(--white); border: 1px solid var(--border); border-radius: 18px;
padding: 22px; text-align: center;
}
.training-empty-card h2, .training-intro-card h2, .comparison-card h2 { font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.training-empty-card p, .training-intro-card p, .comparison-card p { font-size: 13.5px; color: var(--muted-text); line-height: 1.6; margin: 0 0 16px; }
.training-intro-bri { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.sprint-dashboard { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 22px; }
.sprint-dashboard h2 { font-size: 16px; font-weight: 800; color: var(--navy); margin-bottom: 16px; text-align: center; }
/* כותרת עם לוגו NeuPractix לצידה (לבקשת לאה, 2026-08-31: "וליד תשים את
הלוגו של Neu") — flex ממורכז, הלוגו לפני הטקסט תמיד בסדר-מסמך (ה-CSS
logical-properties לא נוגעות בסדר flex, אז ב-RTL זה כבר מתהפך נכון
לבד דרך direction של האב). */
.sprint-dashboard-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.sprint-dashboard-head img { width: 26px; height: 26px; flex: 0 0 auto; }
.sprint-dashboard-head h2 { margin-bottom: 0; }
.day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 20px; }
.day-cell {
aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center;
font-size: 12.5px; font-weight: 800; background: var(--bg); color: var(--muted); border: 1.5px solid var(--border);
}
.day-cell.done { background: var(--gradient-cta); color: var(--navy); border-color: transparent; cursor: pointer; }
.day-cell.done:hover { filter: brightness(0.97); }
.day-cell.today { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15); }
.day-cell.locked { opacity: .55; }
/* "כבר בוצע היום" עברה מהערה נפרדת מתחת לכפתור *לתוך* הכפתור עצמו
(לבקשת לאה, 2026-08-31, סבב נוסף: "את TODAY SESSION IS ALREADY DONE
הייתי רוצה להכניס לכפתור") — שורה שנייה קטנה בתוך אותו כפתור צבעוני,
מתחת לתווית הראשית. הכפתור עצמו כבר אף פעם לא disabled — עדיין אפשר
ללחוץ ולתרגל שוב. */
.sprint-start-btn { flex-direction: column; gap: 2px; padding-top: 12px; padding-bottom: 12px; line-height: 1.25; }
.sprint-start-main { display: block; }
.sprint-start-sub { display: block; font-size: 11px; font-weight: 700; opacity: .75; }
/* שורת הסטטוס/הנחיה מתחת לרשת הימים — עודכנה לפורמט המשולב "X/14 הושלמו
· לחצו על יום ✓ לצפייה בתוצאה" (לבקשת לאה, 2026-08-31, סבב נוסף —
דוגמה מצורפת), בדיוק כמו ה-.lock-body המקורי של MoveFocus. */
.sprint-grid-hint { font-size: 12px; color: var(--muted); text-align: center; margin-top: -12px; margin-bottom: 16px; }
/* שני "משקלים" של קישור משני, בדיוק כמו MoveFocus: .home-link רגיל
(טקסט מודגש-קו, ללא רקע) לפעולות טפלות, ו-.home-link-cta — גרסת
"כפתור-כדור" מודגשת עם רקע accent — לפעולה שה-MoveFocus הדגיש הכי
הרבה: "תוצאות ההערכה האחרונה". */
.sprint-secondary-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
/* אייקונים בכפתורי הפעולה המשניים (לבקשת לאה, 2026-08-31, סבב נוסף:
פעמון ליד "שמירת תזכורת", ואייקון מתאים ליד "שמירת הרינגטון"). הכפתור
עצמו הפך מ-display:block + text-align:center ל-flex עם gap: ב-block
רגיל ה-![]()
(שהוא display:block כברירת-מחדל גלובלית) יוצא מזרימת
הטקסט ונדבק לקצה הקופסה במקום לשבת ליד המילה הראשונה — בדיוק התקלה
שלאה תיארה ב-2026-09-01 ("האייקונים צריכים להיות בתחילת המשפטים
הרלוונטים ולא בצד"). ב-flex, האייקון והטקסט הם שני "פריטים" צמודים
שממורכזים יחד כיחידה אחת, כך שהאייקון תמיד נשאר צמוד לתחילת המשפט
(בעברית: מימין לטקסט, מכיוון שזה כיוון הקריאה RTL). */
.sprint-secondary-actions .home-link {
width: 100%; text-decoration: none;
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.home-link-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-size: 13px; font-weight: 800; color: var(--accent-text); background: var(--accent-soft);
border: 1.5px solid rgba(var(--accent-rgb),0.3); border-radius: 20px; padding: 10px 18px;
text-align: center; font-family: var(--font-body); cursor: pointer;
text-decoration: none !important; margin-top: 6px; transition: transform .1s, background .15s;
}
.home-link-cta:hover { background: rgba(var(--accent-rgb),0.16); }
.home-link-cta:active { transform: scale(0.97); }
/* Day-result modal (2026-08-28, לבקשת לאה) — תקציר מה שתורגל באותו יום:
אין ציון/ביצוע לאימון היומי (זה טקס מונחה, לא משימה עם מדדים), אז
"התוצאות" כאן הן מה שתורגל: צ'אקרה+תדר, שער האהבה, והיעד שעבדו עליו. */
.day-result-swatch { width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 10px; }
.day-result-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.day-result-row:last-child { border-bottom: none; }
.day-result-row span:first-child { color: var(--muted); }
.day-result-row span:last-child { font-weight: 800; color: var(--text); }
.comparison-bars { display: flex; justify-content: center; align-items: flex-end; gap: 36px; height: 160px; margin: 18px 0; }
.comparison-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: 72px; font-size: 13px; font-weight: 800; color: var(--navy); }
.comparison-bar { width: 44px; border-radius: 10px 10px 0 0; margin-bottom: 8px; transition: height .8s cubic-bezier(0.25,1,0.5,1); align-self: flex-end; }
.comparison-label { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 4px; }
.comparison-delta { font-size: 20px; font-weight: 900; color: var(--accent-text); margin: 4px 0 18px; }
.maintenance-dashboard { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 22px; text-align: center; }
.maintenance-dashboard h2 { font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.maintenance-dashboard p { font-size: 13.5px; color: var(--muted-text); line-height: 1.6; margin: 0 0 16px; }
.maintenance-reassess-banner {
margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft);
color: var(--accent-text); font-size: 12.5px; font-weight: 700; cursor: pointer; line-height: 1.5;
}
.tune-library-card { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); text-align: start; }
.tune-library-card h3 { font-size: 14.5px; font-weight: 800; color: var(--navy); margin-bottom: 4px; text-align: center; }
.tune-library-card p { text-align: center; }
.tune-library-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.tune-chip {
padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
background: color-mix(in srgb, var(--chip-color) 14%, white); color: var(--navy);
border: 1.5px solid color-mix(in srgb, var(--chip-color) 45%, white);
}
/* ---------- Daily session visuals (3 segments — reset / tuning / ripple), inside dark #test ---------- */
/* Wraps the chakra body image + the pulsing aura together in the training
session's "reset" segment so they stack vertically (like chakra-sweep-wrap
does in the assessment) instead of sitting side-by-side inside the
flex-row .test-arena. */
.session-reset-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; max-width: 340px; }
.session-aura-wrap { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.session-aura {
width: 170px; height: 170px; border-radius: 50%;
background: radial-gradient(circle, var(--aura-color, var(--aura-color1)) 0%, transparent 70%);
}
.session-aura.love { background: radial-gradient(circle, var(--aura-color1) 0%, var(--aura-color2) 55%, transparent 78%); }
.session-aura.pulsing { animation: sessionAuraPulse 2.6s ease-in-out infinite; }
@keyframes sessionAuraPulse {
0%, 100% { transform: scale(0.92); opacity: .75; }
50% { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .session-aura.pulsing { animation: none; } }
.session-timer { font-size: 40px; font-weight: 900; font-family: var(--font-ui); color: #fff; }
.ripple-outer { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }
.ripple-ring {
position: absolute; border-radius: 50%; border: 2px solid transparent;
border-image: linear-gradient(135deg, var(--aura-color1), var(--aura-color2)) 1;
animation: rippleExpand 3.2s ease-out infinite;
}
.ripple-ring.r1 { width: 70px; height: 70px; animation-delay: 0s; }
.ripple-ring.r2 { width: 70px; height: 70px; animation-delay: 1.05s; }
.ripple-ring.r3 { width: 70px; height: 70px; animation-delay: 2.1s; }
@keyframes rippleExpand {
0% { width: 70px; height: 70px; opacity: .9; }
100% { width: 220px; height: 220px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ripple-ring { animation: none; opacity: .5; } }
.ripple-outer .session-timer { position: relative; z-index: 2; }
.session-summary { text-align: center; padding: 20px; }
.session-summary-stars { font-size: 34px; letter-spacing: 4px; margin-bottom: 10px; }
.session-summary h2 { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 18px; }
/* ---------- Utility ---------- */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ==========================================================================
Daily Alignment Protocol — האימון היומי בן ארבעת השלבים
(אפיון לאה, 2026-08-27). ראו js/daily-session.js.
שפה חזותית: Dark Mode יוקרתי, קווי ניאון אורגניים, זוהר רך (Bloom).
========================================================================== */
#test.daily-session .test-arena { align-items: center; justify-content: flex-start; }
.daily-stage {
width: 100%; display: flex; flex-direction: column; align-items: center;
gap: 14px; padding-top: 4px;
}
.daily-timer {
font-family: var(--font-ui); font-size: 13px; font-weight: 800;
color: rgba(255,255,255,0.45); letter-spacing: .04em;
}
.daily-hold-hint {
font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.6);
text-align: center; max-width: 260px; transition: opacity .35s;
}
/* ---------- שלב 1: הדמות + שבע הצ'אקרות ---------- */
.daily-figure-wrap { position: relative; width: 152px; flex: 0 0 auto; }
/* pointer-events:none (2026-08-31): the figure is pure decoration — the real
tap targets (bloom pad, chakra button, slider) sit in their own layers
above/around it — so taps pass straight through instead of ever landing
on the bare ![]()
and triggering a native long-press/share menu there. */
.daily-figure-img { width: 100%; display: block; opacity: .62; pointer-events: none; }
.daily-chakra-symbol {
position: absolute; width: 30px; height: 30px; transform: translate(-50%, -50%);
object-fit: contain; pointer-events: none; border-radius: 50%;
/* מסכה עגולה רכה מעל התמונה עצמה (לבקשת לאה, 2026-08-29: "הצ'אקרה
צריכה להיות מעוגלת ועם קצבות רכים שמשתלבים עם הרקע") — בלי תלות
בצורת האלפא המדויקת של קובץ ה-PNG (שנחתך לפי גוון מהתמונה המקורית
ולא תמיד עגול-חלק בעצמו), כך שכל שבעת הסמלים מתעגלים אחיד.
עדכון (2026-08-31, לבקשת לאה): "כל הצ'אקרות צריכות להיות בעיגול עם
שוליים עמומים" — הוסף רקע radial-gradient עדין (נמסך יחד עם התמונה
עצמה, כי mask-image חל על כל תוכן האלמנט) כך שכל שבע הצ'אקרות
(כולל הדוממות, לא רק הפעילה) קוראות ויזואלית כ"עיגול" עם שוליים
דוהים — לא רק כסמל מרחף בלי מסגרת. */
background: radial-gradient(circle, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 55%, transparent 82%);
-webkit-mask-image: radial-gradient(circle, #000 55%, transparent 88%);
mask-image: radial-gradient(circle, #000 55%, transparent 88%);
}
/* שש הצ'אקרות שאינן של היום — מעומעמות ל-15% לפי האפיון */
.daily-chakra-symbol.dim { opacity: .15; }
/* צ'אקרת היום — גדולה יותר, בהירה, ופועמת בניאון בצבע שלה. הנשימה
(שלב 1, לבקשת לאה 2026-08-29) מונעת ישירות על הסימבול הזה — ראו
.daily-breath-touch.inhale/.exhale למטה — ולכן אין כאן יותר אנימציית
פעימה קבועה משלה; הסקייל וההילה נגזרים ממחזור הנשימה בפועל. */
.daily-chakra-symbol.active {
width: 46px; height: 46px; opacity: 1;
filter: drop-shadow(0 0 10px var(--chakra-color)) drop-shadow(0 0 22px var(--chakra-color));
transition: transform 5s ease-in-out, filter .3s ease;
}
/* מגע והחזקה על כל אזור הדמות (לא עוד כרית נפרדת) — הסימבול הפעיל עצמו
הוא מד הנשימה: קטן בנשיפה, מתרחב משמעותית בשאיפה. ה-INHALE/EXHALE
(לבקשת לאה, 2026-08-31: "מעל הדמות בפונט יותר גדול... ומתחת את הספירה
לאחור") יושב עכשיו בבלוק .daily-breath-header *מעל* הדמות, לא מתחתיה. */
.daily-breath-touch {
background: none; border: none; padding: 10px; margin: -10px; cursor: pointer;
display: block; -webkit-tap-highlight-color: transparent;
}
.daily-breath-touch:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .5); outline-offset: 6px; border-radius: 50%; }
.daily-breath-touch.holding .daily-chakra-symbol.active {
filter: drop-shadow(0 0 16px var(--chakra-color)) drop-shadow(0 0 34px var(--chakra-color));
}
/* לבקשת לאה (2026-08-31): "כאשר שמים את האצבע על הצ'אקרה - אני רוצה
שהיא תגדל הרבה יותר... לפחות בפי 2" — הוכפל מ-2.1 ל-4.2. אז (סבב נוסף
באותו יום): "שהצ'אקרה לא תהיה כל כך גדולה - הקטן אותה בחצי" — הוקטן
בחזרה ל-2.1. */
.daily-breath-touch.inhale .daily-chakra-symbol.active { transform: translate(-50%, -50%) scale(2.1); }
.daily-breath-touch.exhale .daily-chakra-symbol.active { transform: translate(-50%, -50%) scale(1); }
/* .daily-breath-header עוטף את ה-cue (Inhale/Exhale) ואת הספירה-לאחור
(#dsTimer) יחד, ממורכז מעל הדמות/הכרית — משותף גם לשלבים 2-3 (שם אין
cue, רק #dsTimer, שמקבל את אותו מיקום "מעל הדמות" בלי ה-wrapper). */
.daily-breath-header {
display: flex; flex-direction: column; align-items: center; gap: 4px;
margin-bottom: 2px;
}
.daily-breath-cue {
font-family: var(--font-ui); font-size: 24px; font-weight: 900; letter-spacing: .04em;
color: #fff; text-shadow: 0 0 12px rgba(0,0,0,.55); min-height: 30px;
}
/* מד-נשימה משותף לשלושת השלבים (לבקשת לאה, 2026-09-04) — נקודה קטנה
שמתרחבת/מתבהרת בשאיפה + המילה INHALE/EXHALE, מתחת לספירה-לאחור, באותו
מיקום ובאותה חוויה גם בשלב 2 (שאין בו כלל .daily-breath-header) וגם
בשלב 3 (שיש בו .daily-breath-cue קבוע לשם השער). ראו dsBreathIndicatorHtml
/ dsStartBreathClock ב-js/daily-session.js. */
.daily-breath-indicator {
display: flex; align-items: center; justify-content: center; gap: 7px;
margin-top: 2px;
}
.daily-breath-indicator-dot {
width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
background: rgba(255,255,255,.35);
/* --breath-ms מגיע מ-JS (dsStartBreathClock) ומוחזק תמיד על משך שלב
הנשימה *הבא* בפועל (inhaleSec/exhaleSec מהאדמין), כך שגם אם לאה
תשנה אותם, קצב הנקודה ימשיך להיות מסונכרן עם הטיימר במקום ערך קבוע. */
transition: transform var(--breath-ms, 5s) ease-in-out, background-color .5s ease;
}
.daily-breath-indicator.inhale .daily-breath-indicator-dot {
background: rgba(255,255,255,.9); transform: scale(1.9);
}
.daily-breath-indicator-text {
font-family: var(--font-ui); font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: rgba(255,255,255,.5); transition: color .5s ease;
}
.daily-breath-indicator.inhale .daily-breath-indicator-text { color: rgba(255,255,255,.92); }
/* ---------- שלב 2: סקאלה אנכית זוהרת, ממורכזת על הדמות ---------- */
.daily-stage-tuning { padding-top: 10px; }
/* עדכון (2026-09-05, לבקשת לאה): שם היעד+האחוזים כבר לא "צפים"
(position:absolute) מעל ה-halo/סליידר — הם עברו לתוך .daily-breath-header
המשותף (ראו dsStage2Tuning), אז אין יותר צורך במרווח מלאכותי כאן כדי
שלא יתנגשו במד-הנשימה; .daily-figure-wrap חוזר לאותו מיקום בדיוק כמו
בשלבים 1 ו-3. */
.daily-vscale-wrap {
position: relative; height: 260px; display: flex; align-items: center;
justify-content: center; gap: 18px;
}
/* לבקשת לאה (2026-08-30): "הסקאלה תמוקם במקום הצ'אקרות" — הסקאלה יושבת
כשכבה absolute במרכז .daily-figure-wrap (בדיוק כמו סמלי הצ'אקרות של
שלב 1), במקום שורת flex נפרדת מתחת/ליד הדמות.
לבקשת לאה (2026-08-31): "הסקאלה צריכה להיות במרכז הדמות, והנקודה...
כרגע היא בנטיה ימינה. האחוזים צריכים להיות מעל הסקאלה" — התווית
(.daily-vscale-pct) עברה משורה אחת עם ההילה+הסליידר (מה שמשך את כל
המקבץ ימינה, כי התווית "גזלה" רוחב מהצד) לשורה נפרדת מעליהם
(flex-direction: column), כך ש-.daily-vscale-track (הילה+סליידר בלבד)
יכול להיות ממורכז בדיוק על .daily-figure-wrap בלי שום אלמנט צדדי. */
/* .daily-vscale-overlay ממורכז על הדמות ותפוס בגודל .daily-vscale-track
(210x210, בדיוק כמו ההילה) — .daily-vscale-pct ממוקמת absolute מעליו
(bottom:100%), כך שהיא "צפה" מעל הסקאלה בלי להשפיע על מרכוז
ההילה/הסליידר עצמם.
עדכון (2026-08-31, לבקשת לאה): "אפשר טיפה להוריד את הסקאלה כלפי מטה
שהחלק העליון יסתיים ב-CROWN" — במקום מרכוז מדויק (translate(-50%,-50%))
ההיסט האנכי הוקטן ל--46%, שמזיז את כל הבלוק (הילה+סליידר+תווית) כ-9
פיקסלים למטה, כך שקצה הסקאלה מתיישר עם נקודת ה-CROWN בדמות (ולא מעליה). */
.daily-vscale-overlay {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%);
width: 210px; height: 210px;
pointer-events: none; /* רק הסליידר עצמו (z-index:2 למטה) צריך להיות לחיץ */
}
.daily-vscale-overlay .daily-vscale { pointer-events: auto; }
.daily-vscale-track { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
/* ההילה מרוכזת עכשיו במדויק על .daily-vscale-track (שמכיל רק אותה ואת
הסליידר — לא עוד את תווית האחוזים לצידה), אז אין יותר צורך בהיסט
ידני כלשהו. */
.daily-vscale-halo {
position: absolute; top: 50%; left: 50%;
width: 210px; height: 210px;
transform: translate(-50%, -50%) scale(calc(.42 + var(--v, 0) * .58));
border-radius: 50%;
background: radial-gradient(circle, var(--scale-color) 0%, transparent 68%);
opacity: calc(.18 + var(--v, 0) * .55); pointer-events: none;
transition: transform .18s, opacity .18s;
}
.daily-vscale-halo.locked { animation: dailyLockGlow 2.4s ease-in-out infinite; }
@keyframes dailyLockGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.45); } }
/* לבקשת לאה (2026-08-31): "יש לה נטיה ימינה" — writing-mode:vertical-lr +
direction:rtl (הגישה הקודמת לסליידר אנכי) ידוע כלא-עקבי בין
דפדפנים/מערכות במרכוז ה-thumb על ציר הרוחב. פתרון יציב יותר: סליידר
*אופקי* רגיל (שהמרכוז שלו מובטח ע"י התנהגות ברירת המחדל הרגילה של
input[type=range]) שמסובב ב-CSS בשלמותו סביב מרכזו — התוצאה הוויזואלית
זהה לסליידר אנכי, בלי אף אחת מבעיות ה-writing-mode. rotate(-90deg) הופך
את "ימין" (המקסימום של הסליידר האופקי) ל"מעלה" — אותה התנהגות בדיוק
שהייתה קודם (גרירה למעלה = הגברה). */
.daily-vscale {
-webkit-appearance: none; appearance: none;
width: 240px; height: 22px; margin: 0; padding: 0;
background: none; cursor: pointer; position: relative; z-index: 2;
transform: rotate(-90deg); transform-origin: center center;
/* לבקשת לאה (2026-08-31): "כאשר אני מנסה לתפוס את הנקודה ולהזיז אותה
למעלה - המסך כולו עולה" — הדפדפן מחליט האם לאפשר גלילת-עמוד ברירת-
מחדל לפי הצורה הבסיסית (הלא-מסובבת) של האלמנט: סליידר *אופקי*
"מצפה" לגרירה אופקית בלבד, כך שגרירה אנכית עליו (אחרי הסיבוב
הוויזואלי, זו בדיוק הגרירה שהמשתמשת עושה) מתפרשת כמחוות-גלילה של
העמוד ולא נבלמת אוטומטית. touch-action:none מבטל את זה לגמרי ומשאיר
את הגרירה רק לסליידר עצמו. */
touch-action: none;
/* לבקשת לאה (2026-09-05): "בשפה העברית הסקאלה של שלב 2 הפוכה" — הבאג:
יורש את ה-direction האמביינטי של הדף (dir="rtl"
שה-i18n קובע על ה- בעברית — ראו js/i18n.js). ב-RTL, "0%" של
סליידר אופקי-רגיל (לפני הסיבוב) יושב מימין ו-"100%" משמאל — הפוך
מ-LTR. rotate(-90deg) עצמו הוא טרנספורם פיזי גרידא (לא תלוי-שפה) —
הוא תמיד הופך "ימין הפיזי" ל"מעלה". בעברית, "ימין הפיזי" הוא כבר
ה-0%, ולכן אחרי הסיבוב "מעלה" הפך ל-0% במקום ל-100% — הסקאלה
כולה התהפכה: גרירה למעלה הורידה את האחוז במקום להעלות אותו. מכיוון
שההילה (--v) והשמע (ensureLoop/updateGoalLoop) כבר נגזרים נכון מ-
slider.value, השורה היחידה שהייתה חסרה היא לקבע את הסמנטיקה הפנימית
של הסליידר ל-LTR תמיד, בלי קשר לשפת הדף — כך שהסיבוב הפיזי הקבוע
ימשיך למפות "ימין=100%" -> "מעלה=100%" בכל שפה, וההילה+הצליל
(שכבר תלויים רק בערך הסמנטי הנכון) יתיישרו איתו אוטומטית. */
direction: ltr;
}
.daily-vscale::-webkit-slider-runnable-track {
height: 12px; border-radius: 999px;
background: linear-gradient(to right,
var(--scale-color) 0%, var(--scale-color) var(--val, 0%),
rgba(var(--scale-rgb), .14) var(--val, 0%), rgba(var(--scale-rgb), .14) 100%);
border: 1px solid rgba(var(--scale-rgb), .45);
box-shadow: 0 0 14px 1px rgba(var(--scale-rgb), .5);
}
.daily-vscale::-moz-range-track {
height: 12px; border-radius: 999px;
background: linear-gradient(to right,
var(--scale-color) 0%, var(--scale-color) var(--val, 0%),
rgba(var(--scale-rgb), .14) var(--val, 0%), rgba(var(--scale-rgb), .14) 100%);
border: 1px solid rgba(var(--scale-rgb), .45);
}
.daily-vscale::-webkit-slider-thumb {
-webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
background: #fff; border: 2px solid var(--scale-color);
box-shadow: 0 0 14px 2px var(--scale-color); cursor: grab;
margin-top: -7px; /* ממרכז את ה-thumb (26px) על ה-track (12px) */
}
.daily-vscale::-moz-range-thumb {
width: 26px; height: 26px; border-radius: 50%;
background: #fff; border: 2px solid var(--scale-color);
box-shadow: 0 0 14px 2px var(--scale-color); cursor: grab;
}
/* עדכון (2026-09-05, לבקשת לאה): האחוזים כבר לא "צפים" מעל הסקאלה
(position:absolute) ליד שם היעד בשורה נפרדת (.daily-vscale-pct/
.daily-vscale-goal-name, שתיהן בוטלו) — הם עברו לשורה הראשונה בתוך
.daily-breath-header המשותף (ראו dsStage2Tuning), *לפני* שם היעד עצמו
(שמוצג עכשיו ב-.daily-breath-cue, אותה מחלקה בדיוק ששלבים 1/3
משתמשים בה לשם הצ'אקרה/השער — כך גם המיקום וגם הגופן זהים בשלושת
השלבים, כפי שלאה ביקשה). */
.daily-vscale-pct-num {
font-family: var(--font-ui); font-size: 22px; font-weight: 900; color: #fff;
text-shadow: 0 0 10px rgba(0,0,0,.5); letter-spacing: .04em;
}
/* ---------- שלב 3: Radial Bloom, ממורכזת על הדמות ---------- */
/* לבקשת לאה (2026-08-30): "לשים את אותה הדמות... עם ההילה הספציפית
שעובדים עליה" — ההילה יושבת עכשיו כשכבה absolute במרכז .daily-figure-wrap
(בדיוק כמו הסקאלה בשלב 2 וסמלי הצ'אקרות בשלב 1), במקום אלמנט עצמאי
בזרימה הרגילה. */
.daily-figure-wrap .daily-bloom-wrap {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.daily-bloom-wrap {
position: relative; width: 220px; height: 220px;
display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.daily-bloom-ring {
position: absolute; inset: 0; border-radius: 50%;
border: 1.5px solid rgba(var(--gate-rgb), .5);
transform: scale(.34); opacity: .5;
transition: transform 1.6s cubic-bezier(.22,1,.36,1), opacity 1.6s;
}
/* לבקשת לאה (2026-08-31, סבב נוסף): "שההילה תתפוצץ במקסימום ותשאר
גדולה" — לחיצה חד-פעמית (ראו dsStage3Gate) מוסיפה .blooming *לצמיתות*
במקום toggle על החזקה, אז ערכי היעד הוגדלו כדי שה"התפוצצות" תיראה
משמעותית ותישאר כך למשך כל השלב (לא רק רגע קצר בזמן החזקה). */
.daily-bloom-wrap.blooming .daily-bloom-ring.r1 { transform: scale(1.15); opacity: .9; }
.daily-bloom-wrap.blooming .daily-bloom-ring.r2 { transform: scale(1.75); opacity: .6; transition-delay: .18s; }
.daily-bloom-wrap.blooming .daily-bloom-ring.r3 { transform: scale(2.4); opacity: .35; transition-delay: .36s; }
.daily-bloom-pad {
width: 108px; height: 108px; border-radius: 50%; cursor: pointer; border: none;
background: radial-gradient(circle, var(--gate-color) 0%, rgba(var(--gate-rgb), .25) 60%, transparent 78%);
box-shadow: 0 0 30px 6px rgba(var(--gate-rgb), .45);
animation: dailyGatePulse 3.4s ease-in-out infinite;
/* לבקשת לאה (2026-08-31): "כאשר מניחים את האצבע יש ריבוע שמרצד ונעלם" —
ה-tap-highlight המובנה של הדפדפן במובייל (ריבוע אפור/כחלחל שמופיע על
כל אלמנט לחיץ בברירת מחדל, גם עגול) לא היה מבוטל כאן, בניגוד ל-
.daily-breath-touch שכבר קיבל את התיקון הזה קודם. */
-webkit-tap-highlight-color: transparent;
}
.daily-bloom-pad:focus-visible { outline: 3px solid rgba(var(--gate-rgb), .6); outline-offset: 4px; }
.daily-bloom-wrap.blooming .daily-bloom-pad {
box-shadow: 0 0 60px 18px rgba(var(--gate-rgb), .6);
animation-duration: 2s;
}
@keyframes dailyGatePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
/* ---------- שלב 4: Eyes-Closed Mode ---------- */
.daily-stage-outro { position: relative; padding-top: 40px; gap: 24px; }
.daily-outro-glow {
width: 170px; height: 170px; border-radius: 50%;
background: radial-gradient(circle, rgba(var(--gate-rgb), .55) 0%, transparent 70%);
animation: dailyOutroBreathe 8s ease-in-out infinite;
}
@keyframes dailyOutroBreathe {
0%, 100% { transform: scale(.82); opacity: .45; }
50% { transform: scale(1.08); opacity: .85; }
}
.daily-outro-text {
font-size: 13.5px; color: rgba(255,255,255,0.55); text-align: center;
max-width: 250px; line-height: 1.6;
}
.daily-mute-btn {
position: absolute; top: 0; inset-inline-end: 4px;
width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.8); display: flex; align-items: center; justify-content: center;
}
.daily-mute-btn svg { width: 18px; height: 18px; }
.daily-mute-btn.muted { color: rgba(255,255,255,.4); }
.daily-mute-btn:focus-visible { outline: 3px solid rgba(255,255,255,.45); outline-offset: 2px; }
/* ---------- טבעת 14 הימים (Orbit Ring) ---------- */
.orbit-ring-wrap { position: relative; width: 132px; height: 132px; margin: 4px auto 12px; }
.orbit-ring { width: 100%; height: 100%; transform: rotate(0deg); }
.orbit-seg { stroke: var(--border); transition: stroke .3s; }
.orbit-seg.on { stroke: var(--accent); filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .8)); }
.orbit-seg.now { stroke: var(--accent); opacity: .55; animation: orbitPulse 2.2s ease-in-out infinite; }
@keyframes orbitPulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
.orbit-ring-center {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-family: var(--font-ui); pointer-events: none;
/* "1/14" הוא שבר, לא משפט — בלי כפיית LTR הוא מתהפך ל-"14/1" בעברית */
direction: ltr;
}
.orbit-num { font-size: 26px; font-weight: 900; color: var(--navy); }
.orbit-of { font-size: 14px; font-weight: 700; color: var(--muted); }
/* ---------- כרטיס ההאב היומי ---------- */
/* margin-bottom הועלה מ-2px ל-16px (לבקשת לאה, 2026-09-01: "תיצר רווח
בין 14 המשבצות לבין הכיתוב של ה-ASPIRATION") — 2px הדביק את שורת
השאיפה ("השאיפה שלך היא X") ממש לתוך משבצות היום הראשונות, בלי
שום נשימה חזותית ביניהן. */
.hub-day-line { font-size: 13px; font-weight: 700; color: var(--accent-text); text-align: center; margin-bottom: 16px; }
.hub-plan { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.hub-plan-chip {
font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px;
color: var(--chip-color); border: 1.5px solid var(--chip-color); background: color-mix(in srgb, var(--chip-color) 10%, transparent);
}
/* ---------- מסך השלמת האימון היומי ---------- */
.daily-done-card, .cycle-done-card {
background: var(--white); border: 1px solid var(--border); border-radius: 22px;
padding: 24px 20px; margin: 0 22px 16px; text-align: center;
}
.daily-done-check {
width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 30px; font-weight: 900; color: #fff; background: var(--gradient-cta);
box-shadow: var(--glow-primary);
}
.daily-done-card h2, .cycle-done-card h2 { font-size: 19px; font-weight: 900; color: var(--navy); margin-bottom: 4px; }
.daily-done-sub { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.daily-boost {
display: inline-block; font-size: 12.5px; font-weight: 800; color: var(--accent-text);
background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), .25);
border-radius: 999px; padding: 6px 14px; margin-bottom: 14px;
}
.daily-intention {
background: var(--bg); border-radius: 14px; padding: 14px; margin-bottom: 16px; text-align: start;
}
.daily-intention-head { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.daily-intention p { font-size: 13.5px; line-height: 1.6; color: var(--navy); margin: 0; }
/* ---------- מסך סיום מחזור 14 הימים ---------- */
.cycle-done-card { position: relative; overflow: hidden; }
.cycle-radiance {
position: absolute; inset: -40%; pointer-events: none;
background: radial-gradient(circle, rgba(var(--accent-rgb), .18) 0%, transparent 62%);
animation: cycleRadiance 6s ease-in-out infinite;
}
@keyframes cycleRadiance { 0%,100% { transform: scale(.9); opacity: .6; } 50% { transform: scale(1.1); opacity: 1; } }
.cycle-done-card > * { position: relative; }
.cycle-done-sub { font-size: 13px; color: var(--muted-text); line-height: 1.6; margin-bottom: 12px; }
.cycle-bri-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.cycle-bri { display: flex; flex-direction: column; gap: 2px; }
.cycle-bri-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cycle-bri-val { font-family: var(--font-ui); font-size: 22px; font-weight: 900; color: var(--navy); }
.cycle-bri-pending { font-size: 15px; color: var(--accent-text); }
.cycle-bri-arrow { font-size: 20px; color: var(--accent-text); }
[dir="rtl"] .cycle-bri-arrow { transform: scaleX(-1); }
.cycle-sealed {
font-size: 12.5px; font-weight: 700; color: var(--accent-text);
background: var(--accent-soft); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px;
}
@media (prefers-reduced-motion: reduce) {
.daily-bloom-pad, .daily-outro-glow,
.orbit-seg.now, .cycle-radiance, .daily-vscale-halo.locked { animation: none; }
.daily-chakra-symbol.active, .daily-bloom-ring { transition-duration: .2s; }
}