/* ============================================================ English to Go World — основні компоненти. Усі значення — з design-tokens.css (var(--...)), без хардкоду. ============================================================ */ @import url('design-tokens.css'); * { box-sizing: border-box; } /* Тон фону за часом доби (узгоджено з картою): вдень прозоро, увечері тепло, вночі — глибокий синій. Ставиться через data-daypart на (header.php). */ /* Фон сайту живе на (увесь viewport, фіксований — не рухається при скролі): приглушена «пергаментна» мапа світу майже на весь екран (як на сторінці карти), + теплий градієнт зверху + тон часу доби (--daytint) + cream-база. */ html { --daytint: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); scroll-behavior: smooth; background: var(--daytint), radial-gradient(1300px 560px at 50% -240px, rgba(255,255,255,0.30), transparent 70%), url('/assets/world-map-bg.svg'), var(--color-bg); background-position: center, center top, center 46%, center; background-size: cover, auto, min(1400px, 92vw) auto, auto; background-repeat: no-repeat, no-repeat, no-repeat, repeat; background-attachment: fixed; transition: background-color var(--dur) var(--ease); } html[data-daypart="dawn"] { --daytint: linear-gradient(180deg, rgba(255, 196, 110, 0.13), rgba(255, 150, 100, 0.07)); } html[data-daypart="dusk"] { --daytint: linear-gradient(180deg, rgba(235, 130, 70, 0.16), rgba(120, 80, 130, 0.12)); } html[data-daypart="night"] { --daytint: linear-gradient(180deg, rgba(18, 38, 72, 0.40), rgba(18, 38, 72, 0.26)); } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); background: transparent; /* фон тепер на */ max-width: var(--w-wide); margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-8); -webkit-font-smoothing: antialiased; animation: page-fade var(--dur) var(--ease) both; } /* Лише прозорість (без transform), бо transform на body ламає position:fixed фону. */ @keyframes page-fade { from { opacity: 0; } to { opacity: 1; } } /* Фон країни на сторінці уроку — повноекранний фіксований шар (на весь viewport, не розтягується й без бічних полос, бо не привʼязаний до колонки body). */ body.country-bg::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--country-bg) center / cover no-repeat; } @media (max-width: 768px) { /* Мобільна версія фону (fixed-шар працює нормально для псевдоелемента). */ body.country-bg::before { background-image: var(--country-bg-mobile); } } h1, h2, h3 { font-family: var(--font-head); color: var(--color-text); line-height: var(--lh-tight); font-weight: 600; } h1 { font-size: var(--fs-h1); margin: 0 0 var(--space-4); letter-spacing: -0.015em; } h2 { font-size: var(--fs-h2); margin: var(--space-6) 0 var(--space-4); } h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-3); } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-600); } code, .mono { font-family: var(--font-mono); } /* ============================================================ ШАПКА ============================================================ */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; background: rgba(255,255,255,0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5); margin-bottom: var(--space-6); position: sticky; top: var(--space-3); z-index: 100; } .brand { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; color: var(--color-text); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .brand .globe { display: inline-flex; align-items: center; color: var(--color-primary); transition: transform .5s var(--ease); } .brand:hover { color: var(--color-text); } .brand:hover .globe { transform: rotate(28deg) scale(1.12); } .nav-links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; font-size: var(--fs-small); } .nav-links .greet { color: var(--color-text-muted); margin-right: var(--space-2); } .nav-links a { color: var(--color-text); text-decoration: none; padding: 8px 13px; border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } .nav-links a:hover { background: var(--color-primary-050); color: var(--color-primary-600); } .nav-links a.cta { background: var(--color-primary); color: #fff; } .nav-links a.cta:hover { background: var(--color-primary-600); color: #fff; } .nav-links [data-lucide] { width: 17px; height: 17px; } /* Панель адмінки */ .auth-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; background: rgba(255,255,255,0.78); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5); margin-bottom: var(--space-5); font-size: var(--fs-small); color: var(--color-text-muted); } .auth-bar a { color: var(--color-primary); font-weight: 600; } /* ============================================================ ФУТЕР ============================================================ */ .site-footer { margin-top: var(--space-8); padding: var(--space-4) var(--space-5); /* Скляна плашка, щоб текст читався на фоновому фото (як у шапці) */ background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--fs-small); } .site-footer a { color: var(--color-primary); } .site-footer .footer-links { display: flex; gap: var(--space-4); flex-wrap: wrap; } /* ============================================================ СВЯТКОВИЙ ФІНІШ УРОКУ + КОНФЕТІ ============================================================ */ .confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 1100; } .finish-overlay { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(20, 40, 52, 0.45); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--dur) var(--ease); } .finish-overlay.show { opacity: 1; } .finish-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6); max-width: 420px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); transform: translateY(16px) scale(0.96); transition: transform var(--dur) var(--ease); } .finish-overlay.show .finish-card { transform: none; } .finish-stamp { width: 96px; height: 96px; margin: 0 auto var(--space-4); border: 3px dashed var(--color-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; background: var(--color-secondary-100); transform: rotate(-6deg); animation: stamp-pop .5s var(--ease) both; } @keyframes stamp-pop { 0% { transform: rotate(-6deg) scale(0); } 60% { transform: rotate(-6deg) scale(1.15); } 100% { transform: rotate(-6deg) scale(1); } } /* Штамп паспорта: «прилітає» згори і бахкає об картку */ .passport-stamp { --ink: var(--color-secondary-700, #b06112); width: 148px; height: 148px; margin: 0 auto var(--space-4); border: 3.5px solid var(--ink); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; color: var(--ink); transform: rotate(-8deg); box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 5px transparent; animation: stamp-slam .55s cubic-bezier(0.22, 1.6, 0.36, 1) both; animation-delay: .25s; /* нерівномірність чорнила справжнього штампа */ -webkit-mask-image: radial-gradient(circle at 32% 28%, black 56%, rgba(0,0,0,0.82) 78%, rgba(0,0,0,0.62) 100%); mask-image: radial-gradient(circle at 32% 28%, black 56%, rgba(0,0,0,0.82) 78%, rgba(0,0,0,0.62) 100%); } .passport-stamp::before { content: ""; position: absolute; inset: 7px; border: 1.5px dashed var(--ink); border-radius: 50%; } .ps-arrival { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; max-width: 110px; text-align: center; } .ps-flag { font-size: 1.9rem; line-height: 1.15; } .ps-country { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; max-width: 116px; text-align: center; line-height: 1.15; } .ps-date { font-family: var(--font-mono); font-size: 11px; font-weight: 600; opacity: 0.9; } @keyframes stamp-slam { 0% { opacity: 0; transform: rotate(-24deg) scale(2.6); filter: blur(2px); } 65% { opacity: 1; transform: rotate(-8deg) scale(0.94); filter: blur(0); } 80% { transform: rotate(-8deg) scale(1.04); } 100% { opacity: 1; transform: rotate(-8deg) scale(1); } } /* Струс картки від удару штампа */ .finish-card.stamp-shake { animation: card-shake .4s linear both; } @keyframes card-shake { 0% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(-3px, 2px) rotate(-0.5deg); } 40% { transform: translate(3px, -2px) rotate(0.4deg); } 60% { transform: translate(-2px, 1px) rotate(-0.3deg); } 80% { transform: translate(1px, -1px) rotate(0.2deg); } 100% { transform: translate(0, 0) rotate(0); } } @media (prefers-reduced-motion: reduce) { .passport-stamp { animation: none; } .finish-card.stamp-shake { animation: none; } } .finish-card h2 { margin: 0 0 var(--space-2); font-size: 1.6rem; } .finish-sub { margin: 0 0 var(--space-5); color: var(--color-text-muted); } .finish-stats { display: flex; justify-content: center; gap: var(--space-6); margin-bottom: var(--space-6); } .finish-stat { display: flex; flex-direction: column; gap: 2px; } .fs-num { font-family: var(--font-head); font-weight: 600; font-size: 1.8rem; color: var(--color-primary); } .fs-lbl { font-size: var(--fs-xs); color: var(--color-text-muted); } .finish-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } /* ============================================================ ОНБОРДИНГ (привітальний міні-тур) ============================================================ */ .onb-overlay { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(20, 40, 52, 0.45); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--dur) var(--ease); } .onb-overlay.show { opacity: 1; } .onb-card { position: relative; background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6) var(--space-6); max-width: 420px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); transform: translateY(16px) scale(0.96); transition: transform var(--dur) var(--ease); } .onb-overlay.show .onb-card { transform: none; } .onb-skip { position: absolute; top: var(--space-3); right: var(--space-4); border: 0; background: none; cursor: pointer; color: var(--color-text-muted); font: inherit; font-size: var(--fs-small); } .onb-skip:hover { color: var(--color-text); } .onb-emoji { width: 88px; height: 88px; margin: 0 auto var(--space-4); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; background: var(--color-primary-050); border-radius: 50%; animation: stamp-pop .45s var(--ease) both; } .onb-card h2 { margin: 0 0 var(--space-2); font-size: 1.45rem; } .onb-text { margin: 0 auto var(--space-5); color: var(--color-text-muted); max-width: 320px; } .onb-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: var(--space-5); } .onb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); transition: var(--transition); } .onb-dot.active { background: var(--color-primary); width: 22px; border-radius: var(--radius-pill); } .onb-next { width: 100%; justify-content: center; font-size: 1rem; } /* ============================================================ ПРОГРЕС ПРОКРУТКИ — ПУНКТИРНИЙ МАРШРУТ З ЛІТАЧКОМ ============================================================ */ .scroll-progress { position: fixed; top: 0; left: 0; height: 4px; width: 0; /* пунктир маршруту замість суцільної лінії */ background: repeating-linear-gradient(90deg, var(--color-primary) 0 10px, transparent 10px 17px); z-index: 200; transition: width 80ms linear; } .scroll-progress::after { content: ""; position: absolute; right: -8px; top: -8px; width: 20px; height: 16px; background: url('data:image/svg+xml;utf8,') center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); } /* ============================================================ ПОСАДКОВИЙ ТАЛОН УРОКУ ============================================================ */ .boarding-pass { display: flex; margin: 0 0 var(--space-6); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-surface); border: 1px solid var(--color-border); position: relative; } .bp-main { flex: 1 1 auto; padding: var(--space-4) var(--space-5); min-width: 0; } .bp-head { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; border-bottom: 1.5px dashed var(--color-border-strong); padding-bottom: var(--space-2); margin-bottom: var(--space-3); } .bp-brand { font-weight: 700; color: var(--color-primary); font-size: var(--fs-small); letter-spacing: 0.04em; } .bp-label { font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: 0.12em; font-weight: 600; } .bp-route { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); } .bp-point { display: flex; flex-direction: column; min-width: 70px; } .bp-point-to { text-align: right; align-items: flex-end; } .bp-code { font-family: var(--font-mono); font-weight: 700; font-size: 1.3rem; white-space: nowrap; } .bp-city { font-size: var(--fs-xs); color: var(--color-text-muted); } .bp-plane-path { flex: 1; position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--color-border-strong) 0 8px, transparent 8px 14px); } .bp-plane { position: absolute; top: 50%; left: 0; transform: translate(-50%, -54%); color: var(--color-secondary); font-size: 1.15rem; animation: bp-fly 6s ease-in-out infinite; } @keyframes bp-fly { 0% { left: 6%; } 50% { left: 94%; } 100% { left: 6%; } } @media (prefers-reduced-motion: reduce) { .bp-plane { animation: none; left: 50%; } } .bp-fields { display: flex; gap: var(--space-5); flex-wrap: wrap; } .bp-field { display: flex; flex-direction: column; gap: 1px; } .bp-k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); font-weight: 600; } .bp-v { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-small); } /* Корінець квитка з перфорацією */ .bp-stub { flex: 0 0 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: var(--space-3); background: var(--color-secondary-100, #fdf0e2); border-left: 2px dashed var(--color-border-strong); position: relative; } /* «Вирізи» перфорації зверху і знизу */ .bp-stub::before, .bp-stub::after { content: ""; position: absolute; left: -9px; width: 16px; height: 16px; background: var(--color-bg); border-radius: 50%; border: 1px solid var(--color-border); } .bp-stub::before { top: -9px; } .bp-stub::after { bottom: -9px; } .bp-stub-label { font-size: var(--fs-xs); letter-spacing: 0.18em; color: var(--color-text-muted); font-weight: 700; } .bp-stub-big { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; color: var(--color-secondary-700, #b06112); } .bp-barcode { width: 72px; height: 26px; margin-top: 4px; background: repeating-linear-gradient(90deg, var(--color-text) 0 2px, transparent 2px 4px, var(--color-text) 4px 5px, transparent 5px 9px, var(--color-text) 9px 12px, transparent 12px 14px); opacity: 0.75; } @media (max-width: 560px) { .bp-stub { display: none; } .bp-fields { gap: var(--space-3) var(--space-4); } } /* ============================================================ БЛОК-ІНТРО (заголовок над картою) ============================================================ */ .page-intro { margin-bottom: var(--space-5); max-width: var(--w-article); } .page-intro h1 { margin-bottom: var(--space-2); } .page-intro p { margin: 0; color: var(--color-text-muted); font-size: 1.1rem; } /* ============================================================ КНОПКИ ============================================================ */ .btn-primary, .btn-secondary, .btn-danger { font: inherit; font-weight: 600; font-size: var(--fs-small); padding: 11px 20px; border-radius: var(--radius-sm); cursor: pointer; border: 1.5px solid transparent; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition); } .btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-primary-600); color: #fff; transform: translateY(-1px); } .btn-primary:disabled { background: var(--color-border-strong); color: #fff; cursor: default; transform: none; } .btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); } .btn-secondary:hover { border-color: var(--color-primary); transform: translateY(-1px); } .btn-danger { background: var(--color-surface); color: var(--color-error); border-color: var(--color-error-100); } .btn-danger:hover { background: var(--color-error-100); } /* ============================================================ КАРТКИ УРОКІВ (єдині скрізь: каталог, панель карти, дешборд) ============================================================ */ .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); } .lesson-card { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0; text-decoration: none; color: inherit; overflow: hidden; box-shadow: var(--shadow-card); transition: var(--transition); } .lesson-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .lesson-card:hover .cover-emoji { transform: scale(1.12) rotate(-6deg); } .card-cover { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-primary-100); } .card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-cover-gen::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 22% 24%, rgba(255,255,255,0.28), transparent 42%), radial-gradient(circle at 80% 78%, rgba(255,255,255,0.18), transparent 46%); } .cover-emoji { position: relative; z-index: 1; font-size: 3.4rem; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2)); transition: transform var(--dur) var(--ease); } .card-body { padding: var(--space-4); } .card-country { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: 600; margin: 0 0 var(--space-2); } .card-body h3 { margin: 0 0 var(--space-3); font-size: 1.2rem; } .card-meta { display: flex; gap: var(--space-2); margin: 0; flex-wrap: wrap; align-items: center; } .card-level { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; background: var(--color-secondary-100); color: var(--color-secondary-700); padding: 3px 9px; border-radius: var(--radius-sm); } .card-topic { background: var(--color-primary-050); color: var(--color-primary-600); padding: 3px 12px; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--fs-xs); } .card-grammar { font-size: var(--fs-small); color: var(--color-text-muted); font-style: italic; margin: var(--space-2) 0 0; } .card-progress { display: inline-block; margin-top: var(--space-3); font-size: var(--fs-xs); font-weight: 600; color: var(--color-primary-600); background: var(--color-primary-050); padding: 3px 12px; border-radius: var(--radius-pill); } .card-progress.completed { color: var(--color-success-700); background: var(--color-success-100); } .catalog-empty, .vocab-empty { color: var(--color-text-muted); background: var(--color-surface); border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-6); text-align: center; font-weight: 500; } /* Порожні стани з ілюстрацією */ .empty-state { text-align: center; padding: var(--space-7) var(--space-5); background: var(--color-surface); border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-lg); max-width: 460px; margin: 0 auto; } .empty-illu { width: 112px; height: 112px; margin: 0 auto var(--space-4); display: flex; align-items: center; justify-content: center; color: var(--color-primary); background: var(--color-primary-050); border-radius: 50%; } .empty-state h3 { margin: 0 0 var(--space-2); } .empty-state p { margin: 0 auto var(--space-4); color: var(--color-text-muted); max-width: 340px; } .empty-cta { margin-top: var(--space-2); } /* ============================================================ УРОК — читання (контент звужено до --w-article) ============================================================ */ /* Єдиний центрований контейнер уроку — щоб усе (hero, прогрес, блоки, бейджі) було однакової ширини й вирівняне по центру. */ .lesson-wrap { max-width: var(--w-article); margin: 0 auto; } /* Усе всередині — на повну ширину контейнера, ідеально вирівняне */ .lesson-wrap .lesson-hero, .lesson-wrap .lesson-header, .lesson-wrap .lesson-progress, .lesson-wrap .block, .lesson-wrap .ex-result-bar { max-width: none; margin-left: 0; margin-right: 0; } .back-link { margin: 0 0 var(--space-4); font-size: var(--fs-small); } .back-link a { /* Скляна плашка-пігулка, щоб посилання читалось на фоні країни */ display: inline-flex; align-items: center; gap: 4px; color: var(--color-primary); font-weight: 600; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 6px 14px; box-shadow: var(--shadow-sm); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .back-link a:hover { color: var(--color-primary-600); background: rgba(255, 255, 255, 0.95); } .lesson-hero { max-width: var(--w-article); margin: 0 auto var(--space-6); border-radius: var(--radius-lg); overflow: hidden; position: relative; background: var(--color-primary); color: #fff; box-shadow: var(--shadow-card); min-height: 220px; display: flex; align-items: flex-end; } .lesson-hero .lesson-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; } .lesson-hero .lesson-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,40,52,0.05) 0%, rgba(15,40,52,0.78) 100%); } .lesson-hero .lesson-hero-content { position: relative; padding: var(--space-6); } /* Адмін: перетягування фону обкладинки */ .hero-admin { position: absolute; top: 12px; right: 12px; z-index: 5; display: flex; gap: 8px; align-items: center; } .hero-admin-edit { display: flex; gap: 8px; align-items: center; } .hero-admin-btn { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; background: rgba(255,255,255,0.92); color: #3a2230; border: 1px solid rgba(106,46,90,0.3); border-radius: 9px; padding: 6px 11px; backdrop-filter: blur(4px); box-shadow: 0 1px 6px rgba(0,0,0,0.25); } .hero-admin-btn:hover { background: #fff; } .hero-admin-save { background: #2E7D5B; color: #fff; border-color: #2E7D5B; } .hero-admin-save:hover { background: #27694c; } .hero-admin-hint { font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.45); padding: 5px 10px; border-radius: 8px; white-space: nowrap; } .lesson-hero.hero-editing { cursor: move; } .lesson-hero.hero-editing .lesson-hero-bg { cursor: move; } .lesson-hero.hero-editing .lesson-hero-content, .lesson-hero.hero-editing .lesson-hero-overlay { pointer-events: none; } .lesson-hero.hero-editing .hero-admin { pointer-events: auto; } .lesson-hero.hero-editing::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.7); border-radius: inherit; } .lesson-hero h1 { color: #fff; margin: 0 0 var(--space-2); text-shadow: 0 2px 16px rgba(0,0,0,0.3); font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); } .lesson-hero .meta { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } .lesson-hero .meta span { display: inline-flex; align-items: center; gap: 5px; line-height: 1; height: 30px; box-sizing: border-box; white-space: nowrap; background: rgba(255,255,255,0.18); backdrop-filter: blur(4px); color: #fff; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--fs-small); } .lesson-hero .meta .meta-flag { height: auto; background: none; padding: 0; font-size: 1em; } .lesson-hero .meta .meta-level { font-family: var(--font-mono); } /* Граматика — клікабельний чип, веде в довідник на потрібну тему */ .lesson-hero .meta .meta-grammar { display: inline-flex; align-items: center; gap: 6px; line-height: 1; height: 30px; box-sizing: border-box; white-space: nowrap; background: rgba(255,255,255,0.18); backdrop-filter: blur(4px); color: #fff; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--fs-small); text-decoration: none; transition: background var(--dur-fast) var(--ease); } .lesson-hero .meta .meta-grammar:hover { background: rgba(255,255,255,0.34); } .lesson-hero .meta .meta-grammar .mg-arrow { opacity: 0.8; font-weight: 700; } /* «Живий» чип у hero — непрозорий, щоб читався на будь-якому фото */ .lesson-hero .live-chip { margin: var(--space-3) 0 0; background: var(--color-surface); border-color: transparent; box-shadow: var(--shadow-card); } /* Запасна шапка уроку (без обкладинки) */ .lesson-header { max-width: var(--w-article); margin: 0 auto var(--space-5); } .lesson-header .meta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); } .lesson-header .meta span { background: var(--color-surface); border: 1px solid var(--color-border); padding: 4px 14px; border-radius: var(--radius-pill); font-size: var(--fs-small); color: var(--color-text-muted); box-shadow: var(--shadow-sm); } .video-wrap { position: relative; padding-top: 56.25%; border-radius: var(--radius-md); overflow: hidden; } .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } figure { margin: 0; } figure img { max-width: 100%; display: block; border-radius: var(--radius-md); } figcaption { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-2); } .block-image figcaption { font-family: var(--font-head); font-style: italic; } /* ============================================================ СЛОВНИК (картки-листівки) ============================================================ */ .vocab-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .vocab-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm); border-left: 4px solid var(--color-primary); } .vocab-main { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); } .word { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; } .translation { color: var(--color-text-muted); } .example { margin: var(--space-2) 0 var(--space-3); color: var(--color-text-muted); font-style: italic; } .add-word-btn { background: transparent; border: 1.5px solid var(--color-primary); border-radius: var(--radius-pill); padding: 6px 14px; font: inherit; font-weight: 600; font-size: var(--fs-small); color: var(--color-primary); cursor: pointer; transition: var(--transition); } .add-word-btn:hover:not(:disabled) { background: var(--color-primary-050); transform: translateY(-1px); } .add-word-btn.added { color: var(--color-success-700); border-color: var(--color-success); background: var(--color-success-100); cursor: default; } .add-word-hint { display: inline-block; margin-left: var(--space-3); font-size: var(--fs-small); color: var(--color-error); } /* === Словник уроку — варіант A (плаский список) === */ .block-vocabulary .vocab-list { gap: 0; } .block-vocabulary .vocab-card { background: none; border: 0; border-radius: 0; box-shadow: none; border-bottom: 1.5px solid #EFE6D4; padding: var(--space-4) 0; } .block-vocabulary .vocab-card:first-child { padding-top: var(--space-2); } .block-vocabulary .vocab-card:last-child { border-bottom: 0; padding-bottom: 0; } .block-vocabulary .vocab-main { align-items: baseline; } .block-vocabulary .word { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: #2C3542; display: inline-flex; align-items: center; gap: 8px; } .block-vocabulary .translation { color: #6A7280; font-size: 15px; text-align: right; } .block-vocabulary .example { margin: 6px 0 10px; font-family: var(--font-head); font-style: italic; font-size: 15px; color: #8A8170; } .block-vocabulary .speak-btn { color: #6A7280; opacity: 0.9; margin: 0; padding: 0; display: inline-flex; } .block-vocabulary .speak-btn:hover { opacity: 1; color: #6A2E5A; } /* Чип «+ у словник» / «✓ у словнику» */ .block-vocabulary .add-word-btn { border: 0; background: rgba(106, 46, 90, 0.08); color: #6A2E5A; border-radius: var(--radius-pill); padding: 5px 14px; font-weight: 600; font-size: 13px; } .block-vocabulary .add-word-btn:hover:not(:disabled) { background: rgba(106, 46, 90, 0.15); transform: none; } .block-vocabulary .add-word-btn.added { background: #E7F1EB; border: 1.3px solid #A6CDB6; color: #2E7D5B; padding: 4px 13px; } /* Кнопка озвучення слова 🔊 */ .speak-btn { border: 0; background: transparent; cursor: pointer; font-size: 0.85em; line-height: 1; padding: 2px 4px; margin-left: 4px; border-radius: var(--radius-sm); opacity: 0.65; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); vertical-align: middle; } .speak-btn:hover { opacity: 1; transform: scale(1.18); } .speak-btn.speaking { animation: speak-pulse .6s var(--ease); } @keyframes speak-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } } /* Велика кнопка озвучення на флешкартці */ .speak-fab { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--color-border); background: var(--color-surface); font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition); } .speak-fab:hover { border-color: var(--color-primary); transform: scale(1.08); } /* Шапка словника з кнопкою тренування */ .vocab-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .btn-train { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; text-decoration: none; padding: 12px 22px; border-radius: var(--radius-pill); color: #fff; background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-600)); box-shadow: 0 6px 18px -4px var(--color-secondary); transition: var(--transition); } .btn-train:hover { transform: translateY(-2px); filter: brightness(1.05); color: #fff; } .btn-train [data-lucide] { width: 20px; height: 20px; } .activity-score { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); background: var(--color-bg-warm); padding: 2px 10px; border-radius: var(--radius-pill); } /* Сторінка "Мій словник" */ .my-vocab .vocab-card { border-left-width: 4px; } .my-vocab .vocab-card[data-status="learning"] { border-left-color: var(--color-secondary); } .my-vocab .vocab-card[data-status="learned"] { border-left-color: var(--color-success); } .vocab-meta { font-size: var(--fs-xs); color: var(--color-text-muted); margin: var(--space-2) 0; } .vocab-meta code { background: var(--color-primary-050); padding: 1px 6px; border-radius: var(--radius-sm); } .vocab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .vocab-actions button { font: inherit; font-weight: 600; font-size: var(--fs-small); padding: 6px 13px; border: 1.5px solid var(--color-border-strong); background: var(--color-surface); border-radius: var(--radius-pill); cursor: pointer; transition: var(--transition); } .vocab-actions button:hover:not(:disabled) { border-color: var(--color-primary); } .status-badge { margin-left: auto; font-size: var(--fs-xs); padding: 3px 12px; border-radius: var(--radius-pill); font-weight: 600; } .status-learning { background: var(--color-secondary-100); color: var(--color-secondary-700); } .status-learned { background: var(--color-success-100); color: var(--color-success-700); } /* ============================================================ ФІЛЬТРИ (каталог/карта) ============================================================ */ .filter-group { display: flex; flex-direction: column; gap: var(--space-2); min-width: 180px; } .filter-label { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } .filter-options { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: var(--fs-small); } .filter-options label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } input[type="search"], #filter-search { font: inherit; padding: 10px 14px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); min-width: 240px; transition: border-color var(--dur-fast) var(--ease); } #filter-search:focus { outline: none; border-color: var(--color-primary); } .filter-reset { align-self: flex-end; font: inherit; font-weight: 600; font-size: var(--fs-small); padding: 9px 16px; background: var(--color-surface); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-pill); cursor: pointer; color: var(--color-text-muted); transition: var(--transition); } .filter-reset:hover { border-color: var(--color-primary); color: var(--color-primary); } /* ============================================================ ФОРМИ (вхід/реєстрація) ============================================================ */ .auth-wrap { max-width: 400px; margin: var(--space-7) auto 0; } .auth-form { display: flex; flex-direction: column; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); } .auth-form label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-small); color: var(--color-text-muted); font-weight: 600; } .auth-form input { font: inherit; padding: 12px 14px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); transition: border-color var(--dur-fast) var(--ease); } .auth-form input:focus { outline: none; border-color: var(--color-primary); } .auth-form button { font: inherit; font-weight: 600; padding: 13px 18px; width: 100%; background: var(--color-primary); color: #fff; border: 0; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); font-size: 1rem; } .auth-form button:hover { background: var(--color-primary-600); transform: translateY(-1px); } .form-errors { background: var(--color-error-100); border: 1px solid var(--color-error); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: var(--space-4); max-width: 400px; } .form-errors p { margin: 4px 0; color: var(--color-error); font-weight: 600; } .auth-switch { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--color-text-muted); text-align: center; } .auth-switch a { color: var(--color-primary); font-weight: 600; } /* ============================================================ АДМІНКА (та сама система, без travel-декору) ============================================================ */ .admin-flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: var(--space-4); font-weight: 600; } .admin-flash.ok { background: var(--color-success-100); border: 1px solid var(--color-success); color: var(--color-success-700); } .admin-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .admin-table th, .admin-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--color-border); font-size: var(--fs-small); } .admin-table th { background: var(--color-bg-warm); color: var(--color-text); font-family: var(--font-head); font-weight: 600; } .admin-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; } .admin-actions a { color: var(--color-primary); text-decoration: none; font-weight: 600; } .inline-form { display: inline; margin: 0; } .admin-form { display: flex; flex-direction: column; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); max-width: 780px; box-shadow: var(--shadow-sm); } .admin-form label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-small); color: var(--color-text-muted); font-weight: 600; } .admin-form input[type=text], .admin-form select, .admin-form textarea { font: inherit; padding: 10px 13px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); transition: border-color var(--dur-fast) var(--ease); } .admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { outline: none; border-color: var(--color-primary); } .admin-form input[readonly] { background: var(--color-bg-warm); color: var(--color-text-muted); } .admin-form textarea { font-family: var(--font-mono); font-size: var(--fs-small); resize: vertical; } .form-row { display: flex; gap: var(--space-4); flex-wrap: wrap; } .form-row label { flex: 1; min-width: 140px; } .form-hint { font-size: var(--fs-small); color: var(--color-text-muted); max-width: 780px; } .form-hint code, .admin-table code { background: var(--color-primary-050); padding: 1px 6px; border-radius: var(--radius-sm); } .status-good { color: var(--color-success-700); font-weight: 700; } .status-bad { color: var(--color-error); font-weight: 700; } .bg-missing { color: var(--color-text-muted); } .cover-preview-row { display: flex; align-items: center; gap: var(--space-3); margin-top: -6px; } .cover-preview { max-width: 160px; max-height: 100px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); object-fit: cover; } .field-flash { animation: field-flash-anim 1.5s var(--ease); } @keyframes field-flash-anim { 0% { background: var(--color-secondary-100); border-color: var(--color-secondary); } 100% { background: var(--color-surface); border-color: var(--color-border-strong); } } .upload-box { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); max-width: 780px; box-shadow: var(--shadow-sm); } .uploaded-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; max-width: 780px; } .uploaded-list li { display: flex; gap: var(--space-3); align-items: center; padding: 6px 0; flex-wrap: wrap; } /* ============================================================ ДЕШБОРД ============================================================ */ .dash-hero { margin-bottom: var(--space-6); } .streak { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 600; background: var(--color-secondary-100); color: var(--color-secondary-700); padding: 6px 16px; border-radius: var(--radius-pill); } .streak-off { background: var(--color-bg-warm); color: var(--color-text-muted); font-family: var(--font-body); } .dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .dash-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-card); position: relative; overflow: hidden; } .dash-card::before { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--color-primary); opacity: 0.08; } .dash-card h2 { margin: 0 0 var(--space-2); font-size: 1.1rem; } .dash-big { font-size: 2.8rem; font-weight: 600; font-family: var(--font-head); color: var(--color-primary); margin: 0; line-height: 1; } .dash-of { font-size: 1.1rem; font-weight: 500; color: var(--color-text-muted); } .dash-label { margin: var(--space-1) 0 var(--space-4); color: var(--color-text-muted); font-size: var(--fs-small); } .dash-bar { height: 10px; background: var(--color-bg-warm); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: var(--space-4); } .dash-bar-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); transition: width .6s var(--ease); } .dash-mini { list-style: none; padding: 0; margin: 0 0 var(--space-4); font-size: var(--fs-small); color: var(--color-text-muted); display: flex; flex-direction: column; gap: 4px; } .dash-link { color: var(--color-primary); text-decoration: none; font-weight: 600; } .dash-link:hover { text-decoration: underline; } /* Подорожі — «штампи у паспорті» */ .passport-section { margin-bottom: var(--space-6); } .passport-grid { display: flex; flex-wrap: wrap; gap: var(--space-5); } .stamp { text-align: center; width: 120px; position: relative; } .stamp-circle { width: 92px; height: 92px; margin: 0 auto var(--space-2); border: 2.5px dashed var(--color-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; background: var(--color-secondary-100); transform: rotate(-6deg); transition: var(--transition); } .stamp:hover .stamp-circle { transform: rotate(0) scale(1.05); } /* «Впечатування» штампа */ .stamp-circle.stamp-in { animation: stamp-press .5s var(--ease) both; } @keyframes stamp-press { 0% { transform: rotate(-20deg) scale(2.4); opacity: 0; } 55% { transform: rotate(-6deg) scale(0.86); opacity: 1; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } } /* Свіжа країна */ .stamp.is-new .stamp-circle { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-100); } .stamp-ribbon { position: absolute; top: -6px; right: 4px; background: var(--color-error); color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); transform: rotate(8deg); box-shadow: var(--shadow-sm); animation: ribbon-pop .4s var(--ease) .35s both; } @keyframes ribbon-pop { 0% { transform: rotate(8deg) scale(0); } 100% { transform: rotate(8deg) scale(1); } } .stamp-name { font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; } .stamp-count { font-size: var(--fs-xs); color: var(--color-text-muted); font-family: var(--font-mono); } /* Останні слова — горизонтальна стрічка */ .word-strip { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-3); scroll-snap-type: x mandatory; } .word-strip .word-mini { flex: 0 0 auto; scroll-snap-align: start; min-width: 160px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-sm); } .word-mini .w { font-family: var(--font-head); font-weight: 600; } .word-mini .t { color: var(--color-text-muted); font-size: var(--fs-small); } .dash-activity { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); } .activity-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .activity-item { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--color-border); } .activity-item:last-child { border-bottom: none; } .activity-item a { color: var(--color-text); font-weight: 600; text-decoration: none; flex: 1; min-width: 140px; } .activity-item a:hover { color: var(--color-primary); } .activity-status { font-size: var(--fs-xs); padding: 3px 12px; border-radius: var(--radius-pill); background: var(--color-secondary-100); color: var(--color-secondary-700); font-weight: 600; } .activity-status.done { background: var(--color-success-100); color: var(--color-success-700); } .activity-date { font-size: var(--fs-xs); color: var(--color-text-muted); } /* ============================================================ ТРЕНУВАННЯ (флешкартки з 3D-фліпом) ============================================================ */ .train-setup { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); max-width: 480px; display: flex; flex-direction: column; gap: var(--space-4); box-shadow: var(--shadow-card); } .train-setup select { font: inherit; padding: 10px 13px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); } .train-count { font-size: var(--fs-small); color: var(--color-text-muted); margin: 0; font-weight: 600; } .train-card-screen { max-width: 520px; margin: 0 auto; text-align: center; } .train-progress { color: var(--color-text-muted); font-size: var(--fs-small); font-weight: 600; } .flashcard { perspective: 1200px; cursor: pointer; min-height: 260px; } .flashcard-inner { position: relative; width: 100%; min-height: 260px; transform-style: preserve-3d; transition: transform .55s var(--ease); } .flashcard.flipped .flashcard-inner { transform: rotateY(180deg); } .flashcard-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); } .flashcard-face.back { transform: rotateY(180deg); background: var(--color-primary-050); } .flashcard-side { font-family: var(--font-head); font-size: 1.9rem; font-weight: 600; } .flashcard-main { font-family: var(--font-head); font-weight: 600; font-size: 1.6rem; color: var(--color-primary); } .flashcard-example { font-size: var(--fs-small); font-style: italic; color: var(--color-text-muted); } .flashcard-hint { font-size: var(--fs-xs); color: var(--color-text-muted); } .train-actions { margin: var(--space-5) 0; } #judge-buttons { display: flex; gap: var(--space-3); justify-content: center; } .btn-know, .btn-still { font: inherit; font-weight: 600; font-size: 1rem; padding: 12px 26px; border-radius: var(--radius-sm); cursor: pointer; border: 1.5px solid transparent; transition: var(--transition); } .btn-know { background: var(--color-success); color: #fff; } .btn-know:hover { filter: brightness(1.05); transform: translateY(-1px); } .btn-still { background: var(--color-surface); color: var(--color-secondary-700); border-color: var(--color-secondary); } .btn-still:hover { background: var(--color-secondary-100); transform: translateY(-1px); } .train-summary { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); max-width: 480px; text-align: center; box-shadow: var(--shadow-card); } /* ============================================================ ПРОГРЕС (сторінка) ============================================================ */ .progress-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .progress-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm); border-left: 4px solid var(--color-primary); } .progress-card.completed { border-left-color: var(--color-success); } .progress-title { font-family: var(--font-head); font-weight: 600; color: var(--color-text); text-decoration: none; font-size: 1.15rem; } .progress-title:hover { color: var(--color-primary); } .progress-meta { display: flex; gap: var(--space-2); margin: var(--space-2) 0; font-size: var(--fs-xs); flex-wrap: wrap; } .progress-stats { margin: var(--space-2) 0; color: var(--color-text-muted); } .status-completed { color: var(--color-success-700); font-weight: 700; } .progress-dates { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--color-text-muted); } /* ============================================================ Поява карток ============================================================ */ @media (prefers-reduced-motion: no-preference) { .lesson-card, .dash-card, .vocab-card, .progress-card { animation: rise var(--dur) var(--ease) both; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } } /* ============================================================ Адаптив ============================================================ */ @media (max-width: 768px) { .site-header { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); } body { padding: var(--space-3) var(--space-3) var(--space-7); } } /* ============================================================ РАНГ МАНДРІВНИКА ============================================================ */ .rank-card { display: flex; align-items: center; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-5); box-shadow: var(--shadow-card); } .rank-emoji { width: 64px; height: 64px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: var(--color-primary-050); } .rank-body { flex: 1; min-width: 0; } .rank-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 6px; } .rank-name { font-family: var(--font-head); font-size: 1.2rem; } .rank-xp { font-family: var(--font-mono); color: var(--color-text-muted); font-size: var(--fs-small); } .rank-bar { height: 10px; background: var(--color-bg-warm); border-radius: var(--radius-pill); overflow: hidden; } .rank-bar-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); transition: width .6s var(--ease); } .rank-next { margin: 6px 0 0; font-size: var(--fs-small); color: var(--color-text-muted); } /* ============================================================ СЛОВО ДНЯ ============================================================ */ .wod-card { background: linear-gradient(135deg, var(--color-primary-050), var(--color-secondary-100)); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-6); } .wod-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--color-text-muted); } .wod-main { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-top: 6px; } .wod-word { font-family: var(--font-head); font-weight: 600; font-size: 1.6rem; } .wod-tr { color: var(--color-text-muted); font-size: 1.1rem; } .wod-ex { margin: var(--space-2) 0 0; font-style: italic; color: var(--color-text-muted); } /* ============================================================ ПАСПОРТ (сторінка) ============================================================ */ .journey { margin-bottom: var(--space-6); } .journey-route { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; background: var(--color-bg-warm); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-4); } .journey-start, .journey-stop { font-size: 1.9rem; } .journey-hop { color: var(--color-secondary); letter-spacing: 2px; font-weight: 700; } .passport-book { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); } .passport-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-5); } .pp-stamp { text-align: center; } .pp-stamp-circle { width: 96px; height: 96px; margin: 0 auto var(--space-2); border: 2.5px dashed var(--color-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; background: var(--color-secondary-100); transform: rotate(-5deg); transition: var(--transition); } .pp-stamp:hover .pp-stamp-circle { transform: rotate(0) scale(1.05); } .pp-stamp-name { font-family: var(--font-head); font-weight: 600; } .pp-stamp-count { font-size: var(--fs-xs); color: var(--color-text-muted); font-family: var(--font-mono); } .pp-stamp-date { font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); } .pp-postcard { font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; border: 1.5px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-pill); padding: 4px 12px; transition: var(--transition); } .pp-postcard:hover { border-color: var(--color-primary); color: var(--color-primary); } /* --- Обкладинка паспорта --- */ .pb-cover { position: relative; max-width: 560px; margin: 0 auto var(--space-6); background: linear-gradient(150deg, #0f4c5c 0%, #11788c 55%, #0d3f4c 100%); color: #f3e4c2; text-align: center; border-radius: 14px 22px 22px 14px; /* корінець книжки зліва */ padding: var(--space-7) var(--space-6); box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(243, 228, 194, 0.35), inset 0 0 0 6px transparent; } /* корінець */ .pb-cover::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1.5px; background: rgba(243, 228, 194, 0.35); } .pb-cover-emblem { font-size: 3rem; margin-bottom: var(--space-3); filter: sepia(0.3) saturate(0.8); } .pb-cover-title { font-family: var(--font-head); font-size: 1.7rem; letter-spacing: 0.35em; font-weight: 600; margin-bottom: var(--space-5); } .pb-cover-title span { display: block; font-size: var(--fs-small); letter-spacing: 0.18em; opacity: 0.8; margin-top: 4px; text-transform: uppercase; } .pb-cover-holder { display: flex; flex-direction: column; gap: 3px; } .pb-holder-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.65; } .pb-holder-name { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .pb-holder-rank { font-size: var(--fs-small); opacity: 0.85; } /* --- Розворот паспорта --- */ .pb-spread { position: relative; background: radial-gradient(circle at 18% 22%, rgba(17, 120, 140, 0.05), transparent 34%), radial-gradient(circle at 84% 70%, rgba(224, 138, 60, 0.05), transparent 30%), var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); box-shadow: var(--shadow-card); margin-bottom: var(--space-6); overflow: hidden; } /* «згин» розвороту посередині */ .pb-spread::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, var(--color-border-strong), transparent); } .pb-page-title { text-align: center; font-size: var(--fs-xs); letter-spacing: 0.3em; color: var(--color-text-muted); font-weight: 700; margin-bottom: var(--space-5); } .pb-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-5); justify-items: center; } /* Чорнильний штамп країни */ .pb-stamp { --ink: var(--color-primary); width: 172px; min-height: 172px; border-radius: 50%; border: 3px solid var(--ink); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 14px; transform: rotate(var(--tilt, -4deg)); transition: transform var(--dur) var(--ease); position: relative; -webkit-mask-image: radial-gradient(circle at 35% 30%, black 58%, rgba(0,0,0,0.85) 80%, rgba(0,0,0,0.65) 100%); mask-image: radial-gradient(circle at 35% 30%, black 58%, rgba(0,0,0,0.85) 80%, rgba(0,0,0,0.65) 100%); } .pb-stamp::before { content: ""; position: absolute; inset: 6px; border: 1.5px dashed var(--ink); border-radius: 50%; } .pb-stamp:hover { transform: rotate(0deg) scale(1.04); } .pb-stamp-full { --ink: var(--color-success-700, #2f7d4c); } .pb-stamp-top { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; } .pb-stamp-flag { font-size: 1.8rem; line-height: 1.2; } .pb-stamp-name { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; line-height: 1.15; } .pb-stamp-meta { font-family: var(--font-mono); font-size: 10.5px; opacity: 0.9; } .pb-stamp .pp-postcard { margin-top: 6px; border-color: currentColor; color: inherit; background: transparent; } .pb-stamp .pp-postcard:hover { background: rgba(255,255,255,0.6); } /* --- Полиця сувенірів --- */ .souvenir-shelf h2 { margin-bottom: var(--space-1); } .shelf-hint { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--fs-small); } .shelf-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); background: var(--color-bg-warm); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); /* «дошка полиці» під кожним рядом */ background-image: linear-gradient(0deg, rgba(180, 140, 90, 0.18) 2px, transparent 2px); background-size: 100% 150px; } .souvenir { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: var(--space-3); } .souvenir-emoji { font-size: 2.6rem; line-height: 1.2; filter: drop-shadow(0 6px 8px rgba(30, 45, 59, 0.25)); transition: transform var(--dur) var(--ease); } .souvenir:hover .souvenir-emoji { transform: scale(1.18) rotate(-8deg); } .souvenir-name { font-weight: 600; font-size: var(--fs-small); } .souvenir-country { font-size: var(--fs-xs); color: var(--color-text-muted); } .souvenir-locked { opacity: 0.55; filter: grayscale(0.6); } .souvenir-locked .souvenir-emoji { filter: none; } /* ============================================================ Доступність: видимий фокус для клавіатури (WCAG 2.4.7) ============================================================ */ a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible, [tabindex]:focus-visible, .chip input:focus-visible + span, #filter-search:focus-visible, .auth-form input:focus-visible, .admin-form input:focus-visible, .admin-form select:focus-visible, .admin-form textarea:focus-visible, .map-country:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .map-country:focus-visible { outline-offset: 0; } /* Прибираємо обводку при кліку мишею — лишаємо лише для клавіатури (Tab) */ .map-country:focus:not(:focus-visible) { outline: none; } /* Поважаємо «зменшити рух» — приглушуємо нефункційні анімації */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ СТОРІНКА «НОТАТКИ МАНДРІВНИКА» ============================================================ */ .page-lead { color: var(--color-text-muted); margin: 0 0 var(--space-5); } /* Якір на вправу не ховається під запіненою шапкою */ .block { scroll-margin-top: 88px; } .note-group { margin-bottom: var(--space-6); } .note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); } .note-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); } .note-group-head h2 { margin: 0; font-size: var(--fs-h3); } .note-group-head h2 a { color: var(--color-text); text-decoration: none; } .note-group-head h2 a:hover { color: var(--color-primary); } .note-flag { font-size: 1.1em; } .note-count { color: var(--color-text-muted); font-size: var(--fs-small); white-space: nowrap; } .note-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4); margin-bottom: var(--space-3); } .note-card-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); } .note-ex-title { font-weight: 600; color: var(--color-text); } .note-ex-badge { font-size: var(--fs-small); color: var(--color-primary-600); background: var(--color-primary-050); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 2px 10px; } .note-text { margin: 0 0 var(--space-3); color: var(--color-text); white-space: pre-wrap; word-break: break-word; } .note-card-foot { display: flex; justify-content: flex-end; } .note-goto { font-size: var(--fs-small); font-weight: 600; color: var(--color-primary); text-decoration: none; } .note-goto:hover { color: var(--color-primary-600); } /* «Жива» країна: місцевий час + погода */ .live-chip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-small); color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 6px 14px; margin-bottom: var(--space-3); width: fit-content; box-shadow: var(--shadow-sm); } .live-chip .lc-time b { color: var(--color-text); font-family: var(--font-mono); } .live-chip .lc-wx { font-weight: 600; color: var(--color-text); } /* ============================================================ ІГРОВИЙ ІНТЕРФЕЙС — спільний шар для ВСІХ сторінок (десктоп) Кнопки-жетони, паперові таблички, пружинні анімації. ============================================================ */ :root { --spring: cubic-bezier(0.34, 1.56, 0.64, 1); } @media (min-width: 769px) { /* --- Шапка: прозора, елементи плавають окремо --- */ .site-header { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; pointer-events: none; } .site-header > * { pointer-events: auto; } /* Логотип — паперова табличка на скотчі, висить трохи криво */ .brand { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 20px; box-shadow: var(--shadow-card); transform: rotate(-1.6deg); transition: transform .35s var(--spring), box-shadow .25s var(--ease); position: relative; } .brand::before { content: ""; position: absolute; top: -9px; left: 50%; width: 64px; height: 16px; transform: translateX(-50%) rotate(2deg); background: rgba(224, 138, 60, 0.30); border-left: 1px dashed rgba(255,255,255,0.5); border-right: 1px dashed rgba(255,255,255,0.5); } .brand:hover { transform: rotate(0deg) scale(1.04); box-shadow: var(--shadow-lg); } /* Привітання — табличка гравця */ .nav-links .greet { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 8px 16px; box-shadow: var(--shadow-sm); margin-right: var(--space-3); } /* --- Навігація: круглі жетони з підписами --- */ .nav-links { gap: 10px; } .nav-links a { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border-radius: 0; background: none !important; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text); transition: transform .18s var(--spring); } .site-header .nav-links a svg, .site-header .nav-links a i, .site-header .nav-links a [data-lucide] { width: 46px; height: 46px; padding: 12px; box-sizing: border-box; background: radial-gradient(circle at 32% 28%, #fff, var(--color-surface) 70%); border: 2px solid var(--color-border-strong); border-radius: 50%; box-shadow: 0 3px 0 rgba(30, 45, 59, 0.12), inset 0 0 0 3px var(--color-bg); color: var(--color-primary); transition: transform .3s var(--spring), box-shadow .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .nav-links a:hover { transform: translateY(-3px); color: var(--color-primary-600); } /* Підпис ховаємо; на ховер — швидка бульбашка-тултіп під жетоном */ .nav-links a { position: relative; } .nav-links .nav-label { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(-4px) scale(0.85); background: var(--color-text); color: #fff; padding: 4px 11px; border-radius: var(--radius-pill); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s var(--ease), transform .15s var(--spring); z-index: 10; } /* носик бульбашки */ .nav-links .nav-label::before { content: ""; position: absolute; top: -3.5px; left: 50%; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); background: var(--color-text); } .nav-links a:hover .nav-label, .nav-links a:focus-visible .nav-label { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } .site-header .nav-links a:hover svg, .site-header .nav-links a:hover i, .site-header .nav-links a:hover [data-lucide] { transform: scale(1.12) rotate(-6deg); border-color: var(--color-primary); box-shadow: 0 7px 14px rgba(30, 45, 59, 0.22), inset 0 0 0 3px var(--color-primary-050); } .site-header .nav-links a:active svg, .site-header .nav-links a:active i { transform: scale(0.94); } .nav-links a.cta { color: var(--color-secondary-700); } .site-header .nav-links a.cta svg, .site-header .nav-links a.cta i { background: radial-gradient(circle at 32% 28%, #ffe9c9, var(--color-secondary-100) 70%); border-color: var(--color-secondary); color: var(--color-secondary-700); } /* --- Кнопки скрізь поводяться як ігрові: пружина + втискання --- */ .btn-primary, .btn-secondary, .btn-danger, .chip-btn, .pp-postcard, .add-word-btn, .sidebar-close, .flat-head button { transition: transform .3s var(--spring), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow .2s var(--ease); } .btn-primary:hover { transform: translateY(-2px) rotate(-0.8deg) scale(1.04); } .btn-secondary:hover, .btn-danger:hover { transform: translateY(-2px) rotate(0.8deg) scale(1.04); } .pp-postcard:hover { transform: translateY(-2px) rotate(-1.5deg) scale(1.07); } .btn-primary:active, .btn-secondary:active, .btn-danger:active, .chip-btn:active, .pp-postcard:active, .add-word-btn:active { transform: scale(0.93); } /* --- Картки — фішки настільної гри --- */ .lesson-card { transition: transform .35s var(--spring), box-shadow .25s var(--ease); } .lesson-card:hover { transform: translateY(-5px) rotate(-0.7deg) scale(1.015); } .dash-card, .rank-card, .wod-card { transition: transform .35s var(--spring), box-shadow .25s var(--ease); } .dash-card:hover, .rank-card:hover, .wod-card:hover { transform: translateY(-3px) rotate(-0.4deg); box-shadow: var(--shadow-lg); } /* --- Форми входу/реєстрації — записка на скотчі --- */ .auth-form { position: relative; transform: rotate(-0.8deg); transition: transform .35s var(--spring); } .auth-form:focus-within { transform: rotate(0deg); } .auth-form::before { content: ""; position: absolute; top: -11px; left: 50%; width: 96px; height: 20px; transform: translateX(-50%) rotate(-2deg); background: rgba(143, 176, 214, 0.4); border-left: 1px dashed rgba(255,255,255,0.6); border-right: 1px dashed rgba(255,255,255,0.6); } /* --- Футер — паперова смужка, ледь крива --- */ .site-footer { transform: rotate(-0.25deg); } /* --- Назад до карти (на уроці) — жетон-стрілка --- */ .back-link a { transition: transform .3s var(--spring), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .back-link a:hover { transform: translateX(-4px) scale(1.05); } } /* Менше анімацій для тих, хто це попросив у системі */ @media (prefers-reduced-motion: reduce) { .brand, .nav-links a, .nav-links a svg, .nav-links a i, .lesson-card, .dash-card, .rank-card, .wod-card, .auth-form { transition: none; transform: none; } } /* ============================================================ ІГРОВІ ВНУТРІШНІ СТОРІНКИ: словник, тренування, нотатки (десктоп) ============================================================ */ @media (min-width: 769px) { /* --- Словник: колекція квитків мандрівника --- */ .my-vocab .vocab-card { position: relative; transition: transform .35s var(--spring), box-shadow .25s var(--ease); } .my-vocab .vocab-card:nth-child(odd) { transform: rotate(-0.5deg); } .my-vocab .vocab-card:nth-child(even) { transform: rotate(0.45deg); } .my-vocab .vocab-card:hover { transform: rotate(0deg) translateY(-3px) scale(1.012); box-shadow: var(--shadow-lg); z-index: 1; } /* перфорація квитка по лівому краю */ .my-vocab .vocab-card::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 0; border-left: 2px dashed var(--color-border); pointer-events: none; } /* кругла печатка «вивчено» */ .my-vocab .vocab-card[data-status="learned"]::after { content: "✓ ВИВЧЕНО"; position: absolute; right: 18px; top: 14px; width: 74px; height: 74px; border-radius: 50%; border: 2.5px solid var(--color-success); box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5.5px var(--color-success-100); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--color-success-700, #2f7d4c); transform: rotate(10deg); opacity: 0.85; pointer-events: none; -webkit-mask-image: radial-gradient(circle at 36% 30%, black 55%, rgba(0,0,0,0.7) 100%); mask-image: radial-gradient(circle at 36% 30%, black 55%, rgba(0,0,0,0.7) 100%); } /* --- Тренування: рейс із пересадками --- */ .train-progress::before { content: "✈ "; color: var(--color-secondary); } .flashcard .flashcard-face { border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-lg); } .flashcard { transition: transform .35s var(--spring); } .flashcard:hover { transform: translateY(-3px) rotate(-0.4deg); } .btn-know, .btn-still { transition: transform .3s var(--spring), background var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); } .btn-know:hover { transform: translateY(-2px) rotate(-1deg) scale(1.06); } .btn-still:hover { transform: translateY(-2px) rotate(1deg) scale(1.06); } .btn-know:active, .btn-still:active { transform: scale(0.93); } /* --- Нотатки: щоденник з наліпками --- */ .note-card { position: relative; transition: transform .35s var(--spring), box-shadow .25s var(--ease); /* лінійований папір */ background-image: repeating-linear-gradient( 180deg, transparent 0 27px, rgba(17, 120, 140, 0.07) 27px 28px); } .note-group .note-card:nth-child(odd) { transform: rotate(-0.6deg); } .note-group .note-card:nth-child(even) { transform: rotate(0.5deg); } .note-card:hover { transform: rotate(0deg) translateY(-3px); box-shadow: var(--shadow-lg); z-index: 1; } /* шматочок скотча на кожній нотатці */ .note-card::before { content: ""; position: absolute; top: -9px; left: 24px; width: 58px; height: 16px; transform: rotate(-3deg); background: rgba(224, 138, 60, 0.28); border-left: 1px dashed rgba(255,255,255,0.55); border-right: 1px dashed rgba(255,255,255,0.55); } .note-card:nth-child(even)::before { left: auto; right: 28px; transform: rotate(2.5deg); background: rgba(143, 176, 214, 0.34); } } /* ============================================================ ТЕМАТИЧНІ ФОНИ СТОРІНОК — кожна сторінка як локація гри (десктоп) ============================================================ */ /* (тематичний фон сторінки прибрано — усі сторінки використовують спільний фон, як карта) */ /* ============================================================ HUD: кільце прогресу світу + анімації входу сторінок ============================================================ */ @media (min-width: 769px) { /* Кільце прогресу навколо жетона «Паспорт» (--p ставить hud.js) */ .nav-links a { position: relative; } .nav-ring { position: absolute; top: -4px; left: 50%; margin-left: -27px; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(var(--color-secondary) var(--p, 0%), rgba(30,45,59,0.10) 0); -webkit-mask: radial-gradient(circle, transparent 23px, black 24px); mask: radial-gradient(circle, transparent 23px, black 24px); pointer-events: none; } } /* Анімації входу: рухаємо ОКРЕМУ властивість translate, щоб не перебивати transform-нахили карток. */ @media (min-width: 769px) and (prefers-reduced-motion: no-preference) { @keyframes rise-in { from { translate: 0 26px; opacity: 0; } to { translate: 0 0; opacity: 1; } } @keyframes drop-in { from { translate: 0 -34px; opacity: 0; } to { translate: 0 0; opacity: 1; } } /* Нотатки падають на дошку */ .page-notes .note-card { animation: drop-in .5s var(--spring) both; } /* Квитки словника та картки інших сторінок піднімаються */ .page-vocab .my-vocab .vocab-card, .page-dash .dash-card, .page-dash .rank-card, .page-dash .wod-card, .page-dash .passport-section, .page-dash .dash-activity, .page-train .train-setup, .page-train .flashcard, .page-passport .pb-cover, .page-passport .journey, .page-passport .pb-spread, .page-passport .souvenir-shelf, .lesson-wrap .lesson-hero, .lesson-wrap .boarding-pass, .lesson-wrap .lesson-progress { animation: rise-in .5s var(--spring) both; } /* Стаґер: кожна наступна картка трохи пізніше */ .page-notes .note-card:nth-child(2), .my-vocab .vocab-card:nth-child(2), .dash-grid .dash-card:nth-child(2) { animation-delay: .07s; } .page-notes .note-card:nth-child(3), .my-vocab .vocab-card:nth-child(3), .dash-grid .dash-card:nth-child(3) { animation-delay: .14s; } .page-notes .note-card:nth-child(4), .my-vocab .vocab-card:nth-child(4) { animation-delay: .21s; } .page-notes .note-card:nth-child(5), .my-vocab .vocab-card:nth-child(5) { animation-delay: .28s; } .page-notes .note-card:nth-child(6), .my-vocab .vocab-card:nth-child(6) { animation-delay: .35s; } .page-notes .note-card:nth-child(n+7), .my-vocab .vocab-card:nth-child(n+7) { animation-delay: .4s; } /* Послідовність секцій */ .page-passport .journey { animation-delay: .1s; } .page-passport .pb-spread { animation-delay: .18s; } .page-passport .souvenir-shelf { animation-delay: .26s; } .lesson-wrap .boarding-pass { animation-delay: .12s; } .lesson-wrap .lesson-progress { animation-delay: .2s; } .page-dash .passport-section { animation-delay: .15s; } .page-dash .dash-activity { animation-delay: .22s; } .page-train .flashcard { animation-delay: .1s; } /* Штампи в паспорті вискакують один за одним */ @keyframes stamp-in { from { scale: 0.3; opacity: 0; } to { scale: 1; opacity: 1; } } .pb-stamps .pb-stamp { animation: stamp-in .4s var(--spring) both; } .pb-stamps .pb-stamp:nth-child(2) { animation-delay: .08s; } .pb-stamps .pb-stamp:nth-child(3) { animation-delay: .16s; } .pb-stamps .pb-stamp:nth-child(4) { animation-delay: .24s; } .pb-stamps .pb-stamp:nth-child(5) { animation-delay: .32s; } .pb-stamps .pb-stamp:nth-child(n+6) { animation-delay: .4s; } } /* ============================================================ ГРАМАТИЧНИЙ ДОВІДНИК — «Бортовий журнал граматики» ============================================================ */ .grammar-layout { display: flex; gap: var(--space-6); align-items: flex-start; } .grammar-wrap { flex: 1; min-width: 0; max-width: 820px; } .gr-head h1 { margin-bottom: var(--space-2); } /* Меню-зміст ліворуч */ .gr-toc { flex: 0 0 250px; position: sticky; top: 96px; } .gr-toc-inner { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card); max-height: calc(100vh - 120px); overflow-y: auto; } .gr-toc .search-box { margin-bottom: var(--space-3); } .gr-toc .chips { margin-bottom: var(--space-3); } .gr-toc-cat { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); font-weight: 700; margin: var(--space-3) 0 6px; padding-top: var(--space-2); border-top: 1px dashed var(--color-border); } .gr-toc-cat:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } .gr-toc-link { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--fs-small); font-weight: 500; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .gr-toc-link:hover { background: var(--color-primary-050); color: var(--color-primary-600); } .gr-toc-link.active { background: var(--color-primary); color: #fff; } .gtl-emoji { font-size: 1rem; } @media (max-width: 1100px) { .gr-toc { display: none; } } /* Тема — сторінка журналу */ .gr-topic { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-card); margin-bottom: var(--space-5); position: relative; } /* прошивка журналу зліва */ .gr-topic::before { content: ""; position: absolute; left: 14px; top: 12px; bottom: 12px; width: 0; border-left: 2px dashed var(--color-border); } .gr-topic-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); } .gr-emoji { font-size: 2rem; } .gr-titles { flex: 1; min-width: 180px; } .gr-titles h3 { margin: 0; font-size: 1.35rem; } .gr-titles p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-small); } /* Перемикач рівня */ .gr-level-switch { display: flex; gap: 4px; background: var(--color-bg-warm); border-radius: var(--radius-pill); padding: 4px; } .gr-level-switch button { font: inherit; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-xs); border: 0; cursor: pointer; background: transparent; color: var(--color-text-muted); padding: 6px 13px; border-radius: var(--radius-pill); transition: var(--transition); } .gr-level-switch button:hover { color: var(--color-primary); } .gr-level-switch button.active { background: var(--color-primary); color: #fff; } /* Таймлайн */ .gr-timeline { width: 100%; max-width: 560px; display: block; margin: var(--space-2) auto 0; } .gr-tl-caption { text-align: center; color: var(--color-text-muted); font-size: var(--fs-small); margin: 2px 0 var(--space-3); } .tl-axis { stroke: var(--color-border-strong); stroke-width: 2.5; } .tl-arrow { fill: var(--color-border-strong); } .tl-now { stroke: var(--color-secondary); stroke-width: 2; stroke-dasharray: 4 4; } .tl-now-label { fill: var(--color-secondary-700); font-size: 12px; font-weight: 700; } .tl-side { fill: var(--color-text-muted); font-size: 11.5px; } .tl-dot { fill: var(--color-primary); } .tl-dot-now { fill: var(--color-secondary); } .tl-check { fill: #fff; font-size: 9px; font-weight: 700; } .tl-band { fill: var(--color-secondary-100); stroke: var(--color-secondary); stroke-width: 1.5; stroke-dasharray: 4 4; } .tl-link { stroke: var(--color-secondary); stroke-width: 2; stroke-dasharray: 5 5; marker-end: none; } /* Шар-доповнення вищого рівня */ .gr-pane-add { border-top: 1.5px dashed var(--color-border-strong); margin-top: var(--space-3); padding-top: var(--space-3); position: relative; } .gr-pane-badge { position: absolute; top: -11px; left: 0; background: var(--color-primary-050); color: var(--color-primary-600); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; padding: 2px 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-primary-100, #cfe6ea); } /* Пояснення і приклади */ .gr-explain { margin: var(--space-3) 0; line-height: 1.65; } /* Блок «правило → приклади» */ .gr-rule { margin: var(--space-4) 0; } .gr-rule-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-weight: 600; line-height: 1.45; } .gr-rule-num { flex: 0 0 22px; width: 22px; height: 22px; align-self: center; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; border-radius: 50%; font-family: var(--font-mono); font-size: 12px; font-weight: 700; } .gr-examples { list-style: none; margin: 0 0 var(--space-2); padding: 0 0 0 32px; display: flex; flex-direction: column; gap: 5px; } .gr-examples li { position: relative; padding-left: 14px; } /* тонка риска-буліт замість важкої плашки */ .gr-examples li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 1.5px; background: var(--color-border-strong); } .gr-en { font-weight: 400; } .gr-uk { color: var(--color-text-muted); font-size: var(--fs-small); margin-left: 8px; } /* ключова форма — просто жирним, без фону */ .gr-key { background: none; color: inherit; font-weight: 700; } /* у типових помилках слово-виправлення виділяється кольором */ .gm-wrong .gr-key { color: var(--color-error); font-weight: 600; } .gm-right .gr-key { color: var(--color-success-700, #2f7d4c); } /* Формули-конструктори */ .gr-formulas { display: flex; flex-direction: column; gap: 8px; margin: var(--space-3) 0; } .gr-formula { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gf-block { background: var(--color-secondary-100); color: var(--color-secondary-700); font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-small); padding: 6px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-secondary); } .gf-op { color: var(--color-text-muted); font-weight: 700; } .gf-example { font-style: italic; color: var(--color-text-muted); font-size: var(--fs-small); } /* Сигнальні слова */ .gr-signals { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: var(--space-3) 0; } .gr-signals-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: 700; } .gr-signal { background: var(--color-bg-warm); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-pill); padding: 3px 11px; font-size: var(--fs-small); font-style: italic; } /* Типові помилки — спокійний список */ .gr-mistakes { margin: var(--space-4) 0; } .gr-mistake { padding: 10px 0 12px; border-bottom: 1px solid var(--color-border); } .gr-mistake:last-child { border-bottom: 0; padding-bottom: 0; } .gm-wrong, .gm-right { margin: 0 0 3px; display: flex; align-items: baseline; gap: 9px; } .gm-wrong s { color: var(--color-text-muted); text-decoration-color: rgba(194, 97, 63, 0.5); } .gm-right { font-weight: 600; } .gm-why { margin: 2px 0 0 27px; font-size: var(--fs-small); color: var(--color-text-muted); } /* мальовані іконки */ .gi { width: 18px; height: 18px; flex: 0 0 18px; align-self: center; } .gi circle { fill: none; stroke-width: 1.6; } .gi path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gi-x circle { stroke: var(--color-error); } .gi-x path { stroke: var(--color-error); } .gi-check circle { stroke: var(--color-success); fill: var(--color-success-100, #e6f3ea); } .gi-check path { stroke: var(--color-success-700, #2f7d4c); } /* Лінки на уроки */ .gr-lessons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: var(--space-3); } .gr-lesson-link { background: var(--color-primary-050); color: var(--color-primary-600); border-radius: var(--radius-pill); padding: 4px 13px; font-weight: 600; font-size: var(--fs-small); transition: var(--transition); } .gr-lesson-link:hover { background: var(--color-primary); color: #fff; } .gr-empty { text-align: center; color: var(--color-text-muted); background: var(--color-surface); border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-6); } /* «Багаж знань» на талоні — клікабельний, веде в довідник */ a.bp-v { color: var(--color-primary); text-decoration: underline dashed; text-underline-offset: 3px; } a.bp-v:hover { color: var(--color-primary-600); } /* Тематичний фон сторінки + плашки (десктоп) */ /* (тематичний фон сторінки прибрано — усі сторінки використовують спільний фон, як карта) */ /* ============================================================ НАМАЛЬОВАНІ ІКОНКИ (icons.js + інлайн) — вирівнювання і кольори ============================================================ */ .etgw-icon, .streak svg, .bp-brand svg, .bp-plane svg, .pp-postcard svg, .gr-lesson-link svg, .finish-postcard svg { vertical-align: -0.18em; } .streak svg { color: var(--color-secondary-700); margin-right: 3px; } .finish-stamp svg { width: 44px; height: 44px; color: var(--color-secondary-700); } .mg-record svg { vertical-align: -0.2em; color: var(--color-secondary-700); } /* Медалі стріку */ .etgw-icon.medal-bronze { color: #b07b4f; } .etgw-icon.medal-silver { color: #8b97a3; } .etgw-icon.medal-gold { color: #d3a13b; } /* Чипи карти: іконки в тон тексту */ .daypart-chip svg, .world-counter svg, .daily-flight svg, .live-chip svg { vertical-align: -0.2em; } .map-celestial svg { color: #e8b54a; filter: drop-shadow(0 0 10px rgba(255, 220, 130, 0.9)); } .map-celestial[data-part="night"] svg { color: #d9e4f5; filter: drop-shadow(0 0 12px rgba(180, 205, 255, 0.95)); } /* ============================================================ СКРОЛБАРИ — тонкі, у палітрі паперу (замість системних) ============================================================ */ /* Firefox */ * { scrollbar-width: thin; scrollbar-color: rgba(140, 120, 90, 0.45) transparent; } /* WebKit (Chrome/Safari/Edge) */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(140, 120, 90, 0.45); /* теплий «паперовий» тон */ border-radius: 99px; border: 3px solid transparent; /* повітря навколо смужки */ background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--color-primary); background-clip: padding-box; } ::-webkit-scrollbar-thumb:active { background-color: var(--color-primary-600); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* У панелях зі своїм скролом (зміст граматики, панель країни) — ще тонше */ .gr-toc-inner::-webkit-scrollbar, .sidebar-scroll::-webkit-scrollbar, .flat-results::-webkit-scrollbar { width: 8px; } .gr-toc-inner, .sidebar-scroll, .flat-results { scrollbar-color: rgba(140, 120, 90, 0.35) transparent; } /* ============================================================ ПЕРЕЛІТ МІЖ СТОРІНКАМИ: хмари + літак ============================================================ */ .flight-transition { position: fixed; inset: 0; z-index: 4000; pointer-events: none; overflow: hidden; } /* Половинки неба з пухнастим краєм із «куп» хмар */ .ft-cloud { position: absolute; top: -10%; bottom: -10%; width: 78%; background: linear-gradient(105deg, #fdfbf6 70%, #f3ecdf 100%); filter: drop-shadow(0 0 30px rgba(255,255,255,0.9)); transition: transform 0.8s cubic-bezier(0.6, 0, 0.3, 1); } .ft-cloud-left { left: 0; transform: translateX(-105%); border-radius: 0 48% 52% 0 / 0 60% 40% 0; } .ft-cloud-right { right: 0; transform: translateX(105%); border-radius: 46% 0 0 54% / 55% 0 0 45%; } /* пухнаста кромка: великі мʼякі «купи» */ .ft-cloud::after { content: ""; position: absolute; top: 0; bottom: 0; width: 220px; background: radial-gradient(circle at 50% 8%, #fdfbf6 78px, transparent 80px), radial-gradient(circle at 30% 26%, #fdfbf6 95px, transparent 97px), radial-gradient(circle at 55% 46%, #fdfbf6 85px, transparent 87px), radial-gradient(circle at 28% 66%, #fdfbf6 100px, transparent 102px), radial-gradient(circle at 52% 88%, #fdfbf6 82px, transparent 84px); } .ft-cloud-left::after { right: -110px; } .ft-cloud-right::after { left: -110px; transform: scaleX(-1); } /* Хмари сходяться (відліт) */ .ft-closing .ft-cloud-left { transform: translateX(-22%); } .ft-closing .ft-cloud-right { transform: translateX(22%); } /* Початковий стан «зімкнуто» (приліт) — без анімації */ .ft-closed .ft-cloud { transition: none; } .ft-closed .ft-cloud-left { transform: translateX(-22%); } .ft-closed .ft-cloud-right { transform: translateX(22%); } /* Хмари розходяться (приліт) */ .ft-opening .ft-cloud { transition: transform 0.9s cubic-bezier(0.7, 0, 0.45, 1) 0.15s; } .ft-opening .ft-cloud-left { transform: translateX(-105%); } .ft-opening .ft-cloud-right { transform: translateX(105%); } /* Літак перелітає екран по пологій дузі */ .ft-plane { position: absolute; top: 50%; left: -90px; width: 74px; height: 58px; color: var(--color-primary); filter: drop-shadow(0 4px 8px rgba(30, 45, 59, 0.3)); opacity: 0; } .ft-plane path { fill: currentColor; stroke: #fff; stroke-width: 0.9; } .ft-closing .ft-plane { animation: ft-fly 0.95s cubic-bezier(0.45, 0, 0.6, 1) 0.1s forwards; } .ft-opening .ft-plane { animation: ft-fly 0.95s cubic-bezier(0.45, 0, 0.6, 1) forwards; } @keyframes ft-fly { 0% { opacity: 0; transform: translate(0, 30px) rotate(8deg); } 12% { opacity: 1; } 50% { transform: translate(55vw, -36px) rotate(-6deg); } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(115vw, 10px) rotate(5deg); } } /* ============================================================ ПАСПОРТНИЙ КОНТРОЛЬ — сторінки входу і реєстрації ============================================================ */ .page-auth .auth-wrap { max-width: 430px; } /* Табличка будки: темна, з золотим тисненням (як обкладинка паспорта) */ .booth-sign { background: linear-gradient(150deg, #0f4c5c 0%, #11788c 60%, #0d3f4c 100%); color: #f3e4c2; text-align: center; border-radius: var(--radius-md); padding: 14px 18px 12px; box-shadow: var(--shadow-card), inset 0 0 0 2px rgba(243, 228, 194, 0.35); margin-bottom: var(--space-5); transform: rotate(-0.6deg); } .bs-line { display: block; font-family: var(--font-head); letter-spacing: 0.3em; font-weight: 600; font-size: 1.05rem; } .bs-sub { display: block; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; margin-top: 3px; } .auth-title { margin-bottom: var(--space-1); } .auth-lead { margin: 0 0 var(--space-4); color: var(--color-text-muted); } /* Поля — як анкета прибуття */ .page-auth .auth-form .af-label { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); font-weight: 700; margin-bottom: 4px; } .page-auth .auth-form input { border-style: dashed; } .page-auth .auth-form input:focus { border-style: solid; } /* Штамп «ПРОПУЩЕНО» при сабміті */ .auth-stamp-fx { position: fixed; inset: 0; z-index: 3000; pointer-events: none; display: flex; align-items: center; justify-content: center; } .auth-stamp-fx .passport-stamp { margin: 0; animation-delay: 0s; } /* ============================================================ «ПЕРЕВІР СЕБЕ» — вікторина в темі довідника ============================================================ */ .gr-quiz { margin: var(--space-4) 0; } .gq-start { font: inherit; font-weight: 700; cursor: pointer; background: var(--color-secondary-100); color: var(--color-secondary-700); border: 1.5px solid var(--color-secondary); border-radius: var(--radius-pill); padding: 9px 20px; transition: transform .25s var(--spring, ease), background var(--dur-fast) var(--ease); } .gq-start:hover { transform: translateY(-2px) scale(1.04); background: #fde8cf; } .gq-count { font-weight: 500; font-size: var(--fs-small); opacity: 0.8; } .gq-body { background: var(--color-bg-warm); border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-4); } .gq-ask { margin: 0 0 var(--space-3); font-weight: 700; } .gq-option { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; background: var(--color-surface); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 8px; transition: var(--transition); } .gq-option:hover:not(:disabled) { border-color: var(--color-primary); transform: translateY(-1px); } .gq-option:disabled { cursor: default; } .gq-option .gr-key { color: inherit; } .gq-option.gq-right { border-color: var(--color-success); background: var(--color-success-100, #e6f3ea); } .gq-option.gq-wrong { border-color: var(--color-error); background: #fdf0ec; text-decoration: line-through; } .gq-why { margin: var(--space-2) 0; color: var(--color-text-muted); font-size: var(--fs-small); } .gq-next, .gq-again { font: inherit; font-weight: 700; cursor: pointer; background: var(--color-primary); color: #fff; border: 0; border-radius: var(--radius-pill); padding: 8px 18px; transition: transform .25s var(--spring, ease); } .gq-next:hover, .gq-again:hover { transform: translateY(-2px) scale(1.04); } .gq-score { font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; margin: 0 0 var(--space-3); } /* ============================================================ АЛЬБОМ ЛИСТІВОК (паспорт) ============================================================ */ .postcard-album { margin-top: var(--space-6); } .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); } .album-card { margin: 0; cursor: pointer; text-align: center; transition: transform .3s var(--spring, ease); } .album-card:nth-child(odd) { transform: rotate(-1.2deg); } .album-card:nth-child(even) { transform: rotate(1deg); } .album-card:hover { transform: rotate(0) translateY(-4px) scale(1.03); z-index: 1; position: relative; } .album-card canvas { width: 100%; height: auto; display: block; border: 5px solid #fff; border-radius: 4px; box-shadow: var(--shadow-card); } .album-card figcaption { margin-top: 6px; font-size: var(--fs-xs); color: var(--color-text-muted); background: rgba(255,255,255,0.85); display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); } /* ============================================================ ЩОДЕННИК ПОДОРОЖІ (паспорт) ============================================================ */ .journal { margin-top: var(--space-6); } .journal-feed { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-card); position: relative; /* лінійований папір щоденника */ background-image: repeating-linear-gradient( 180deg, transparent 0 31px, rgba(17, 120, 140, 0.06) 31px 32px); } .jr-date { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--color-secondary-700); text-transform: uppercase; letter-spacing: 0.1em; margin: var(--space-4) 0 var(--space-2); display: inline-block; background: var(--color-secondary-100); padding: 2px 12px; border-radius: var(--radius-pill); } .jr-date:first-child { margin-top: 0; } .jr-event { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; line-height: 1.5; } .jr-icon { flex: 0 0 auto; align-self: center; color: var(--color-primary); display: inline-flex; } .jr-done .jr-icon { color: var(--color-success); } .jr-words .jr-icon { color: var(--color-secondary-700); } .jr-text { font-size: var(--fs-small); } /* ============================================================ ТОП ШТУРМАНІВ (дешборд) ============================================================ */ .navigators { margin-bottom: var(--space-6); } .nav-hint { font-size: var(--fs-small); color: var(--color-text-muted); font-weight: 400; font-family: var(--font-body); } .navigators-list { list-style: none; margin: 0; padding: var(--space-3) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .nav-row { display: flex; align-items: center; gap: var(--space-3); padding: 9px 0; border-bottom: 1px dashed var(--color-border); } .nav-row:last-child { border-bottom: 0; } .nav-medal { flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; color: var(--color-text-muted); } .nav-place-1 .nav-medal { color: #d3a13b; } .nav-place-2 .nav-medal { color: #8b97a3; } .nav-place-3 .nav-medal { color: #b07b4f; } .nav-name { flex: 1; font-weight: 600; } .nav-place-1 .nav-name { font-family: var(--font-head); font-size: 1.05rem; } .nav-score { font-family: var(--font-mono); font-weight: 700; color: var(--color-primary); } /* ============================================================ АКЦЕНТИ СВІТУ — перемикач голосу озвучення ============================================================ */ .accent-switcher { display: inline-flex; align-items: center; gap: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 5px 10px 5px 14px; box-shadow: var(--shadow-sm); margin: var(--space-2) 0; } .as-label { font-size: var(--fs-xs); color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .as-btn { font: inherit; font-size: var(--fs-small); cursor: pointer; background: transparent; border: 1.5px solid transparent; border-radius: var(--radius-pill); padding: 4px 10px; transition: transform .25s var(--spring, ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .as-btn:hover { transform: translateY(-1px) scale(1.06); border-color: var(--color-border-strong); } .as-btn.active { background: var(--color-primary); border-color: var(--color-primary); } .as-btn.active .as-cc { color: #fff; } .as-cc { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-xs); color: var(--color-text-muted); } .as-fallback { opacity: 0.55; } .block-vocabulary .accent-switcher { margin-bottom: var(--space-3); } /* ============================================================ ТРЕНАЖЕР ВИМОВИ — кнопка-мікрофон і панель результату ============================================================ */ .pron-btn { font: inherit; cursor: pointer; vertical-align: middle; background: transparent; border: 1.5px solid var(--color-border-strong); color: var(--color-text-muted); border-radius: 50%; width: 26px; height: 26px; padding: 0; margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; transition: transform .25s var(--spring, ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .pron-btn:hover { border-color: var(--color-secondary); color: var(--color-secondary-700); transform: scale(1.12); } .pron-btn.pr-recording { border-color: var(--color-error); color: var(--color-error); animation: pr-pulse 1.1s ease-in-out infinite; } @keyframes pr-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(194, 97, 63, 0.45); } 50% { box-shadow: 0 0 0 7px rgba(194, 97, 63, 0); } } .pr-panel { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding: 3px 12px; background: var(--color-bg-warm); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-pill); font-size: var(--fs-small); } .pr-status { color: var(--color-text-muted); } .pr-good { color: var(--color-success-700, #2f7d4c); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; } .pr-hit { color: var(--color-success-700, #2f7d4c); font-weight: 600; } .pr-miss { color: var(--color-error); text-decoration: underline dotted; text-underline-offset: 3px; } .pr-again { font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); padding: 2px 10px; } .pr-again:hover { border-color: var(--color-primary); color: var(--color-primary); } /* Чип «Перепакуй валізу» — над рейсом дня */ .suitcase-chip { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 5; font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; background: var(--color-surface); border: 1.5px solid var(--color-secondary); color: var(--color-secondary-700); border-radius: var(--radius-pill); padding: 8px 18px; box-shadow: var(--shadow-card); transition: transform .25s var(--spring, ease), box-shadow .2s var(--ease); animation: suitcase-wiggle 4s ease-in-out infinite; } .suitcase-chip:hover { transform: translateX(-50%) translateY(-2px) scale(1.05); box-shadow: var(--shadow-lg); } @keyframes suitcase-wiggle { 0%, 88%, 100% { rotate: 0deg; } 92% { rotate: -1.6deg; } 96% { rotate: 1.4deg; } } @media (prefers-reduced-motion: reduce) { .suitcase-chip { animation: none; } } .map-game-on .suitcase-chip { display: none; } .dash-due { font-size: var(--fs-small); color: var(--color-secondary-700); background: var(--color-secondary-100); border-radius: var(--radius-sm); padding: 6px 10px; margin: 0 0 var(--space-3); } .dash-due a { font-weight: 700; color: var(--color-secondary-700); text-decoration: underline; } .dash-due svg { vertical-align: -0.18em; } /* ============================================================ ВІЗИ КРАЇН (паспорт) ============================================================ */ .visas { margin-top: var(--space-6); } .visa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-5); } .visa-card { position: relative; overflow: hidden; background: repeating-radial-gradient(circle at 30% 20%, transparent 0 9px, rgba(17, 120, 140, 0.045) 9px 10px), repeating-radial-gradient(circle at 75% 80%, transparent 0 11px, rgba(224, 138, 60, 0.05) 11px 12px), linear-gradient(160deg, #fdfaf2, #f4ecdc); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-card); } /* голограма-стрічка з переливом */ .visa-holo { position: absolute; top: 0; bottom: 0; right: 22px; width: 34px; background: linear-gradient(165deg, rgba(140, 200, 220, 0.35), rgba(230, 180, 220, 0.3), rgba(170, 220, 170, 0.3), rgba(250, 220, 150, 0.35), rgba(140, 200, 220, 0.35)); background-size: 100% 300%; mix-blend-mode: multiply; } @media (prefers-reduced-motion: no-preference) { .visa-holo { animation: holo-shift 6s ease-in-out infinite alternate; } @keyframes holo-shift { from { background-position: 0 0%; } to { background-position: 0 100%; } } } .visa-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--color-border-strong); padding-bottom: 6px; margin-bottom: var(--space-3); } .visa-brand { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--color-primary); } .visa-brand svg { vertical-align: -0.15em; } .visa-type { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.22em; color: var(--color-secondary-700); } .visa-main { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .visa-flag { font-size: 2.2rem; } .visa-country strong { display: block; font-family: var(--font-head); font-size: 1.3rem; letter-spacing: 0.06em; } .visa-country span { font-size: var(--fs-xs); color: var(--color-text-muted); } .visa-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--space-4); margin: 0 0 var(--space-3); } .visa-fields div { display: flex; flex-direction: column; } .visa-fields dt { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted); font-weight: 700; } .visa-fields dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 600; } .visa-mrz { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--color-text); opacity: 0.75; border-top: 1px dashed var(--color-border-strong); padding-top: 7px; overflow: hidden; white-space: nowrap; } /* ============================================================ РОЗМОВНІ МІСІЇ — діалоговий квест ============================================================ */ .mission-wrap { max-width: 680px; margin: 0 auto; } .mission-head { margin-bottom: var(--space-5); } .mission-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--color-secondary-100); color: var(--color-secondary-700); border: 1px solid var(--color-secondary); border-radius: var(--radius-pill); padding: 4px 14px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; } .mission-head h1 { margin: var(--space-3) 0 var(--space-2); display: inline-block; background: var(--color-surface); padding: 10px 22px; border-radius: var(--radius-md); box-shadow: var(--shadow-card); transform: rotate(-0.6deg); } .mission-intro { display: inline-block; background: rgba(255,255,255,0.92); padding: 8px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--color-text-muted); max-width: 560px; } .dialogue { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); } .msg { max-width: 86%; padding: 12px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); animation: msg-in .35s var(--spring, ease) both; } @keyframes msg-in { from { translate: 0 12px; opacity: 0; } to { translate: 0 0; opacity: 1; } } .msg-npc { align-self: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; } .msg-user { align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; } .msg-author { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--color-secondary-700); margin-bottom: 3px; } .msg-text { margin: 0; font-weight: 500; } .msg-uk { margin: 4px 0 0; font-size: var(--fs-small); color: var(--color-text-muted); } .msg .speak-btn { border: 0; background: none; cursor: pointer; color: var(--color-primary); padding: 0 2px; vertical-align: -1px; } .msg-tip { align-self: center; max-width: 92%; background: var(--color-bg-warm); border: 1.5px dashed var(--color-border-strong); color: var(--color-text-muted); font-size: var(--fs-small); } .options { display: flex; flex-direction: column; gap: 9px; padding-bottom: var(--space-7); } .opt-btn { font: inherit; text-align: left; cursor: pointer; background: var(--color-surface); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); padding: 12px 16px; box-shadow: var(--shadow-sm); transition: transform .25s var(--spring, ease), border-color var(--dur-fast) var(--ease); } .opt-btn:hover { border-color: var(--color-primary); transform: translateY(-2px) scale(1.01); } .mission-finish { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-lg); animation: msg-in .4s var(--spring, ease) both; } .mission-finish h2 { margin: 0 0 var(--space-2); display: flex; align-items: center; gap: 8px; color: var(--color-success-700, #2f7d4c); } .mf-note { margin: 0 0 var(--space-3); color: var(--color-text-muted); } .mf-label { font-weight: 700; font-size: var(--fs-small); margin: 0 0 var(--space-2); } .mf-phrases { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: 6px; } .mf-phrases li { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--color-primary-050); border-radius: var(--radius-sm); padding: 8px 12px; } .mf-phrases .speak-btn { border: 0; background: none; cursor: pointer; color: var(--color-primary); } .mf-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; } /* Картка розмовної місії в панелі країни */ .mission-card { display: flex; flex-direction: column; gap: 5px; background: linear-gradient(150deg, #fff8e8, #fdeec9); border: 1.5px solid var(--color-secondary); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); color: var(--color-text); box-shadow: var(--shadow-card); transition: transform .3s var(--spring, ease), box-shadow .25s var(--ease); } .mission-card:hover { transform: translateY(-3px) rotate(-0.5deg) scale(1.015); box-shadow: var(--shadow-lg); } .mc-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-secondary-700); } .mission-card strong { font-family: var(--font-head); font-size: 1.08rem; } .mc-cta { font-size: var(--fs-small); font-weight: 700; color: var(--color-secondary-700); } /* ============================================================ ЄДИНИЙ ШАБЛОН СТОРІНКИ Плашка-заголовок (як тулбар на карті) + єдиний «матеріал» картки. Канон картки: білий фон, radius-lg, м'яка тінь, тонка рамка. ============================================================ */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); } .page-header .ph-titles { min-width: 0; } /* Скидаємо тематичні «папірці/нашивки» зі заголовка всередині плашки, щоб не було «плашки в плашці» (теми сторінок стилізують будь-який h1). */ .page-header h1 { margin: 0; font-size: var(--fs-h2); background: none; padding: 0; box-shadow: none; border-radius: 0; transform: none; display: block; position: static; } .page-header .ph-sub { margin: 4px 0 0; color: var(--color-text-muted); font-size: var(--fs-small); background: none; padding: 0; box-shadow: none; transform: none; display: block; } .page-header .ph-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } /* Єдиний матеріал картки: однаковий радіус і тінь, що й тулбар карти/вправи */ .dash-card, .vocab-card, .train-setup, .train-summary, .train-card, .progress-card, .rank-card, .lesson-card, .map-toolbar { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } /* ============================================================ ГРАМАТИЧНИЙ ДОВІДНИК — навігація (групи → підтеми → тема) ============================================================ */ .gr-app { max-width: var(--w-wide); margin: 0 auto; } /* Липка панель: назад + пошук */ .gr-bar { position: sticky; top: var(--space-3); z-index: 20; display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5); } .gr-back { display: inline-flex; align-items: center; gap: 6px; flex: none; font: inherit; font-weight: 600; font-size: var(--fs-small); color: var(--color-text); background: #fff; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-pill); padding: 8px 14px 8px 10px; cursor: pointer; transition: var(--transition); } .gr-back:hover { border-color: var(--color-primary); color: var(--color-primary); } .gr-bar .gr-search-box { flex: 1 1 auto; position: relative; } .gr-bar .gr-search-box svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); } .gr-bar .gr-search-box input { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-small); padding: 11px 14px 11px 40px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-pill); background: #fff; } .gr-bar .gr-search-box input:focus { outline: none; border-color: var(--color-primary); } /* Головна: групи тем */ .gr-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--space-4); } .gr-cat-card { display: flex; align-items: center; gap: var(--space-3); text-align: left; font: inherit; cursor: pointer; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-5); transition: var(--transition); } .gr-cat-card:hover { transform: translateY(-2px); border-color: var(--color-primary); box-shadow: var(--shadow-lg); } .gr-cat-num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(106, 46, 90, 0.10); color: #6A2E5A; font-weight: 700; font-size: 14px; } .gr-cat-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gr-cat-name { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--color-text); } .gr-cat-count { font-size: var(--fs-small); color: var(--color-text-muted); } .gr-cat-go { flex: none; color: var(--color-text-muted); font-weight: 700; font-size: 1.1rem; } /* [hidden] має перемагати display:flex карток і секцій */ .gr-view[hidden], .gr-topic-card[hidden], .gr-cat-card[hidden] { display: none !important; } /* Список підтем */ .gr-list-title { font-family: var(--font-head); margin: 0 0 var(--space-4); font-size: var(--fs-h2); } .gr-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); } .gr-topic-card { display: flex; flex-direction: column; gap: 3px; text-align: left; font: inherit; cursor: pointer; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4); transition: var(--transition); } .gr-topic-card:hover { transform: translateY(-2px); border-color: var(--color-primary); box-shadow: var(--shadow-card); } .gtc-en { font-family: var(--font-head); font-weight: 700; color: var(--color-text); } .gtc-uk { font-size: var(--fs-small); color: var(--color-text-muted); } .gtc-levels { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; } .gtc-lvl { font-size: 11px; font-weight: 700; font-family: var(--font-mono); color: var(--color-primary); background: var(--color-primary-050); border-radius: var(--radius-pill); padding: 2px 8px; } /* Тема на цілий екран — показуємо лише активну */ #gr-view-detail { max-width: 860px; margin: 0 auto; } #gr-view-detail .gr-topic { display: none; } #gr-view-detail .gr-topic.gr-active { display: block; } /* ===== Плашка «доступ не активований» (карта для неоплачених) ===== */ .access-locked-bar { display: flex; align-items: center; gap: var(--space-3); max-width: var(--w-wide); margin: 0 auto var(--space-4); background: #fff6e9; border: 1px solid #f0d9b0; border-left: 4px solid #e0a850; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-3) var(--space-4); color: #6b4a1e; } .access-locked-bar i, .access-locked-bar svg { flex: none; width: 22px; height: 22px; color: #c98a2e; } .access-locked-bar .alb-text { display: flex; flex-direction: column; gap: 2px; } .access-locked-bar .alb-text strong { font-size: 1rem; color: #5a3d18; } .access-locked-bar .alb-text span { font-size: var(--fs-small); } .access-locked-bar.alb-flash { animation: alb-pulse 0.6s ease 2; } @keyframes alb-pulse { 0%, 100% { box-shadow: var(--shadow-card); } 50% { box-shadow: 0 0 0 4px rgba(224, 168, 80, 0.45); } } /* ===== Бейджі статусу доступу (admin/users.php) ===== */ .badge-admin, .badge-access { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); } .badge-admin { background: rgba(106, 46, 90, 0.12); color: #6A2E5A; } .badge-access.on { background: #e3f3e8; color: #2E7D5B; } .badge-access.off { background: #f4e6e2; color: #C0492F; } .admin-table .muted { color: var(--color-text-muted); } /* ===== Поп-ап «потрібна активація доступу» ===== */ .alb-btn { margin-left: auto; flex: none; font: inherit; font-size: var(--fs-small); font-weight: 700; color: #6b4a1e; background: #fff; border: 1.5px solid #e0a850; border-radius: var(--radius-pill); padding: 6px 14px; cursor: pointer; transition: var(--transition); } .alb-btn:hover { background: #fbeccd; } .access-modal-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(40, 30, 20, 0.55); backdrop-filter: blur(3px); animation: am-fade 0.2s ease; } @keyframes am-fade { from { opacity: 0; } to { opacity: 1; } } .access-modal { position: relative; width: 100%; max-width: 460px; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,0.3); padding: var(--space-6) var(--space-5) var(--space-5); text-align: center; animation: am-pop 0.25s var(--ease); } @keyframes am-pop { from { transform: translateY(12px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } } .am-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; font-size: 22px; line-height: 1; color: var(--color-text-muted); background: none; border: none; border-radius: 50%; cursor: pointer; } .am-close:hover { background: var(--color-bg); color: var(--color-text); } .am-icon { width: 56px; height: 56px; margin: 0 auto var(--space-3); display: flex; align-items: center; justify-content: center; background: rgba(106, 46, 90, 0.10); color: #6A2E5A; border-radius: 50%; } .am-icon svg, .am-icon i { width: 28px; height: 28px; } .access-modal h2 { font-family: var(--font-head); margin: 0 0 var(--space-3); font-size: 1.4rem; } .am-lead { color: var(--color-text); line-height: 1.6; margin: 0 0 var(--space-4); } .am-sub { font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-2); } .am-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); text-align: left; display: grid; gap: 8px; } .am-list li { display: flex; align-items: center; gap: 10px; color: var(--color-text); font-size: var(--fs-small); } .am-list li svg, .am-list li i { width: 18px; height: 18px; color: #2E7D5B; flex: none; } .am-foot { font-size: var(--fs-small); color: var(--color-text-muted); margin: 0 0 var(--space-4); } .access-modal .am-ok { width: 100%; } /* Тост при кліку на закритий урок */ .access-toast { position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 20px); z-index: 310; display: flex; align-items: center; gap: 10px; background: #2b2b30; color: #fff; border-radius: var(--radius-pill); padding: 12px 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } .access-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .access-toast svg, .access-toast i { width: 18px; height: 18px; color: #f0c674; flex: none; } .toast-link { font: inherit; font-weight: 700; color: #ffd98a; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; } /* [hidden] має перемагати display:flex модалки й тосту (інакше не закриваються) */ .access-modal-overlay[hidden], .access-toast[hidden] { display: none !important; } /* Заблокована картка (без href) — курсор-вказівник */ .lesson-card.lesson-locked, .mission-card.lesson-locked { cursor: pointer; } /* ============================================================ КУРСИ (courses.php) — рівні CEFR → курс → юніти → уроки ============================================================ */ .page-courses { max-width: var(--w-wide); } /* --- Огляд: рівні та картки курсів --- */ .level-section { margin-bottom: var(--space-6); } .level-head { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); } .level-badge { font-family: var(--font-mono); font-weight: 800; font-size: 1rem; letter-spacing: 1px; color: #fff; background: var(--color-primary); border-radius: var(--radius-md); padding: 6px 14px; } .level-count { color: var(--color-text-muted); font-size: var(--fs-small); font-weight: 600; } .level-empty { color: var(--color-text-muted); background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; } .course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); } .course-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5); transition: var(--transition); } .course-card:hover { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: var(--shadow-lg); } .cc-top, .course-hero-top { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-2); } .course-level { font-family: var(--font-mono); font-weight: 800; font-size: 13px; color: var(--color-primary); background: var(--color-primary-050); border-radius: var(--radius-pill); padding: 3px 12px; } .course-flag { font-size: 1.3rem; line-height: 1; } .course-card h3, .course-hero h1 { font-family: var(--font-head); margin: 0; } .course-card h3 { font-size: 1.2rem; } .cc-en, .course-en { color: var(--color-text-muted); font-size: var(--fs-small); margin: 0; } .cc-meta { color: var(--color-text-muted); font-size: var(--fs-small); margin: 6px 0 0; } /* Смужка прогресу */ .course-progress { display: flex; align-items: center; gap: 10px; margin-top: var(--space-3); } .cp-bar { flex: 1; height: 7px; background: var(--color-border); border-radius: 4px; overflow: hidden; } .cp-bar span { display: block; height: 100%; background: #2E7D5B; border-radius: 4px; transition: width var(--dur) var(--ease); } .cp-label { font-size: 12px; font-weight: 700; color: var(--color-text-muted); flex: none; } /* --- Деталі курсу --- */ .course-bar { margin-bottom: var(--space-4); } .course-hero { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-5); } .course-hero h1 { font-size: var(--fs-h1); margin: 0 0 2px; } .course-desc { color: var(--color-text); line-height: 1.6; margin: var(--space-3) 0 0; max-width: var(--w-article); } .course-hero .course-progress { max-width: 360px; margin-top: var(--space-4); } /* Юніт */ .unit-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5); margin-bottom: var(--space-4); } .unit-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); cursor: pointer; user-select: none; border-radius: var(--radius-md); transition: background .18s ease; } .unit-head:hover { background: rgba(106, 46, 90, 0.04); } .unit-head:focus-visible { outline: 2px solid rgba(106, 46, 90, 0.4); outline-offset: 3px; } .unit-num { flex: none; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #6A2E5A; background: rgba(106, 46, 90, 0.10); border-radius: var(--radius-pill); padding: 5px 12px; } .unit-head h2 { font-family: var(--font-head); font-size: var(--fs-h3); margin: 0; } .unit-sub { color: var(--color-text-muted); font-size: var(--fs-small); margin: 2px 0 0; } /* Шеврон-перемикач юніту */ .unit-chevron { flex: none; margin-left: auto; display: inline-flex; color: #8a7080; transition: transform .25s ease; } .unit-section.collapsed .unit-chevron { transform: rotate(-90deg); } .unit-section.collapsed .unit-head { margin-bottom: 0; } .unit-section.collapsed .lesson-trail { display: none; } /* Список уроків юніту — плитки 3-в-ряд, нанизані на маршрут-змійку */ .lesson-trail { position: relative; } .trail-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; } .lesson-grid { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 40px 36px; } .lesson-tile { display: flex; min-width: 0; } /* Картка: фото-портрет зліва, текст справа */ .lesson-tile > a { position: relative; display: flex; flex-direction: row; width: 100%; min-width: 0; min-height: 176px; text-decoration: none; color: inherit; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: visible; transition: transform 60ms ease-out, box-shadow 60ms ease-out, border-color 60ms ease-out; } .lesson-tile > a:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--color-primary); } /* Фото-портрет зліва (~3:4) */ .lt-cover { position: relative; width: 38%; flex: 0 0 38%; align-self: stretch; background-size: cover; background-position: center; border-radius: var(--radius-md) 0 0 var(--radius-md); } /* Локейшен-пін у правому верхньому куті, наполовину назовні */ .lt-pin { position: absolute; top: -9px; right: -9px; z-index: 2; width: 22px; height: 22px; background: #ece2ea; border: 1.5px solid rgba(106,46,90,0.3); border-radius: 50% 50% 50% 0; transform: rotate(-38deg); box-shadow: 0 2px 5px rgba(0,0,0,0.22); transition: transform 0.22s ease; } .lt-pin::after { content: ''; position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; border: 1.5px solid rgba(106,46,90,0.3); } .lesson-tile > a:hover .lt-pin { animation: ltPinBounce 0.6s ease-in-out infinite; } @keyframes ltPinBounce { 0%, 100% { transform: translateY(0) rotate(-45deg) scale(1.12); } 50% { transform: translateY(-5px) rotate(-45deg) scale(1.12); } } /* Текст: заголовок+підзаголовок зверху, мета притиснута донизу */ .lt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: flex-start; padding: 22px 16px 12px; border-radius: 0 var(--radius-md) var(--radius-md) 0; } /* Назва уроку */ .lt-title { align-self: flex-start; display: flex; align-items: flex-start; color: #3a2230; font-weight: 700; font-size: 15.5px; line-height: 1.25; } /* Код уроку (1.1, 2.4…) — прямокутний бейдж у верхньому лівому куті фото */ .lt-no { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 9px; background: #fff; color: #8a7080; border: 1.5px solid rgba(106,46,90,0.34); font-weight: 700; font-size: 12px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,0.18); } .lesson-tile.done .lt-no { background: #fff; color: #2E7D5B; border-color: rgba(46,125,91,0.42); } .lt-hook { color: var(--color-text-muted); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Мета: граматика — низ-ліворуч, час — низ-праворуч */ .lt-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; width: 100%; margin-top: auto; padding-top: 8px; } .lesson-gram { font-size: 11px; border-radius: var(--radius-pill); padding: 1px 8px; color: var(--ex-ink, #6A2E5A); background: rgba(106,46,90,0.09); /* Один рядок: довгі теми обрізаємо трикрапкою, повний текст — у тултіпі (title) при наведенні. Пігулка лише стискається (не росте), а .lesson-dur нестискний → «хв» завжди праворуч без накладання. */ min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lesson-dur { flex: 0 0 auto; margin-left: auto; font-size: 11px; color: var(--color-text-muted); white-space: nowrap; } @media (max-width: 820px) { .lesson-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 28px 28px; } .lesson-tile { grid-column: auto !important; grid-row: auto !important; } } @media (max-width: 480px) { .lesson-grid { grid-template-columns: 1fr; gap: 20px; } } .unit-flag { font-size: 1.05em; } .unit-en { color: var(--color-text-muted); font-weight: 400; } /* Огляд курсів — сітка карток за рівнями CEFR */ .level-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 1fr; gap: var(--space-4); } .level-card { display: flex; flex-direction: column; min-height: 168px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5); text-decoration: none; color: inherit; } .level-card.ready { transition: var(--transition); } .level-card.ready:hover { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: var(--shadow-lg); } .lc-badge { align-self: flex-start; margin-bottom: var(--space-3); font-family: var(--font-mono); font-weight: 800; font-size: 15px; letter-spacing: 1px; color: #fff; background: var(--color-primary); border-radius: var(--radius-md); padding: 5px 14px; } .level-card h3 { font-family: var(--font-head); font-size: 1.15rem; margin: 0 0 4px; } .lc-meta { color: var(--color-text-muted); font-size: var(--fs-small); margin: 0 0 auto; } .level-card .course-progress { margin-top: var(--space-3); } .level-card.soon { border-style: dashed; box-shadow: none; } .level-card.soon .lc-badge { background: var(--color-text-muted); } .lc-grad::after { display: none; } .level-card.soon .lc-body { justify-content: center; align-items: center; padding: var(--space-4); } .lc-soon { color: var(--color-text-muted); font-weight: 600; margin: 0; } /* Банер фону країни зверху картки курсу */ .level-card { overflow: hidden; } .level-card.has-cover { padding: 0; } .lc-cover { position: relative; height: 92px; background-size: cover; background-position: center 35%; } .lc-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.16)); } .lc-cover .lc-badge { position: absolute; top: 12px; left: 14px; z-index: 1; margin: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .lc-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5); } .lc-body .lc-meta { margin: 0 0 auto; } /* === Навігація між уроками (вгорі і внизу уроку) === */ .lesson-nav { display: flex; gap: var(--space-3); align-items: stretch; margin: var(--space-4) 0; } .lesson-nav-top { margin-top: var(--space-3); } .lesson-nav-bottom { margin-top: var(--space-5); } .lnav { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; text-decoration: none; color: inherit; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: var(--transition); } .lnav-next { text-align: right; align-items: flex-end; } .lnav-prev { align-items: flex-start; } .lnav:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--color-primary); } .lnav-dir { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #6A2E5A; } .lnav-arrow { font-weight: 700; } .lnav-title { font-size: 14px; font-weight: 600; color: #3a2230; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lnav-empty { flex: 1 1 0; visibility: hidden; } @media (max-width: 560px) { .lnav { padding: 10px 12px; } .lnav-title { font-size: 13px; -webkit-line-clamp: 1; } } /* Швидкий tooltip для глос/виділених слів (заміна повільного нативного title) */ .gloss-tip { position: absolute; z-index: 200; pointer-events: none; background: #3a2230; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: 8px; max-width: 260px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; } .gloss-tip.show { opacity: 1; transform: translateY(0); } .gloss-tip::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #3a2230; } .gloss-tip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #3a2230; } /* ============================================================ Граматичні схеми (блок "scheme") — inline-SVG, стилізований класами. SVG лишається в JSON чистим (тільки структура + класи), уся палітра тут. Базис: тепла «зошитова» картка, шрифти Inter/Fraunces/JetBrains Mono, акценти teal/orange/green/terracotta з design-tokens. ============================================================ */ .scheme { margin: var(--space-6) 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .scheme-title { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h3, 1.15rem); color: var(--color-text); text-align: center; margin: 0; } .scheme-canvas { width: 100%; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); box-shadow: 0 1px 0 var(--color-border-strong), 0 8px 24px -18px rgba(30,45,59,.4); } .scheme-canvas svg { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; } .scheme-cap { font-family: var(--font-head); font-style: italic; font-size: var(--fs-small); color: var(--color-text-muted); text-align: center; margin: 0; } /* --- текст усередині SVG --- */ .scheme svg text { font-family: var(--font-body); fill: var(--color-text); } .scheme svg .s-head { font-family: var(--font-head); } .scheme svg .s-mono { font-family: var(--font-mono); } .scheme svg .s-b { font-weight: 700; } .scheme svg .s-lg { font-size: 23px; } .scheme svg .s-md { font-size: 17px; } .scheme svg .s-sm { font-size: 13px; } .scheme svg .s-xs { font-size: 11px; } .scheme svg .s-teal { fill: var(--color-primary); } .scheme svg .s-orange{ fill: var(--color-secondary-700); } .scheme svg .s-green { fill: #2E7D5B; } .scheme svg .s-red { fill: var(--color-error); } .scheme svg .s-muted { fill: var(--color-text-muted); } .scheme svg .s-white { fill: #fff; } .scheme svg .s-uk { font-style: italic; fill: var(--color-text-muted); font-size: 13px; } /* --- картки/блоки (rect, circle) — fill + stroke разом --- */ .scheme svg .s-box { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 2; } .scheme svg .s-box-teal{ fill: var(--color-primary-050); stroke: var(--color-primary); stroke-width: 2; } .scheme svg .s-box-orange{ fill: var(--color-secondary-100); stroke: var(--color-secondary); stroke-width: 2; } .scheme svg .s-box-green { fill: #E7F1EB; stroke: var(--color-success); stroke-width: 2; } .scheme svg .s-box-red { fill: #FBECE6; stroke: var(--color-error); stroke-width: 2; } .scheme svg .s-fill-teal { fill: var(--color-primary); } .scheme svg .s-fill-orange{ fill: var(--color-secondary); } /* --- лінії, стрілки, конектори (тільки stroke) --- */ .scheme svg .s-conn { fill: none; stroke: var(--color-border-strong); stroke-width: 2; } .scheme svg .s-conn-teal { fill: none; stroke: var(--color-primary); stroke-width: 2; } .scheme svg .s-conn-dash { fill: none; stroke: var(--color-text-muted); stroke-width: 2; stroke-dasharray: 4 4; } @media (max-width: 520px) { .scheme-canvas { padding: var(--space-4) var(--space-2); } .scheme svg .s-lg { font-size: 21px; } }