/* ============================================================ 4Q LIFE · PLATFORM PROTOTYPE · DESIGN SYSTEM Спільний файл стилів для всіх сторінок прототипу. Стан сайдбара керується класом .sb-open на . ============================================================ */ /* ============================================================ ТОКЕНИ ============================================================ */ :root{ --bg:#F6F7FB; --card:#FFFFFF; --text:#0F172A; --muted:#64748B; --border:rgba(15,23,42,0.08); --sidebar-bg:#0E1130; --sidebar-text:#CDD3EA; --sidebar-muted:#7D86AD; --accent:rgb(9,143,227); --accent-2:#5CB6F0; --accent-soft:rgba(9,143,227,.1); --grad:linear-gradient(135deg, rgb(9,143,227), #5CB6F0); --success:#34D399; --success-soft:rgba(52,211,153,.12); --warning:#FBBF24; --warning-soft:rgba(251,191,36,.15); --roots:#8A5A3B; --ph:#DFE4EE; --ph-icon:#9AA5C0; --r-card:18px; --r-card-lg:20px; --r-btn:11px; --r-chip:999px; --shadow:0 8px 24px rgba(14,17,48,.06); --shadow-hover:0 14px 34px rgba(14,17,48,.1); --font-head:'Plus Jakarta Sans',sans-serif; --font-body:'Inter',sans-serif; --sb-collapsed:72px; --sb-expanded:264px; } /* ============================================================ БАЗА ============================================================ */ *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); font-size:14px; line-height:1.55; color:var(--text); background:var(--bg); } h1,h2,h3,h4{font-family:var(--font-head);letter-spacing:-0.02em;color:var(--text)} h1{font-size:28px;font-weight:800} h2{font-size:22px;font-weight:700} h3{font-size:17px;font-weight:700} h4{font-size:14px;font-weight:700} .small{font-size:12.5px} .caption{font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:600;color:var(--muted)} .muted{color:var(--muted)} .big-num{font-family:var(--font-head);font-size:28px;font-weight:800;letter-spacing:-0.02em;line-height:1.1} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit} a{color:inherit;text-decoration:none} svg.icon{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} /* Фото-заглушка (замість будь-якого фото) */ .ph{ background:var(--ph); display:flex;align-items:center;justify-content:center; color:var(--ph-icon); } .ph svg.icon{width:24px;height:24px} /* Аватар-заглушка */ .avatar{ width:36px;height:36px;border-radius:50%; background:var(--ph); display:flex;align-items:center;justify-content:center; color:var(--ph-icon);flex-shrink:0; } .avatar svg.icon{width:16px;height:16px} .avatar.sm{width:30px;height:30px} .avatar.sm svg.icon{width:14px;height:14px} .avatar.lg{width:56px;height:56px} .avatar.lg svg.icon{width:22px;height:22px} /* ============================================================ САЙДБАР Стани: згорнутий 72px (за замовчуванням) ↔ розгорнутий 264px. Розгортає клік будь-де по панелі, згортає вихід курсора (app.js). Розгорнутий стан = клас .sb-open на , не зберігається між сторінками. ============================================================ */ .sidebar{ position:fixed;left:0;top:0;bottom:0;z-index:100; width:var(--sb-collapsed); background:var(--sidebar-bg); color:var(--sidebar-text); transition:width .25s ease; /* overflow видимий — щоб кнопка-стрілка виступала за край */ } html.sb-open .sidebar{width:var(--sb-expanded)} .sb-inner{ height:100%;display:flex;flex-direction:column; overflow:hidden; } /* --- Кнопка-стрілка на правому краю (перемикач станів) --- */ /* Згорнутий сайдбар — суцільна зона «клікни, щоб розгорнути» (логіка в app.js) */ html:not(.sb-open) .sidebar{cursor:pointer} /* --- Підписи: без стрибків — тільки opacity --- */ .sb-label{ opacity:0;transition:opacity .2s ease .05s; white-space:nowrap;overflow:hidden; font-size:13.5px;font-weight:500; pointer-events:none; } html.sb-open .sb-label{opacity:1;pointer-events:auto} .sb-top{padding:16px 0 8px;display:flex;flex-direction:column;gap:12px;flex-shrink:0} /* Лого */ /* Згорнутий сайдбар: лого по центру; розгорнутий — з відступом зліва */ .sb-logo-row{ display:flex;align-items:center;justify-content:center;gap:12px; padding:0;height:74px;transition:padding .25s ease; } html.sb-open .sb-logo-row{justify-content:flex-start;padding:0 26px} /* Лого-вордмарк: у згорнутому сайдбарі вужчий, у розгорнутому — на всю ширину. Назва школи вшита в саме зображення, тому окремого .sb-label тут немає. */ .sb-logo{ width:40px;height:auto;flex-shrink:0; object-fit:contain; transition:width .25s ease; } html.sb-open .sb-logo{width:129px} /* Пошук */ .sb-search{ margin:0 16px;height:40px;border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); display:flex;align-items:center;gap:10px; padding:0 10px;overflow:hidden;flex-shrink:0; } .sb-search svg.icon{width:18px;height:18px;color:var(--sidebar-muted);margin-left:1px} .sb-search input{ border:none;background:none;outline:none;flex:1;min-width:0; color:var(--sidebar-text);font-family:var(--font-body);font-size:13px; opacity:0;transition:opacity .2s ease .05s; } .sb-search input::placeholder{color:var(--sidebar-muted)} html.sb-open .sb-search input{opacity:1} /* Навігація */ .sb-nav{flex:1;min-height:0;overflow:visible;padding:8px 12px;display:flex;flex-direction:column;gap:2px} /* Пункти НЕ стискаються: коли розкрита група не вміщається у висоту екрана, меню має прокручуватись / нижній пункт частково ховатись — а не «сплющувати» висоти рядків (через це відступи між пунктами ставали нерівними). */ .sb-nav > *{flex-shrink:0} html.sb-open .sb-nav{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain} html.sb-open .sb-nav::-webkit-scrollbar{width:0} .sb-item{ display:flex;align-items:center;gap:12px; height:44px;flex-shrink:0;padding:0 14px;border-radius:11px; color:var(--sidebar-text);position:relative; transition:background .15s,color .15s; width:100%;text-align:left; } .sb-item:hover{background:rgba(255,255,255,.07);color:#fff} .sb-item.active{background:var(--grad);color:#fff} .sb-item .icon-wrap{position:relative;display:flex;flex-shrink:0} .sb-item .sb-label{flex:1} /* Бейджі (у розгорнутому стані) */ .sb-badge{ font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-chip); background:rgba(92,182,240,.18);color:var(--accent-2); opacity:0;transition:opacity .2s ease .05s;flex-shrink:0; } html.sb-open .sb-badge{opacity:1} /* у згорнутому стані — крапка на іконці */ .sb-dot{ position:absolute;top:-2px;right:-3px;width:7px;height:7px;border-radius:50%; background:var(--accent-2);border:1.5px solid var(--sidebar-bg); transition:opacity .2s ease; } html.sb-open .sb-dot{opacity:0} /* Шеврон підпунктів (групи) */ .sb-caret{ width:24px;height:24px;border-radius:6px;flex-shrink:0; display:flex;align-items:center;justify-content:center; color:var(--sidebar-muted); opacity:0;pointer-events:none; transition:opacity .2s ease .05s,transform .2s ease,background .15s; } html.sb-open .sb-caret{opacity:1;pointer-events:auto} .sb-caret:hover{background:rgba(255,255,255,.1);color:#fff} .sb-caret svg.icon{width:14px;height:14px} .sb-group.open .sb-caret{transform:rotate(180deg)} .sb-item.active .sb-caret{color:rgba(255,255,255,.8)} .sb-item.active .sb-caret:hover{background:rgba(255,255,255,.18);color:#fff} /* Підпункти */ .sb-sub{ max-height:0;overflow:hidden;transition:max-height .25s ease; display:flex;flex-direction:column;gap:2px; } .sb-group.open .sb-sub{max-height:320px} /* у згорнутому сайдбарі підпункти недоступні */ html:not(.sb-open) .sb-sub{max-height:0!important} .sb-sub a{ display:flex;align-items:center;gap:10px; height:42px;flex-shrink:0;padding:0 14px 0 46px;border-radius:10px; font-size:13.5px;color:var(--sidebar-muted); transition:background .15s,color .15s;white-space:nowrap; } .sb-sub a:hover{background:rgba(255,255,255,.06);color:#fff} .sb-sub a.active{color:#fff;background:rgba(92,182,240,.14)} .sb-sub a::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--sidebar-muted);flex-shrink:0} /* Роздільник під сповіщеннями */ .sb-divider{height:1px;background:rgba(255,255,255,.18);margin:10px 6px;flex-shrink:0} /* Низ сайдбара */ .sb-bottom{padding:10px 12px 14px;border-top:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:2px;flex-shrink:0} /* Кнопка-стрілки »/«: розгорнути/запінити сайдбар (над карткою профілю). У згорнутому стані підпис повністю прибираємо з потоку — інакше flex:1 label зміщує стрілку вліво (має бути по центру). */ .sb-collapse{ display:flex;align-items:center;justify-content:center;gap:11px; padding:8px;border-radius:10px;border:0;background:none; color:rgba(255,255,255,.55);cursor:pointer;width:100%; transition:background .15s,color .15s; } html.sb-open .sb-collapse{justify-content:flex-start} .sb-collapse:hover{background:rgba(255,255,255,.07);color:#fff} .sb-collapse svg.icon{ width:17px;height:17px;flex-shrink:0; transition:transform .25s ease; } html.sb-open .sb-collapse svg.icon{transform:rotate(180deg);margin-left:3px} .sb-collapse .sb-label{display:none;flex:1;text-align:left;font-size:12.5px} html.sb-open .sb-collapse .sb-label{display:block} /* Перемикач ролі в меню профілю (демо) */ .sb-um-roles{ margin:6px 4px 4px;padding:9px 8px 8px; border-top:1px solid rgba(255,255,255,.08); } .sb-um-roles-t{ font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:rgba(255,255,255,.4);margin:0 4px 7px; } .sb-um-roles-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px} .sb-um-roles-row button{ border:1px solid rgba(255,255,255,.14);background:none;border-radius:8px; padding:6px 4px;font-size:11.5px;font-family:inherit; color:var(--sidebar-text);cursor:pointer; transition:background .15s,color .15s,border-color .15s; } .sb-um-roles-row button:hover{background:rgba(255,255,255,.08);color:#fff} .sb-um-roles-row button.on{ background:var(--grad);border-color:transparent;color:#fff;font-weight:700; } .sb-user{ display:flex;align-items:center;gap:11px; padding:9px 8px;border-radius:12px;margin-top:6px; transition:background .15s; } .sb-user:hover{background:rgba(255,255,255,.06)} .sb-user .avatar{width:38px;height:38px;background:rgba(255,255,255,.1);color:var(--sidebar-muted)} /* У згорнутому стані мету і шеврон прибираємо з потоку повністю, щоб аватар стояв рівно по центру вузької панелі */ .sb-user{justify-content:center} html.sb-open .sb-user{justify-content:flex-start} .sb-user-meta{flex:1;min-width:0;opacity:0;transition:opacity .2s ease .05s;display:none} html.sb-open .sb-user-meta{opacity:1;display:block} .sb-user-name{font-size:13.5px;font-weight:600;color:#fff;white-space:nowrap} .sb-user-mail{font-size:11.5px;color:var(--sidebar-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-logout{ width:30px;height:30px;border-radius:8px;flex-shrink:0; display:flex;align-items:center;justify-content:center; color:var(--sidebar-muted); opacity:0;pointer-events:none; transition:opacity .2s ease .05s,background .15s,color .15s; } html.sb-open .sb-logout{opacity:1;pointer-events:auto} .sb-logout:hover{background:rgba(255,255,255,.1);color:#fff} .sb-logout svg.icon{width:16px;height:16px} /* Тултип згорнутого стану (позиціонується через JS, .sb-tip у app.js) */ .sb-tip{ position:fixed;left:calc(var(--sb-collapsed) + 12px); background:var(--sidebar-bg);color:#fff; font-size:12.5px;font-weight:600;white-space:nowrap; padding:7px 12px;border-radius:9px; border:1px solid rgba(255,255,255,.14); box-shadow:0 8px 24px rgba(14,17,48,.35); z-index:250;pointer-events:none; opacity:0;transform:translateX(-4px); transition:opacity .15s ease,transform .15s ease; } .sb-tip.show{opacity:1;transform:none} .sb-tip::before{ content:"";position:absolute;left:-4px;top:50%; width:8px;height:8px;background:var(--sidebar-bg); border-left:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); transform:translateY(-50%) rotate(45deg); } /* ============================================================ ЛЕЙАУТ КОНТЕНТУ ============================================================ */ .main{ margin-left:var(--sb-collapsed); transition:margin-left .25s ease; padding:28px 32px 56px; } html.sb-open .main{margin-left:var(--sb-expanded)} .layout{ width:100%; display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px; align-items:start; } .layout.single{grid-template-columns:minmax(0,1fr)} .content-col{display:flex;flex-direction:column;gap:26px;min-width:0} .side-col{display:flex;flex-direction:column;gap:18px} /* Верхній бар сторінки */ .topbar{ grid-column:1/-1; display:flex;align-items:center;justify-content:space-between;gap:16px; } .topbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .greeting{font-family:var(--font-head);font-size:20px;font-weight:700;letter-spacing:-0.02em} .topbar-right{display:flex;align-items:center;gap:12px} .bell-btn{ position:relative;width:40px;height:40px;border-radius:12px; background:var(--card);border:1px solid var(--border); display:flex;align-items:center;justify-content:center;color:var(--muted); transition:box-shadow .15s,color .15s,transform .15s; } .bell-btn:hover{box-shadow:var(--shadow);color:var(--text);transform:translateY(-1px)} .bell-dot{ position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%; background:var(--accent);border:1.5px solid var(--card); } /* Заголовки секцій */ .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px} .section-link{font-size:13px;font-weight:600;color:var(--accent);transition:opacity .15s} .section-link:hover{opacity:.75} /* ============================================================ КАРТКИ / ВІДЖЕТИ ============================================================ */ .card{ background:var(--card);border:1px solid var(--border); border-radius:var(--r-card);box-shadow:var(--shadow); } .card.pad{padding:20px 22px} .card-hover{transition:transform .15s,box-shadow .15s} .card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)} .widget{padding:18px 20px} .widget h3{font-size:15px;margin-bottom:12px} /* Профіль-блок правої колонки (компактний, за v1-hub). На сторінках із деревом — обʼєднаний з віджетом «Моє дерево» в один контейнер .card.widget через роздільник .pw-divider. */ .profile-card{display:flex;align-items:center;gap:12px} .card.profile-card{padding:14px 18px} /* якщо стоїть окремою карткою */ .p-ava{ width:44px;height:44px;border-radius:50%;flex-shrink:0; background:var(--ph);display:flex;align-items:center;justify-content:center;color:var(--ph-icon); } .p-meta{flex:1;min-width:0} .p-name{ font-family:var(--font-head);font-weight:700;font-size:12.5px;line-height:1.3; text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px; } .p-link{font-size:11.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;white-space:nowrap} .p-link:hover{color:var(--accent)} .q-box{ background:var(--sidebar-bg);color:#fff;border-radius:13px; padding:8px 12px;flex-shrink:0; display:flex;flex-direction:column;align-items:center;line-height:1.1; } .q-box-top{display:flex;align-items:center;gap:6px} .q-box-num{font-family:var(--font-head);font-size:17px;font-weight:800} /* Монетка к'юшки — офіційний арт. Літера «Q» в розмітці лишилась як запасний варіант, якщо арт не завантажиться; коли він є — схована. */ .q-coin{ width:17px;height:17px;flex-shrink:0; background:url(img/q-shka.png) center/contain no-repeat; font-size:0;color:transparent; } .q-box-label{font-size:10px;color:#9BA6CC;margin-top:2px} /* Роздільник між профілем і деревом (кружечок-шеврон по центру) */ .pw-divider{position:relative;border-top:1px solid var(--border);margin:16px -20px 16px} .pw-divider i{ position:absolute;left:50%;top:-11px;transform:translateX(-50%); width:22px;height:22px;border-radius:50%; background:var(--card);border:1px solid var(--border); display:flex;align-items:center;justify-content:center;color:var(--muted); } .pw-divider i svg.icon{width:12px;height:12px} /* Індикатор стадій дерева: 4 крапки + підпис */ .stage-dots{display:flex;gap:6px;justify-content:center;margin:2px 0 10px} .stage-dots i{width:8px;height:8px;border-radius:50%;background:#E2E8F0} .stage-dots i.on{background:var(--success)} .tree-caption{font-size:12.5px;color:var(--muted);text-align:center;margin-bottom:12px} /* Рядок плоду у віджеті дерева (повна реалізація плодів — на tree.html) */ .fruit-line{ display:inline-flex;align-items:center;gap:6px;margin-top:3px; font-size:12.5px;color:var(--muted); } .fruit-line svg{flex-shrink:0} .fruit-line b{color:var(--text);font-weight:600} /* Віджет «Моє дерево» — компактний tree-of-life (стиль tree.html / tools/tree-stages.html, стадія 2): темний стовбур-фігура, листя-краплі, дзеркальне коріння, 1 золотий плід. Спільний для dashboard.html / course.html / academy.html — у сторінках не дублювати. */ .tree-widget .tree-svg{display:block;width:100%;height:auto;margin:2px auto 10px} .tree-widget img.tree-svg{max-width:250px} .dw-lf{animation:dwFlutter 4.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%} @keyframes dwFlutter{0%,100%{transform:rotate(0deg)}50%{transform:rotate(2.4deg)}} .dw-glow{animation:dwTwinkle 3.2s ease-in-out infinite} @keyframes dwTwinkle{0%,100%{opacity:.15}50%{opacity:.55}} @media (prefers-reduced-motion: reduce){.dw-lf,.dw-glow{animation:none}} /* ============================================================ КНОПКИ ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-head);font-weight:700;font-size:13.5px; padding:10px 18px;border-radius:var(--r-btn); transition:transform .15s,box-shadow .15s,background .15s,color .15s,border-color .15s; white-space:nowrap; } .btn svg.icon{width:16px;height:16px} .btn-primary{background:var(--grad);color:#fff} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(9,143,227,.35)} .btn-white{background:#fff;color:var(--accent)} .btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,17,48,.2)} .btn-outline{border:1px solid rgba(9,143,227,.35);color:var(--accent);background:transparent} .btn-outline:hover{background:var(--accent);color:#fff} .btn-ghost{color:var(--muted);background:transparent} .btn-ghost:hover{background:rgba(9,143,227,.08);color:var(--accent)} .btn-danger{background:rgba(239,68,68,.1);color:#EF4444} .btn-danger:hover{background:#EF4444;color:#fff} .btn-sm{padding:7px 13px;font-size:12.5px;border-radius:9px} .btn-sm svg.icon{width:14px;height:14px} .btn-lg{padding:13px 24px;font-size:14.5px} .btn-block{display:flex;width:100%} .btn[disabled],.btn.disabled{opacity:.5;pointer-events:none} .btn-icon{ width:36px;height:36px;padding:0;border-radius:10px; display:inline-flex;align-items:center;justify-content:center; color:var(--muted);transition:background .15s,color .15s; } .btn-icon:hover{background:rgba(9,143,227,.1);color:var(--accent)} /* ============================================================ ЧИПИ / БЕЙДЖІ ============================================================ */ .chip{ display:inline-flex;align-items:center;gap:6px; padding:4px 12px;border-radius:var(--r-chip); font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase; background:var(--accent-soft);color:var(--accent); } .chip svg.icon{width:13px;height:13px} .chip-success{background:var(--success-soft);color:#0E9F6E} .chip-warning{background:var(--warning-soft);color:#B45309} .chip-muted{background:#EAEDF5;color:var(--muted)} .chip-navy{background:var(--sidebar-bg);color:#fff} .chip-lg{padding:6px 14px;font-size:12px} .badge{ display:inline-flex;align-items:center;justify-content:center; min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-chip); font-size:11px;font-weight:700; background:var(--accent);color:#fff; } .badge-success{background:var(--success)} .badge-warning{background:var(--warning);color:var(--text)} /* ============================================================ ПРОГРЕС ============================================================ */ .progress-track{ height:8px;border-radius:var(--r-chip);background:#EAEDF5;overflow:hidden;margin-bottom:6px; } .progress-fill{height:100%;border-radius:var(--r-chip);background:var(--grad);transition:width .4s ease} .progress-fill.green{background:linear-gradient(135deg,#34D399,#6EE7B7)} .progress-label{font-size:12.5px;color:var(--muted)} .progress-label b{color:var(--text);font-weight:600} .progress-track.slim{height:5px} /* ============================================================ ТАБИ Розмітка: