/* ==================================================================== Sferinis Kinas® — bendra dizaino sistema Spalvos iš Brandbook 2025: Dark Purple #12031C pagrindinis tamsus fonas White Smoke #F5F5F5 pagrindinis šviesus fonas Rebecca Purple #5E40A4 akcentas Crayola Blue #3E7BFF akcentas Mauve #C3A1FF akcentas (tamsiam fone) Icterine #F8FF51 CTA / dėmesio Brilliant Rose #FE49A6 akcentas Tema: pagal sistemos nustatymą. Rankinis pasirinkimas viršesnis (data-theme atributas ant ). ==================================================================== */ /* ---------- ŠVIESI (numatytoji, jei sistema šviesi) ---------- */ :root, :root[data-theme="light"]{ --bg:#EFEFF2; --card:#FFFFFF; --card2:#F5F5F7; --card3:#EDEBF2; --line:#E3E1E9; --line2:#C9C4D6; --tx:#12031C; --tx2:#5A5266; --tx3:#8B8496; --acc:#5E40A4; --accH:#4A3186; --accSoft:#EFEAFB; --acc2:#3E7BFF; --onAcc:#FFFFFF; /* Hover — Icterine, ta pati visur ir abiejose temose */ --hovBg:#F8FF51; --hovBd:#CBD400; --hovTx:#12031C; /* Seansų poreikio blokas */ --spBg:#F3EFFE; --spBd:#5E40A4; --spTx:#5E40A4; --ok:#0E6E3D; --okSoft:#E4F5EC; --warn:#9A6400; --warnSoft:#FDF3DC; --bad:#C62F2F; --badSoft:#FCE9E9; --priceBg:linear-gradient(135deg,#F3EFFE,#FFFFFF); --priceLine:#DFDBFE; --shadow:0 1px 2px rgba(18,3,28,.05), 0 2px 8px rgba(18,3,28,.04); --shadowUp:0 4px 14px rgba(18,3,28,.10); --logoInvert:0; } /* ---------- TAMSI ---------- */ :root[data-theme="dark"]{ --bg:#12031C; --card:#1C0A28; --card2:#251133; --card3:#2E1840; --line:#37204A; --line2:#523669; --tx:#F5F5F5; --tx2:#B4A7C0; --tx3:#7E7089; --acc:#C3A1FF; --accH:#D6BEFF; --accSoft:#2A1440; --acc2:#6B9BFF; --onAcc:#12031C; --hovBg:#F8FF51; --hovBd:#CBD400; --hovTx:#12031C; --spBg:#2E1840; --spBd:#F8FF51; --spTx:#F8FF51; --ok:#3FD37F; --okSoft:#14301F; --warn:#F8FF51; --warnSoft:#2E2A10; --bad:#FF7A7A; --badSoft:#361618; --priceBg:linear-gradient(135deg,#2A1440,#1C0A28); --priceLine:#4A2E6B; --shadow:none; --shadowUp:0 4px 18px rgba(0,0,0,.45); --logoInvert:0; } /* Sistemos nustatymas — kai vartotojas dar nepasirinko rankiniu būdu */ @media (prefers-color-scheme: dark){ :root:not([data-theme]){ --bg:#12031C; --card:#1C0A28; --card2:#251133; --card3:#2E1840; --line:#37204A; --line2:#523669; --tx:#F5F5F5; --tx2:#B4A7C0; --tx3:#7E7089; --acc:#C3A1FF; --accH:#D6BEFF; --accSoft:#2A1440; --acc2:#6B9BFF; --onAcc:#12031C; --spBg:#2E1840; --spBd:#F8FF51; --spTx:#F8FF51; --ok:#3FD37F; --okSoft:#14301F; --warn:#F8FF51; --warnSoft:#2E2A10; --bad:#FF7A7A; --badSoft:#361618; --priceBg:linear-gradient(135deg,#2A1440,#1C0A28); --priceLine:#4A2E6B; --shadow:none; --shadowUp:0 4px 18px rgba(0,0,0,.45); } } /* ==================== PAGRINDAS ==================== */ *{box-sizing:border-box;margin:0;padding:0} body{ background:var(--bg); color:var(--tx); font-family:'TT Norms Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; font-size:14px; line-height:1.45; padding:14px 16px 24px; -webkit-font-smoothing:antialiased; } .wrap{max-width:1420px;margin:0 auto} /* ==================== ANTRAŠTĖ ==================== */ header{ display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:12px;margin-bottom:14px; } .brand{display:flex;align-items:center;gap:12px;min-width:0} .brand img{height:30px;width:auto;display:block;flex:none} .brand .txt h1{font-size:17px;font-weight:600;letter-spacing:-.2px;line-height:1.2} .brand .txt p{color:var(--tx2);font-size:12px;margin-top:2px} h1{font-size:17px;font-weight:600;letter-spacing:-.2px} .hdRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .who{font-size:12px;color:var(--tx2);white-space:nowrap} .lock{ font-size:10.5px;font-weight:700;letter-spacing:.2px; color:var(--warn);background:var(--warnSoft); padding:5px 10px;border-radius:20px;white-space:nowrap; } /* ==================== KORTELĖS ==================== */ .card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:15px 16px; margin-bottom:14px; box-shadow:var(--shadow); } .card:last-child{margin-bottom:0} .card h2{ font-size:11px;text-transform:uppercase;letter-spacing:.7px; color:var(--tx2);font-weight:700;margin-bottom:12px; } /* ==================== FORMOS ==================== */ label{display:block;font-size:12.5px;color:var(--tx2);margin-bottom:5px} label .req{color:var(--bad);font-weight:700} label .opt{color:var(--tx3);font-size:11px} input[type=text],input[type=number],input[type=date], input[type=email],input[type=password],select,textarea{ width:100%; background:var(--card2); border:1px solid var(--line); color:var(--tx); padding:8px 11px; border-radius:8px; font-size:14px; font-family:inherit; transition:border-color .12s, background .12s, box-shadow .12s; } input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover{ border-color:var(--line2); } input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--accSoft); } input.err{border-color:var(--bad)} input::placeholder,textarea::placeholder{color:var(--tx3)} select{cursor:pointer} /* ==================== MYGTUKAI ==================== Hover privalo būti akivaizdus — anksčiau keitėsi tik rėmelio atspalvis, todėl atrodė, kad nieko nevyksta. */ button{font-family:inherit;cursor:pointer} button:disabled{opacity:.5;cursor:not-allowed} .btn{ width:100%; background:var(--acc); border:1px solid var(--acc); color:var(--onAcc); padding:11px 16px; border-radius:8px; font-size:14.5px; font-weight:600; transition:background .14s, transform .08s, box-shadow .14s; } .btn:hover:not(:disabled){background:var(--hovBg);border-color:var(--hovBd);color:var(--hovTx);box-shadow:var(--shadowUp)} .btn:active:not(:disabled){transform:translateY(1px);box-shadow:none} .btn.done{background:var(--ok);border-color:var(--ok);color:#fff} .btn.fail{background:var(--bad);border-color:var(--bad);color:#fff} .btn.sec{background:var(--card2);border-color:var(--line);color:var(--tx2)} .btn.sec:hover:not(:disabled){background:var(--hovBg);border-color:var(--hovBd);color:var(--hovTx)} .btn.ok{background:var(--ok);border-color:var(--ok);color:#fff} .btn.ok:hover:not(:disabled){filter:brightness(1.08)} .btn.bad{background:transparent;border-color:var(--bad);color:var(--bad)} .btn.bad:hover:not(:disabled){background:var(--badSoft)} .btn.sm{padding:6px 12px;font-size:12.5px;width:auto} /* CTA — Icterine, kaip „Registruotis" svetainėje. Spalvos fiksuotos abiem temoms: geltona turi šviesti vienodai. Užvedus tampa Rebecca Purple — brand akcentas. */ .btn.cta{ background:#F8FF51; /* Tamsesnis geltonas kraštas — šviesioje temoje geltona ant pilkšvo fono turi beveik vienodą šviesumą, be krašto mygtukas „ištirptų". */ border-color:#CBD400; color:#12031C; font-weight:700; box-shadow:0 2px 12px rgba(248,255,81,.40); transition:background .15s, color .15s, border-color .15s, box-shadow .15s; } .btn.cta:hover:not(:disabled){ background:#5E40A4; border-color:#5E40A4; color:#F5F5F5; box-shadow:0 3px 14px rgba(94,64,164,.45); } .btn.cta:active:not(:disabled){transform:translateY(1px);box-shadow:none} /* Tekstinės nuorodos antraštėje */ .lnk{ background:none;border:none;color:var(--tx2); font-size:12px;text-decoration:underline;padding:2px 4px;border-radius:5px; transition:color .12s, background .12s; } .lnk:hover{background:var(--hovBg);border-color:var(--hovBd);color:var(--hovTx);text-decoration:none} .themeBtn{ background:var(--card);border:1px solid var(--line);color:var(--tx2); width:34px;height:32px;border-radius:8px;font-size:15px;line-height:1; transition:border-color .12s, background .12s, color .12s; } .themeBtn:hover{background:var(--hovBg);border-color:var(--hovBd);color:var(--hovTx)} /* ==================== SEGMENTUOTI MYGTUKAI ==================== */ .seg{display:flex;gap:5px;flex-wrap:wrap} .seg button{ flex:1;min-width:80px; background:var(--card2); border:1px solid var(--line); color:var(--tx2); padding:8px 8px; border-radius:8px; font-size:13.5px; transition:background .12s, border-color .12s, color .12s; } .seg button:hover:not(.on){background:var(--hovBg);border-color:var(--hovBd);color:var(--hovTx)} .seg button.on{background:var(--acc);border-color:var(--acc);color:var(--onAcc);font-weight:600} .seg button.on:hover{background:var(--accH);border-color:var(--accH)} /* ==================== TABAI ==================== */ .tabs{display:flex;gap:5px;margin-bottom:14px;flex-wrap:wrap} .tabs button{ background:var(--card);border:1px solid var(--line);color:var(--tx2); padding:8px 15px;border-radius:8px;font-size:13.5px; transition:background .12s, border-color .12s, color .12s; } .tabs button:hover:not(.on){background:var(--hovBg);border-color:var(--hovBd);color:var(--hovTx)} .tabs button.on{background:var(--acc);border-color:var(--acc);color:var(--onAcc);font-weight:600} /* ==================== ŽYMOS ==================== */ .pill{ display:inline-block;padding:2px 8px;border-radius:20px; font-size:10.5px;font-weight:700;letter-spacing:.2px; } .pill.ok{background:var(--okSoft);color:var(--ok)} .pill.warn{background:var(--warnSoft);color:var(--warn)} .pill.bad{background:var(--badSoft);color:var(--bad)} .pill.gray{background:var(--card3);color:var(--tx2)} .pill.acc{background:var(--accSoft);color:var(--acc)} /* ==================== PASTABOS ==================== */ .note{ font-size:12px;color:var(--tx2);margin-top:8px;padding:8px 11px; background:var(--accSoft);border-left:2px solid var(--acc);border-radius:5px; } .note.bad{background:var(--badSoft);border-left-color:var(--bad);color:var(--bad)} .note.warn{background:var(--warnSoft);border-left-color:var(--warn);color:var(--warn)} .hint{font-size:11px;color:var(--tx3);margin-top:4px} /* ==================== LENTELĖS ==================== */ table{width:100%;border-collapse:collapse;font-size:13px} th{ text-align:left;color:var(--tx2);font-weight:700;font-size:10.5px; text-transform:uppercase;letter-spacing:.5px; padding:7px 9px;border-bottom:1px solid var(--line); } td{padding:8px 9px;border-bottom:1px solid var(--line);vertical-align:middle} tbody tr{transition:background .1s} tbody tr:hover{background:var(--card2)} tr:last-child td{border-bottom:none} .num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} /* ==================== MODALAS ==================== */ .modal{ position:fixed;inset:0;background:rgba(18,3,28,.72); display:none;align-items:center;justify-content:center; padding:20px;z-index:50;backdrop-filter:blur(3px); } .modal.on{display:flex} .modal .inner{ background:var(--card);border:1px solid var(--line);border-radius:14px; padding:22px;max-width:820px;width:100%;max-height:88vh;overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.35); } /* ==================== SMULKMENOS ==================== */ .hide{display:none!important} .muted{color:var(--tx2);font-size:12px} .right{text-align:right} .flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .sp{justify-content:space-between} .mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:12px} footer{margin-top:18px;font-size:11px;color:var(--tx3);text-align:center} input[type=checkbox]{ width:16px;height:16px;accent-color:var(--acc);cursor:pointer;flex:none; } /* Slinkties juosta */ *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px} *::-webkit-scrollbar-thumb:hover{background:var(--acc)} @media (prefers-reduced-motion: reduce){ *{transition:none!important} }