:root { color-scheme: light; --bg: #ffffff; --fg: #1a1a1a; --muted: #6b6b6b; --accent: #2563eb; --accent-dark: #1d4ed8; --border: #e2e2e2; --card: #f7f7f8; } * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.5; } .wrap { max-width: 720px; margin: 0 auto; padding: 48px 20px 80px; } h1 { font-size: 2rem; margin-bottom: 4px; } h2 { font-size: 1.25rem; margin-top: 40px; } p.lead { color: var(--muted); font-size: 1.05rem; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-top: 20px; } .btn { display: inline-block; background: var(--accent); color: #fff; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; border: none; cursor: pointer; font-size: 1rem; } .btn:hover { background: var(--accent-dark); } .btn.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } input[type="number"], input[type="email"], input[type="text"] { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; width: 100%; max-width: 320px; } label { display: block; font-weight: 600; margin-bottom: 6px; } .field { margin-top: 18px; } .field:first-child { margin-top: 0; } .field .hint { margin-top: 4px; color: var(--muted); font-size: 0.9rem; } .status { margin-top: 16px; min-height: 1.4em; } .status.error { color: #b91c1c; } .status.ok { color: #15803d; } code.key { display: block; background: #111827; color: #e5e7eb; padding: 14px; border-radius: 8px; word-break: break-all; font-size: 0.9rem; margin: 12px 0; } footer { margin-top: 60px; color: var(--muted); font-size: 0.85rem; } /* ---- Kalbos perjungimas (lang.js): numatyta EN (rodoma be JS, žr. html[data-active-lang="en"] žemiau kiekviename puslapyje statiškai), perjungus – lang.js pakeičia reikšmę. SVARBU: NENAUDOTI display:revert JS pusėje rodymui – jis atšauktų ir šio failo display taisykles tam elementui (pvz. label{display:block}), ne tik šią slėpimo taisyklę (žr. istoriją – dėl to susigrūsdavo išdėstymas). Šis html[data-active-lang] būdas veikia grynai per įprastą CSS kaskadą, be JS inline stilių. */ html[data-active-lang="en"] [data-lang="lt"] { display: none; } html[data-active-lang="lt"] [data-lang="en"] { display: none; } /* ---- Viršutinė juosta (sticky): logotipas/nuoroda namo, greiti veiksmai, kalbos perjungimas. position:sticky (ne fixed) – lieka normaliame dokumento sraute, kol nepasiekiamas puslapio viršus, tada "prilimpa"; jokio papildomo body padding skaičiavimo nereikia. ---- */ .topbar { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); } .topbar-inner { max-width: 720px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; /* flex-end (ne space-between): su VIENU elementu (mygtukų grupė – jokio logotipo teksto) space-between elgtųsi kaip flex-start (stumtų į kairę). flex-end sustumia grupę į dešinę, su gutter'iu nuo krašto (žr. padding aukščiau + max-width/margin:auto), ne prilipusią prie paties viewport krašto. */ justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .btn.small { padding: 8px 16px; font-size: 0.9rem; } /* Kalbos perjungimas: ABI kalbos rodomos savo pačių vardu ("English" / "Lietuvių", niekada neverčiamos ir niekada vaizduojamos vėliavėlėmis – vėliavėlė žymi šalį, ne kalbą, tad gali klaidinti (pvz. anglų k. nėra vienos šalies kalba); be to, viena mygtuko etiketė "Lietuviškai" ang. puslapyje buvo nesuprantama, jei vartotojas nemoka lietuviškai. Dabar abu variantai visada matomi, aktyvus – paryškintas ir nespaudžiamas. */ .lang-switch { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; } .lang-switch-sep { color: var(--border); } .lang-switch button { background: none; border: none; padding: 4px 2px; font-size: 0.85rem; cursor: pointer; color: var(--muted); } .lang-switch button:hover { color: var(--accent); } .lang-switch button.active { color: var(--fg); font-weight: 600; cursor: default; } .lang-switch button.active:hover { color: var(--fg); } ul.features { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 14px; } ul.features li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; } ul.features li .ico { flex: 0 0 auto; font-size: 1.1rem; line-height: 1.45; } ul.features li b { display: block; } ul.features li span.muted { color: var(--muted); font-size: 0.95rem; }