/* ============================================================ Bukado — Особистий кабінет (обгортка) Розташування: catalog/view/theme/default/stylesheet/bukado-account.css Підключення: $this->document->addStyle('catalog/view/theme/default/stylesheet/bukado-account.css'); ------------------------------------------------------------ Тут ТІЛЬКИ каркас кабінету: фон, бічне меню, картка користувача, сітка «сайдбар + контент». Вміст кожного розділу — у своєму файлі. Картку товару (bukado-card.css) підключаємо ОКРЕМО там, де є книги. ============================================================ */ :root{ --bkd-bg:#f4f2ed; --bkd-green:#047a36; --bkd-green-dark:#083216; --bkd-green-soft:#e9f1ea; --bkd-gold:#b8953a; --bkd-red:#e8462d; --bkd-text:#1f1f1f; --bkd-muted:#8a8880; --bkd-line:#f2efe9; --bkd-border:#ece8e0; } /* ── ФІКСОВАНЕ ТЛО (не рухається при гортанні) ── Кладемо на через клас, який додає обгортка кабінету. */ body.bkd-account{ background:var(--bkd-bg); position:relative; } body.bkd-account::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(closest-side, rgba(4,122,54,.20), transparent) -6% 12% / 700px 700px no-repeat, radial-gradient(closest-side, rgba(184,149,58,.16), transparent) 104% 8% / 600px 600px no-repeat, radial-gradient(closest-side, rgba(8,50,22,.14), transparent) 102% 96% / 760px 760px no-repeat, radial-gradient(closest-side, rgba(4,122,54,.13), transparent) -4% 92% / 640px 640px no-repeat; filter:blur(40px); } /* На слабких мобільних blur важкий — послаблюємо */ @media(max-width:880px){ body.bkd-account::before{ filter:blur(30px); } } /* header і footer повинні бути над тлом */ body.bkd-account header, body.bkd-account footer{ position:relative; z-index:2; } /* ── КАРКАС СТОРІНКИ ── */ .bkd-acc{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:26px 24px 44px; display:grid; grid-template-columns:262px 1fr; gap:26px; align-items:start; } /* ── БІЧНА КОЛОНКА ── */ .bkd-side{ position:sticky; top:88px; } /* картка користувача — окрема, з видимими межами */ .bkd-user{ background:#fff; border:1px solid #d8e6da; border-radius:14px; padding:20px 16px 18px; text-align:center; margin-bottom:14px; box-shadow:0 2px 10px rgba(8,50,22,.05); cursor:pointer; } .bkd-user__avawrap{ position:relative; width:78px; height:78px; margin:0 auto 12px; } .bkd-user__ava{ width:78px; height:78px; border-radius:50%; background:var(--bkd-green-soft); border:2px solid #cfe2d2; display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-size:28px; color:var(--bkd-green); overflow:hidden; } .bkd-user__ava img{ width:100%; height:100%; object-fit:cover; } .bkd-user__cam{ position:absolute; right:-2px; bottom:-2px; width:26px; height:26px; border-radius:50%; padding:0; background:var(--bkd-green); border:2px solid #fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; cursor:pointer; transition:transform .12s, background .15s; } .bkd-user__cam:hover{ background:var(--bkd-green-dark); transform:scale(1.06); } .bkd-user__cam.is-busy{ opacity:.6; pointer-events:none; } .bkd-user:hover .bkd-user__ava{ border-color:var(--bkd-green); } .bkd-user__name{ font-family:Georgia,serif; font-size:16px; color:var(--bkd-green-dark); } .bkd-user__mail{ font-size:11.5px; color:var(--bkd-muted); margin-top:3px; word-break:break-all; } /* міні-меню фото (змінити / видалити) */ .bkd-avamenu{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px; background:#fff; border:1px solid #e4ded3; border-radius:12px; box-shadow:0 10px 26px rgba(8,50,22,.14); padding:6px; width:172px; z-index:20; } .bkd-avamenu button{ display:flex; align-items:center; gap:9px; width:100%; border:none; background:none; text-align:left; padding:9px 11px; border-radius:8px; font-size:13px; color:#2f2f2f; cursor:pointer; } .bkd-avamenu button:hover{ background:var(--bkd-green-soft); } .bkd-avamenu button.del{ color:var(--bkd-red); } .bkd-avamenu button.del:hover{ background:#fdecea; } .bkd-avamenu svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } /* тост */ .bukado-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:#083216; color:#fdfcfa; font-size:13.5px; font-weight:600; padding:12px 22px; border-radius:100px; box-shadow:0 8px 24px rgba(8,50,22,.25); opacity:0; transition:opacity .3s, transform .3s; z-index:9999; pointer-events:none; } .bukado-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } /* меню — без бежевих рамок */ .bkd-nav{ background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-radius:14px; padding:8px; } .bkd-nav__item{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border-radius:10px; font-size:13.5px; color:#4a4a4a; text-decoration:none; transition:box-shadow .18s, background .18s, color .18s; } .bkd-nav__item:hover{ box-shadow:0 2px 12px rgba(8,50,22,.10); color:var(--bkd-green-dark); text-decoration:none; } .bkd-nav__item.is-active{ background:var(--bkd-green); color:#fff; box-shadow:0 3px 14px rgba(4,122,54,.28); } .bkd-nav__item.is-active .bkd-nav__badge{ background:rgba(255,255,255,.24); color:#fff; } .bkd-nav__item i{ font-size:18px; flex-shrink:0; } .bkd-nav__badge{ margin-left:auto; background:#f0ece4; color:var(--bkd-muted); font-size:11px; padding:1px 8px; border-radius:100px; } .bkd-nav__sep{ height:1px; background:var(--bkd-line); margin:6px 10px; } .bkd-nav__item--out{ color:#a9a49a; } /* ── ОБЛАСТЬ КОНТЕНТУ ── */ .bkd-main{ min-width:0; } /* щоб довгі рядки не розпирали грід */ .bkd-h1{ font-family:Georgia,serif; font-size:26px; font-weight:400; color:var(--bkd-green-dark); margin:2px 0 6px; } .bkd-sub{ font-size:13px; color:var(--bkd-muted); margin:0 0 20px; } /* картка-контейнер розділу */ .bkd-box{ background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-radius:14px; padding:22px; margin-bottom:16px; transition:box-shadow .2s; } .bkd-box:hover{ box-shadow:0 4px 22px rgba(8,50,22,.10); } .bkd-box__t{ font-family:Georgia,serif; font-size:17px; color:var(--bkd-green-dark); margin:0 0 15px; font-weight:400; } /* порожній стан */ .bkd-empty{ text-align:center; padding:48px 16px; color:var(--bkd-muted); } .bkd-empty i{ font-size:46px; display:block; margin-bottom:12px; opacity:.3; } .bkd-empty__t{ font-family:Georgia,serif; font-size:18px; color:var(--bkd-green-dark); margin-bottom:6px; } /* ============================================================ МОБІЛЬНА (<880px): бічне меню ховається, з'являються нижня панель + вкладки-пігулки ============================================================ */ @media(max-width:880px){ .bkd-acc{ grid-template-columns:1fr; padding:16px 14px 90px; gap:0; } .bkd-side{ position:static; } /* картка користувача стає горизонтальною й завжди зверху */ .bkd-user{ display:flex; align-items:center; gap:13px; text-align:left; padding:15px; margin-bottom:14px; } .bkd-user__avawrap{ width:54px; height:54px; margin:0; flex-shrink:0; } .bkd-user__ava{ width:54px; height:54px; font-size:20px; } .bkd-user__cam{ width:21px; height:21px; font-size:10px; } /* рідне вертикальне меню ховаємо — його замінюють пігулки + нижня панель */ .bkd-nav{ display:none; } /* вкладки-пігулки розділів */ .bkd-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; } .bkd-tab{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.8); border-radius:100px; padding:11px 15px; font-size:13.5px; color:#5a5a5a; text-decoration:none; white-space:nowrap; transition:.15s; } .bkd-tab i{ font-size:16px; } .bkd-tab.is-active{ background:var(--bkd-green); color:#fff; box-shadow:0 3px 14px rgba(4,122,54,.28); } .bkd-tab:active{ transform:scale(.97); } /* нижня панель (глобальна навігація сайту) */ .bkd-bnav{ position:fixed; left:0; right:0; bottom:0; z-index:30; background:#fff; border-top:1px solid #e0d8cc; display:flex; padding:6px 4px calc(8px + env(safe-area-inset-bottom)); } .bkd-bnav a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; font-size:9.5px; color:#a9a49a; text-decoration:none; position:relative; } .bkd-bnav i{ font-size:21px; } .bkd-bnav a.is-active{ color:var(--bkd-green); } .bkd-bnav__dot{ position:absolute; top:3px; right:calc(50% - 17px); min-width:15px; height:15px; border-radius:100px; background:var(--bkd-red); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; } } /* на десктопі пігулки й нижня панель не потрібні */ @media(min-width:881px){ .bkd-tabs{ display:none; } .bkd-bnav{ display:none; } } /* ============================================================ Вхід / Реєстрація (сторінки login.twig, register.twig) Винесено сюди з inline-стилів, щоб ОБИДВІ сторінки бачили однаково. ============================================================ */ /* --- спільні (з входу) --- */ .bkd-auth{ position:relative; z-index:2; max-width:920px; margin:0 auto; padding:34px 24px 60px; } .bkd-auth__grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; } @media(max-width:760px){ .bkd-auth__grid{ grid-template-columns:1fr; } } .bkd-auth__card{ background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:none; border-radius:16px; padding:28px 26px; box-shadow:0 2px 14px rgba(8,50,22,.06); } .bkd-auth__card--soft{ background:var(--bkd-green-soft, #e9f1ea); } .bkd-auth__ic{ width:52px; height:52px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .bkd-auth__ic i{ font-size:26px; color:var(--bkd-green, #047a36); } .bkd-auth__t{ font-family:Georgia,serif; font-size:24px; font-weight:400; color:var(--bkd-green-dark, #083216); margin:0 0 6px; } .bkd-auth__d{ font-size:13px; color:var(--bkd-muted, #8a8880); margin:0 0 20px; line-height:1.5; } .bkd-field{ margin-bottom:16px; } .bkd-field label{ display:block; font-size:12px; color:var(--bkd-muted, #8a8880); margin-bottom:6px; } .bkd-field input{ width:100%; padding:11px 13px; border:1px solid #ddd8ce; border-radius:9px; font:inherit; font-size:14px; background:#fff; transition:border-color .15s, box-shadow .15s; } .bkd-field input:focus{ outline:none; border-color:var(--bkd-green, #047a36); box-shadow:0 0 0 3px rgba(4,122,54,.1); } .bkd-auth__forgot{ display:inline-block; margin-top:8px; font-size:12.5px; color:var(--bkd-green, #047a36); text-decoration:none; } .bkd-auth__forgot:hover{ text-decoration:underline; } .bkd-btn{ display:block; width:100%; text-align:center; padding:12px 20px; border-radius:100px; font:inherit; font-size:14px; cursor:pointer; border:none; text-decoration:none; transition:.18s; } .bkd-btn--fill{ background:var(--bkd-green, #047a36); color:#fff; margin-top:4px; } .bkd-btn--fill:hover{ background:var(--bkd-green-dark, #083216); } .bkd-btn--out{ background:#fff; border:1px solid var(--bkd-green, #047a36); color:var(--bkd-green, #047a36); } .bkd-btn--out:hover{ background:var(--bkd-green, #047a36); color:#fff; } .bkd-auth__or{ text-align:center; font-size:11.5px; color:#a9a49a; margin:18px 0 12px; } .bkd-soc{ display:flex; gap:9px; } .bkd-soc__b{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; border:1px solid #ddd8ce; background:#fff; border-radius:100px; font:inherit; font-size:13px; color:#5a5a5a; text-decoration:none; transition:.15s; } .bkd-soc__b:hover{ border-color:var(--bkd-green, #047a36); box-shadow:0 2px 10px rgba(8,50,22,.08); } .bkd-soc__b svg{ width:18px; height:18px; } .bkd-auth__perks{ list-style:none; padding:0; margin:0 0 22px; } .bkd-auth__perks li{ display:flex; align-items:center; gap:10px; font-size:13px; color:#4a4a4a; padding:7px 0; } .bkd-auth__perks i{ font-size:18px; color:var(--bkd-green, #047a36); flex-shrink:0; } .bkd-auth__alert{ display:flex; align-items:center; gap:9px; border-radius:11px; padding:12px 15px; margin-bottom:18px; font-size:13.5px; } .bkd-auth__alert i{ font-size:18px; } .bkd-auth__alert--ok{ background:var(--bkd-green-soft, #e9f1ea); color:var(--bkd-green, #047a36); } .bkd-auth__alert--err{ background:#fdf0ee; color:var(--bkd-red, #e8462d); } /* --- додаткові (з реєстрації) --- */ .bkd-auth--single{ max-width:520px; } .bkd-auth__card--wide{ padding:30px 28px; } .bkd-agree{ display:flex; align-items:flex-start; gap:9px; margin:6px 0 18px; font-size:12.5px; color:#5a5a5a; line-height:1.5; cursor:pointer; } .bkd-agree input{ margin-top:2px; flex-shrink:0; accent-color:var(--bkd-green, #047a36); } .bkd-agree a{ color:var(--bkd-green, #047a36); } .bkd-field__err{ color:var(--bkd-red, #e8462d); font-size:11.5px; margin-top:5px; } .bkd-field select{ width:100%; padding:11px 13px; border:1px solid #ddd8ce; border-radius:9px; font:inherit; font-size:14px; background:#fff; } .bkd-field select:focus{ outline:none; border-color:var(--bkd-green, #047a36); } .bkd-auth__foot{ text-align:center; font-size:13px; color:var(--bkd-muted, #8a8880); margin-top:18px; } .bkd-auth__foot a{ color:var(--bkd-green, #047a36); text-decoration:none; font-weight:600; } .bkd-auth__foot a:hover{ text-decoration:underline; } /* реєстрація — одна колонка по центру */ .bkd-auth--single{ max-width:520px; } .bkd-auth__card--wide{ padding:30px 28px; }