/* ============================================================ MathMaster — dashboard.css Moderni EdTech vizualika • CSS kintamieji • Flexbox • Grid Pritaikyta: - dashboard.html - classes/*.html - būsimoms temų / uždavinių / pažangos sekcijoms ============================================================ */ /* ------------------------------------------------------------------ `hidden` PRIVALO nugalėti `display`. Naršyklės taisyklė `[hidden]{display:none}` gyvena UA lentelėje, todėl BET KOKIA autoriaus `display` reikšmė ją nugali. Visos šios kortelės turi `display:flex`, tad `card.hidden = true` (dashboard.js paieška ir klaidų klinikos mygtukas) nieko nepaslėpdavo: įvedus nesutampančią frazę kortelės gaudavo `hidden`, bet likdavo ekrane – paieška atrodė sugedusi, o `[data-action="clinic"]` mygtukas kabėjo net be klaidų. `!important` būtinas todėl, kad `.topic-card` taisyklė kartojama failo gale – prie vienodo specifiškumo laimėtų vėlesnioji `display:flex`. ------------------------------------------------------------------ */ .class-card[hidden], .topic-card[hidden], .qa-card[hidden], .rec-card[hidden]{ display:none !important; } /* ============================================================ 1. KINTAMIEJI ============================================================ */ :root{ /* pagrindinė spalvų sistema */ --primary:#4F46E5; --primary-600:#4338CA; --secondary:#6366F1; --primary-50:#EEF2FF; /* paviršiai */ --bg:#F8FAFC; --card:#FFFFFF; --surface-2:#F1F5F9; --track:#EEF1F8; /* tekstas */ --text:#0F172A; --text-2:#475569; --muted:#64748B; /* rėmeliai */ --border:#E6EAF2; --border-soft:#EEF1F7; /* topbar / fonas */ --topbar-bg:rgba(248,250,252,.82); --math-ink:rgba(15,23,42,.05); --grid-line:rgba(79,70,229,.05); --grid-line-major:rgba(79,70,229,.10); /* akcentai */ --green:#10B981; --blue:#3B82F6; --purple:#8B5CF6; --orange:#F59E0B; --red:#EF4444; --slate:#334155; --teal:#14B8A6; --rose:#F43F5E; --violet:#7C3AED; --amber:#F59E0B; /* šešėliai */ --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04); --shadow-md:0 6px 16px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.04); --shadow-lg:0 16px 34px rgba(15,23,42,.10), 0 6px 14px rgba(15,23,42,.06); --shadow-primary:0 12px 26px rgba(79,70,229,.32); /* forma / dydžiai */ --r-sm:10px; --r:16px; --r-lg:22px; --sidebar-w:264px; --rail-w:340px; --ease:.25s cubic-bezier(.4,0,.2,1); } /* ============================================================ 2. TAMSUS REŽIMAS Įjungimas: ============================================================ */ :root[data-theme="dark"]{ --bg:#0B1120; --card:#131C2E; --surface-2:#1B2638; --track:#1B2638; --text:#E8EDF6; --text-2:#AEB9CC; --muted:#8593A8; --border:#23304A; --border-soft:#1C2740; --primary-50:rgba(99,102,241,.16); --topbar-bg:rgba(11,17,32,.82); --math-ink:rgba(226,232,240,.055); --grid-line:rgba(129,140,248,.07); --grid-line-major:rgba(129,140,248,.13); --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 6px 16px rgba(0,0,0,.5); --shadow-lg:0 16px 34px rgba(0,0,0,.6); } /* ============================================================ 3. RESET & BASE ============================================================ */ *{ box-sizing:border-box; margin:0; padding:0; } html,body{ height:100%; } body{ font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; } img{ display:block; max-width:100%; } h1,h2,h3,h4{ line-height:1.2; } *::-webkit-scrollbar{ width:10px; height:10px; } *::-webkit-scrollbar-thumb{ background:#D7DEEA; border-radius:20px; border:3px solid var(--bg); } *::-webkit-scrollbar-thumb:hover{ background:#C4CDDD; } :focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; } /* ============================================================ 4. MATEMATINIS FONAS ============================================================ */ .math-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background-image: linear-gradient(var(--grid-line-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px), linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size:170px 170px, 170px 170px, 34px 34px, 34px 34px; } .math-bg .ms{ position:absolute; font-weight:700; color:var(--math-ink); user-select:none; line-height:1; } .math-bg .ms:nth-of-type(1){ top:11%; left:31%; font-size:66px; } .math-bg .ms:nth-of-type(2){ top:24%; left:80%; font-size:48px; } .math-bg .ms:nth-of-type(3){ top:62%; left:14%; font-size:58px; } .math-bg .ms:nth-of-type(4){ top:78%; left:60%; font-size:70px; } .math-bg .ms:nth-of-type(5){ top:8%; left:62%; font-size:44px; } .math-bg .ms:nth-of-type(6){ top:46%; left:90%; font-size:52px; } .math-bg .ms:nth-of-type(7){ top:88%; left:30%; font-size:40px; } .math-bg .ms:nth-of-type(8){ top:38%; left:44%; font-size:38px; } .math-bg .ms:nth-of-type(9){ top:18%; left:8%; font-size:46px; } .math-bg .ms:nth-of-type(10){ top:70%; left:82%; font-size:50px; } .math-bg .ms:nth-of-type(11){ top:54%; left:55%; font-size:42px; } .math-bg .ms:nth-of-type(12){ top:30%; left:20%; font-size:40px; } .math-axes{ position:absolute; right:3%; bottom:5%; width:260px; height:260px; color:var(--math-ink); } /* ============================================================ 5. APP KARKASAS ============================================================ */ .app{ position:relative; z-index:1; display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; } /* ============================================================ 6. SIDEBAR ============================================================ */ .sidebar{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:8px; padding:22px 16px; background:var(--card); border-right:1px solid var(--border); overflow-y:auto; } .brand{ display:flex; align-items:center; gap:12px; padding:6px 8px 16px; } .brand-logo{ flex:0 0 auto; line-height:0; filter:drop-shadow(0 6px 12px rgba(79,70,229,.28)); } .brand-text{ display:flex; flex-direction:column; min-width:0; } .brand-name{ font-weight:800; font-size:1.15rem; letter-spacing:-.02em; } .brand-tag{ font-size:.72rem; color:var(--muted); font-weight:500; } .nav{ display:flex; flex-direction:column; gap:4px; } .nav-link{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-sm); color:var(--text-2); font-size:.9rem; font-weight:600; transition:background var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease); } .nav-ic{ font-size:1.05rem; width:22px; text-align:center; flex:0 0 auto; } .nav-link:hover{ background:var(--surface-2); color:var(--text); transform:translateX(1px); } .nav-link:hover .nav-ic{ transform:scale(1.08); } .nav-link.active{ background:var(--primary-50); color:var(--primary-600); box-shadow:inset 0 0 0 1px rgba(79,70,229,.12); } .nav-section{ display:flex; flex-direction:column; gap:4px; margin-top:14px; } .nav-section-title{ font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding:4px 12px; } .premium-card{ margin-top:auto; display:flex; flex-direction:column; gap:8px; padding:18px; border-radius:var(--r); color:#fff; background:linear-gradient(150deg, #4F46E5, #6366F1 60%, #818CF8); box-shadow:var(--shadow-primary); position:relative; overflow:hidden; } .premium-card::after{ content:""; position:absolute; right:-26px; top:-26px; width:96px; height:96px; border-radius:50%; background:rgba(255,255,255,.16); } .premium-ic{ font-size:1.3rem; } .premium-title{ font-weight:800; font-size:1rem; } .premium-text{ font-size:.76rem; line-height:1.45; color:rgba(255,255,255,.88); } .premium-btn{ margin-top:4px; padding:9px 12px; border-radius:10px; background:#fff; color:var(--primary-600); font-weight:700; font-size:.82rem; transition:transform var(--ease), box-shadow var(--ease), background var(--ease); } .premium-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.18); } /* ============================================================ 7. MAIN + TOPBAR ============================================================ */ .main{ min-width:0; display:flex; flex-direction:column; } .topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:18px; padding:14px 28px; background:var(--topbar-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .search{ position:relative; flex:1; max-width:440px; display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--card); border:1px solid var(--border); border-radius:12px; transition:border-color var(--ease), box-shadow var(--ease), transform var(--ease); } .search:focus-within{ border-color:var(--secondary); box-shadow:0 0 0 4px rgba(99,102,241,.12); } .search-ic{ color:var(--muted); line-height:0; flex:0 0 auto; } .search input{ border:none; outline:none; width:100%; font-size:.9rem; color:var(--text); background:transparent; } .search input::placeholder{ color:var(--muted); } /* Paieskos "isskleidziamas" meniu: rodo temas, kurios atitinka jau surasyta uzklausa (pagal pavadinima ARBA raktazodzius), tiesiai po lauku - nereikia slinkti zemyn iki visos temu lenteles. */ .search-suggest{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--card); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:6px; max-height:360px; overflow-y:auto; z-index:60; } .search-suggest[hidden]{ display:none; } .search-suggest-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); text-decoration:none; color:var(--text); cursor:pointer; } .search-suggest-item:hover, .search-suggest-item.is-active{ background:var(--surface-2); } .search-suggest-body{ min-width:0; flex:1; } .search-suggest-name{ font-size:.88rem; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .search-suggest-meta{ font-size:.75rem; color:var(--muted); } .search-suggest-empty{ padding:16px 10px; text-align:center; font-size:.85rem; color:var(--muted); } .topbar-right{ margin-left:auto; display:flex; align-items:center; gap:16px; } .icon-btn{ position:relative; width:42px; height:42px; display:grid; place-items:center; background:var(--card); border:1px solid var(--border); border-radius:12px; font-size:1.05rem; transition:background var(--ease), transform var(--ease), border-color var(--ease), box-shadow var(--ease); } .icon-btn:hover{ background:var(--surface-2); transform:translateY(-1px); border-color:#D7DEEA; } .icon-btn .dot{ position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--red); border:2px solid var(--card); } .user{ display:flex; align-items:center; gap:11px; } .avatar{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(140deg, #4F46E5, #818CF8); box-shadow:var(--shadow-sm); } .user-meta{ display:flex; flex-direction:column; line-height:1.25; } .user-name{ font-weight:700; font-size:.9rem; } .user-class{ font-size:.74rem; color:var(--muted); } .content{ padding:28px; display:flex; flex-direction:column; gap:26px; } /* ============================================================ 8. HERO ============================================================ */ .hero{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:32px; padding:38px 40px; border-radius:var(--r-lg); color:#fff; background:linear-gradient(125deg, #4338CA 0%, #4F46E5 45%, #6366F1 100%); box-shadow:var(--shadow-primary); } .blob{ position:absolute; border-radius:50%; filter:blur(46px); z-index:1; pointer-events:none; } .blob-a{ width:240px; height:240px; top:-90px; right:120px; background:rgba(255,255,255,.18); } .blob-b{ width:200px; height:200px; bottom:-100px; left:-40px; background:rgba(129,140,248,.55); } .hero-sym{ position:absolute; z-index:1; pointer-events:none; user-select:none; color:rgba(255,255,255,.13); font-weight:700; animation:floaty 6s ease-in-out infinite; } .hs-1{ font-size:72px; top:6%; right:34%; } .hs-2{ font-size:50px; bottom:12%; right:7%; animation-delay:-2s; } .hs-3{ font-size:46px; top:50%; right:22%; animation-delay:-3.6s; } .hero-ring{ position:absolute; z-index:1; pointer-events:none; width:120px; height:120px; border-radius:50%; border:1.5px dashed rgba(255,255,255,.22); top:-26px; right:46%; animation:floaty 7.5s ease-in-out infinite; animation-delay:-1s; } .hero-tri{ position:absolute; z-index:1; pointer-events:none; width:58px; height:58px; bottom:18%; right:40%; animation:floaty 8s ease-in-out infinite; animation-delay:-4s; } .hero-left{ position:relative; z-index:2; max-width:440px; } .hero-badge{ display:inline-block; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); font-size:.74rem; font-weight:600; margin-bottom:16px; } .hero-left h1{ font-size:2.1rem; font-weight:800; letter-spacing:-.025em; margin-bottom:10px; } .hero-left p{ font-size:1rem; color:rgba(255,255,255,.9); margin-bottom:24px; max-width:380px; } .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; } .btn{ padding:12px 22px; border-radius:12px; font-weight:700; font-size:.9rem; transition:transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease); } .btn-light{ background:#fff; color:var(--primary-600); box-shadow:0 8px 18px rgba(0,0,0,.16); } .btn-light:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.22); } .btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35); } .btn-ghost:hover{ background:rgba(255,255,255,.22); transform:translateY(-2px); } .hero-illustration{ position:relative; z-index:2; flex:0 0 auto; } .graph-panel{ position:relative; width:360px; padding:14px; background:rgba(255,255,255,.96); border-radius:var(--r); box-shadow:0 18px 40px rgba(8,11,40,.28); } .graph-svg{ width:100%; height:auto; display:block; } .graph-svg .ax{ font-size:13px; font-weight:700; fill:#64748B; font-style:italic; } .graph-svg .ax-0{ font-size:12px; font-weight:600; fill:#94A3B8; } .graph-svg .vec{ font-size:14px; font-weight:800; fill:#F43F5E; font-style:italic; } .chip{ position:absolute; padding:5px 11px; border-radius:9px; background:#fff; color:var(--primary-600); font-size:.8rem; font-weight:700; box-shadow:var(--shadow-md); border:1px solid var(--border-soft); animation:floaty 5s ease-in-out infinite; } .chip-1{ top:6px; left:-14px; } .chip-2{ bottom:24px; right:-18px; color:var(--rose); animation-delay:-1.6s; } .chip-3{ bottom:-12px; left:34px; color:var(--violet); animation-delay:-3.1s; } /* ============================================================ 9. BLOCKS + GRID ============================================================ */ .block{ display:flex; flex-direction:column; gap:16px; } .block-head{ display:flex; align-items:center; justify-content:space-between; } .block-head h2{ font-size:1.2rem; font-weight:800; letter-spacing:-.02em; } .link-more{ font-size:.84rem; font-weight:600; color:var(--primary-600); transition:opacity var(--ease), transform var(--ease); } .link-more:hover{ opacity:.7; transform:translateX(2px); } .content-grid{ display:grid; grid-template-columns:1fr var(--rail-w); gap:24px; align-items:start; } .content-col{ display:flex; flex-direction:column; gap:26px; min-width:0; } /* ============================================================ 10. BENDRAS HOVER / KORTELIŲ ELGESYS ============================================================ */ .class-card, .topic-card, .qa-card, .rec-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-sm); transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease); } .class-card:hover, .topic-card:hover, .qa-card:hover, .rec-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); } /* ============================================================ 11. KLASĖS ============================================================ */ .classes-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:18px; } .class-card{ position:relative; overflow:hidden; cursor:pointer; display:flex; align-items:center; gap:16px; padding:18px; } .class-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); opacity:.85; } .class-bp{ flex:0 0 auto; width:84px; height:84px; display:grid; place-items:center; border-radius:18px; background:color-mix(in srgb, var(--accent) 12%, var(--card)); transition:transform var(--ease), background var(--ease); } .class-bp img{ width:72px; height:72px; object-fit:contain; } .class-info{ display:flex; flex-direction:column; min-width:0; } .class-info h3{ font-size:1rem; font-weight:700; } .class-info span{ font-size:.76rem; color:var(--muted); } .class-arrow{ margin-left:auto; color:var(--accent); font-weight:700; opacity:0; transform:translateX(-6px); transition:opacity var(--ease), transform var(--ease); } .class-card:hover{ border-color:color-mix(in srgb, var(--accent) 38%, var(--border)); } .class-card:hover .class-bp{ transform:scale(1.08) rotate(-6deg); } .class-card:hover .class-arrow{ opacity:1; transform:translateX(0); } /* ============================================================ 12. TEMOS ============================================================ */ .topics-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(228px, 1fr)); gap:18px; } .topic-card{ position:relative; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; gap:10px; padding:22px; } .topic-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; background:radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); transition:opacity var(--ease); pointer-events:none; } .topic-card:hover::before{ opacity:1; } .topic-ic{ position:relative; width:56px; height:56px; display:grid; place-items:center; border-radius:16px; color:var(--accent); margin-bottom:4px; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--card)), color-mix(in srgb, var(--accent) 6%, var(--card))); transition:transform var(--ease), background var(--ease), color var(--ease); } .topic-ic svg{ width:34px; height:34px; } .topic-card h3{ position:relative; font-size:1.02rem; font-weight:700; } .topic-card p{ position:relative; font-size:.82rem; color:var(--muted); line-height:1.45; } .topic-go{ position:absolute; right:18px; bottom:18px; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; font-weight:700; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--card)); transition:transform var(--ease), background var(--ease), color var(--ease); } .topic-card:hover{ border-color:color-mix(in srgb, var(--accent) 36%, var(--border)); } .topic-card:hover .topic-ic{ background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); color:#fff; transform:scale(1.08) rotate(-4deg); } .topic-card:hover .topic-go{ background:var(--accent); color:#fff; transform:translateX(3px); } /* ============================================================ 13. GREITI VEIKSMAI ============================================================ */ .qa-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(222px, 1fr)); gap:16px; } .qa-card{ position:relative; overflow:hidden; text-align:left; display:flex; align-items:center; gap:14px; padding:18px; } .qa-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, var(--primary), var(--secondary)); transform:scaleX(0); transform-origin:left; transition:transform var(--ease); } .qa-card:hover::before{ transform:scaleX(1); } .qa-ic{ flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center; border-radius:13px; font-size:1.3rem; background:var(--primary-50); } .qa-text{ display:flex; flex-direction:column; min-width:0; } .qa-text strong{ font-size:.92rem; font-weight:700; } .qa-text span{ font-size:.74rem; color:var(--muted); } .qa-arrow{ margin-left:auto; color:var(--muted); font-weight:700; transition:transform var(--ease), color var(--ease); } .qa-card:hover .qa-arrow{ color:var(--primary-600); transform:translateX(3px); } /* ============================================================ 14. REKOMENDUOJAMA TAU ============================================================ */ .rec-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px; } .rec-card{ display:flex; flex-direction:column; gap:14px; padding:18px; cursor:pointer; } .rec-ic{ width:100%; height:96px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); box-shadow:inset 0 -18px 40px rgba(0,0,0,.12); } .rec-ic svg{ width:48px; height:48px; } .rec-body{ display:flex; flex-direction:column; gap:4px; } .rec-body h3{ font-size:1rem; font-weight:700; } .rec-body p{ font-size:.8rem; color:var(--muted); line-height:1.4; } .rec-cta{ margin-top:4px; font-size:.82rem; font-weight:700; color:var(--accent); transition:transform var(--ease); display:inline-block; } .rec-card:hover{ border-color:color-mix(in srgb, var(--accent) 34%, var(--border)); } .rec-card:hover .rec-cta{ transform:translateX(3px); } /* ============================================================ 15. DEŠINĖ JUOSTA + KORTELĖS ============================================================ */ .rail{ display:flex; flex-direction:column; gap:22px; } .card{ background:var(--card); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:22px; } .card-title{ font-size:1.02rem; font-weight:800; letter-spacing:-.01em; } /* PAŽANGA */ .progress-card{ display:flex; flex-direction:column; gap:18px; } .ring-wrap{ position:relative; display:grid; place-items:center; } .ring-wrap::before{ content:""; position:absolute; width:210px; height:210px; border-radius:50%; background:radial-gradient(circle, rgba(79,70,229,.18), transparent 62%); filter:blur(4px); pointer-events:none; } .ring{ position:relative; width:196px; height:196px; } .progress-arc{ filter:drop-shadow(0 2px 7px rgba(79,70,229,.5)); animation:ringLoad 1.4s cubic-bezier(.4,0,.2,1) forwards; transform-origin:60px 60px; } .ring-val{ font-size:26px; font-weight:800; fill:var(--text); } .ring-sub{ font-size:11px; font-weight:600; fill:var(--muted); letter-spacing:.04em; } .stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .stat{ display:flex; flex-direction:column; gap:3px; padding:14px; background:var(--surface-2); border-radius:var(--r-sm); } .stat-val{ font-size:1.25rem; font-weight:800; letter-spacing:-.02em; } .stat-lbl{ font-size:.72rem; color:var(--muted); line-height:1.3; } /* TIKSLAS */ .goal-card{ display:flex; flex-direction:column; gap:12px; } .goal-head{ display:flex; align-items:center; gap:10px; } .goal-ic{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; font-size:1rem; background:var(--primary-50); } .goal-text{ font-size:.88rem; color:var(--text-2); } .bar{ height:10px; border-radius:999px; background:var(--surface-2); overflow:hidden; } .bar span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--primary), var(--secondary)); transition:width .6s cubic-bezier(.4,0,.2,1); } .goal-meta{ display:flex; justify-content:space-between; font-size:.78rem; } .goal-meta span:first-child{ color:var(--muted); } .goal-meta span:last-child{ font-weight:700; color:var(--primary-600); } /* PASIEKIMAI */ .ach-card{ display:flex; flex-direction:column; gap:16px; } .ach-list{ list-style:none; display:flex; flex-direction:column; gap:12px; } .ach-list li{ display:flex; align-items:center; gap:12px; } .ach-badge{ flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; font-size:1.15rem; } .badge-amber{ background:#FEF3C7; } .badge-rose{ background:#FFE4E6; } .badge-teal{ background:#CCFBF1; } /* Tamsiame režime šie šviesūs pasteliniai fonai atrodytų kaip ryški dėmė ant tamsaus puslapio – pritemdyti iki permatomo atspalvio. */ :root[data-theme="dark"] .badge-amber{ background:rgba(245,158,11,.20); } :root[data-theme="dark"] .badge-rose{ background:rgba(244,63,94,.20); } :root[data-theme="dark"] .badge-teal{ background:rgba(20,184,166,.20); } .ach-list h4{ font-size:.88rem; font-weight:700; } .ach-list div span{ font-size:.74rem; color:var(--muted); line-height:1.35; } /* ============================================================ 16. IS-SELECTED ============================================================ */ .class-card.is-selected, .topic-card.is-selected, .rec-card.is-selected{ border-color:color-mix(in srgb, var(--accent, var(--primary)) 55%, var(--border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, var(--primary)) 22%, transparent), var(--shadow-md); transform:translateY(-2px); } .class-card.is-selected{ background:color-mix(in srgb, var(--accent, var(--primary)) 5%, var(--card)); } .class-card.is-selected .class-arrow{ opacity:1; transform:translateX(0); } .class-card.is-selected .class-bp{ transform:scale(1.06) rotate(-4deg); } .topic-card.is-selected{ background:color-mix(in srgb, var(--accent, var(--primary)) 4%, var(--card)); } .topic-card.is-selected .topic-ic{ background:linear-gradient( 135deg, var(--accent, var(--primary)), color-mix(in srgb, var(--accent, var(--primary)) 60%, #000) ); color:#fff; transform:scale(1.06) rotate(-3deg); } .topic-card.is-selected .topic-go{ background:var(--accent, var(--primary)); color:#fff; transform:translateX(3px); } .topic-card.is-selected::before{ opacity:1; } .topic-card.is-selected h3, .rec-card.is-selected h3{ color:var(--accent, var(--primary)); } .rec-card.is-selected{ background:color-mix(in srgb, var(--accent, var(--primary)) 4%, var(--card)); } .rec-card.is-selected .rec-cta{ transform:translateX(4px); } :root[data-theme="dark"] .class-card.is-selected, :root[data-theme="dark"] .topic-card.is-selected, :root[data-theme="dark"] .rec-card.is-selected{ box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, var(--primary)) 30%, transparent), var(--shadow-lg); } /* ============================================================ 17. KLASIŲ PUSLAPIAI ============================================================ */ .class-page{ position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:28px; display:flex; flex-direction:column; gap:26px; } .cp-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .cp-back{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:12px; font-weight:600; font-size:.88rem; color:var(--text-2); background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform var(--ease), border-color var(--ease), color var(--ease), background var(--ease); } .cp-back:hover{ transform:translateX(-3px); color:var(--primary-600); border-color:#D7DEEA; } .cp-brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; } .cp-brand .brand-logo{ line-height:0; } .class-hero{ position:relative; overflow:hidden; display:flex; align-items:center; gap:28px; padding:32px; border-radius:var(--r-lg); color:#fff; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 90%, #fff), color-mix(in srgb, var(--accent) 64%, #000)); box-shadow:var(--shadow-lg); } .class-hero::after{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.14); } .ch-bp{ flex:0 0 auto; width:120px; height:120px; border-radius:24px; display:grid; place-items:center; background:rgba(255,255,255,.16); backdrop-filter:blur(2px); } .ch-bp img{ width:96px; height:96px; object-fit:contain; } .ch-info{ position:relative; z-index:1; } .ch-eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.85; } .ch-info h1{ font-size:2rem; font-weight:800; letter-spacing:-.02em; margin:4px 0 6px; } .ch-info p{ font-size:.95rem; color:rgba(255,255,255,.92); max-width:420px; } .ch-meta{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; } .ch-tag{ padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.26); font-size:.76rem; font-weight:600; } /* ============================================================ 18. ANIMACIJOS ============================================================ */ @keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } } @keyframes ringLoad{ from{ stroke-dashoffset:326.73; } to{ stroke-dashoffset:91.48; } } /* ============================================================ 19. RESPONSIVE ============================================================ */ /* Laptop */ @media (max-width:1180px){ .content-grid{ grid-template-columns:1fr; } .rail{ display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; align-items:start; } .ach-card{ grid-column:1 / -1; } } /* Tablet */ @media (max-width:1024px){ :root{ --sidebar-w:84px; } .sidebar{ padding:18px 10px; align-items:center; } .brand{ justify-content:center; padding:6px 0 14px; } .brand-text, .nav-section-title, .nav-link .label, .premium-card{ display:none; } .nav{ width:100%; } .nav-link{ justify-content:center; padding:12px 0; } .nav-ic{ width:auto; } } /* Hero stack */ @media (max-width:920px){ .hero{ flex-direction:column; align-items:flex-start; padding:30px; } .hero-illustration{ width:100%; } .graph-panel{ width:100%; max-width:380px; } .hero-left h1{ font-size:1.8rem; } .hero-sym, .hero-ring, .hero-tri{ display:none; } .class-hero{ flex-direction:column; text-align:center; } .ch-meta{ justify-content:center; } } /* Mobile */ @media (max-width:760px){ .topbar{ padding:12px 16px; gap:12px; } .user-meta{ display:none; } .content{ padding:18px 16px 30px; } .class-page{ padding:18px 16px 30px; } .rail{ grid-template-columns:1fr; } .ach-card{ grid-column:auto; } .stats-grid{ grid-template-columns:1fr 1fr; } } /* Small phones */ @media (max-width:420px){ .hero-left h1{ font-size:1.55rem; } .hero-actions{ width:100%; } .btn{ flex:1; text-align:center; } .classes-grid{ grid-template-columns:1fr 1fr; } .ch-bp{ width:96px; height:96px; } .ch-bp img{ width:76px; height:76px; } .stats-grid{ grid-template-columns:1fr; } } /* ============================================================ 20. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* ---------------- Prognozuojamas VBE/PUPP balas (gyvas skydelis) ---------------- */ .predict-widget{ display:flex; align-items:center; gap:14px; margin:0 0 22px; padding:14px 20px; border-radius:var(--r-lg); border:1.5px solid color-mix(in srgb, var(--primary) 30%, var(--border)); background:linear-gradient(120deg, color-mix(in srgb, var(--primary) 10%, var(--card)), color-mix(in srgb, var(--secondary) 6%, var(--card))); box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent) inset, 0 8px 24px color-mix(in srgb, var(--primary) 16%, transparent); animation:predict-glow 3.2s ease-in-out infinite; } .predict-widget[hidden]{ display:none; } .predict-icon{ font-size:1.6rem; line-height:1; flex-shrink:0; } .predict-body{ display:flex; flex-direction:column; gap:2px; min-width:0; } .predict-score{ font-size:1.02rem; font-weight:800; color:var(--text); } .predict-tip{ font-size:.86rem; color:var(--text-2); } .predict-cta{ margin-left:auto; flex-shrink:0; white-space:nowrap; text-decoration:none; font-weight:700; font-size:.86rem; color:#fff; padding:8px 16px; border-radius:999px; background:linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow:var(--shadow-primary); transition:transform var(--ease); } .predict-cta:hover{ transform:translateY(-1px); } .predict-cta[hidden]{ display:none; } @keyframes predict-glow{ 0%, 100%{ box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent) inset, 0 8px 24px color-mix(in srgb, var(--primary) 16%, transparent); } 50%{ box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent) inset, 0 8px 28px color-mix(in srgb, var(--primary) 32%, transparent); } } @media (prefers-reduced-motion: reduce){ .predict-widget{ animation:none; } } @media (max-width:640px){ .predict-widget{ flex-wrap:wrap; } .predict-cta{ margin-left:0; } } /* ---------------- Klasių skirtukai ir „netrukus" žymos ---------------- */ .grade-tabs{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 22px; } .grade-tabs .gtab{ display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border-radius:999px; text-decoration:none; font-weight:700; font-size:.9rem; color:var(--muted); background:var(--card); border:1.5px solid var(--border); transition:border-color var(--ease), color var(--ease), background var(--ease); } .grade-tabs .gtab:hover{ border-color:var(--brand, #4F46E5); color:var(--brand, #4F46E5); } .grade-tabs .gtab.is-now{ background:var(--brand, #4F46E5); border-color:var(--brand, #4F46E5); color:#fff; } .grade-tabs .gtab.is-soon{ opacity:.72; border-style:dashed; } span.gtab.is-soon{ opacity:.55; cursor:not-allowed; } a.gtab.is-soon:hover{ opacity:1; } .gtab-soon, .nav-soon{ font-size:.68rem; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--border); color:var(--muted); } .nav-link.is-soon{ opacity:.5; cursor:not-allowed; } .nav-link .nav-soon{ margin-left:auto; } /* Gyvai kraunamų temų kortelės */ .topics-loading{ color:var(--muted); font-size:.9rem; } .topic-card{ text-decoration:none; color:inherit; } .topic-emoji{ font-size:1.7rem; line-height:1; }