/* Dalykų puslapių stiliai (SEO Etapas 1, 2026-08-28). Bendri PENKIEMS puslapiams: /matematikos-korepetitorius, /lietuviu-kalbos-korepetitorius, /anglu-kalbos-korepetitorius, /chemijos-korepetitorius, /biologijos-korepetitorius. Kraunamas PO site.css. Kiekvienas puslapis gauna savo dalyko klasę (`d-mat`, `d-liet`, `d-ang`, `d-chem`, `d-bio`), o iš jos - akcentinė spalva `--akcentas`. Taip puslapiai skiriasi viena eilute, o ne atskirais stilių rinkiniais. SPALVŲ PADALIJIMAS (DESIGN.md „Mėlynos monopolio taisyklė"): dalyko spalva ATPAŽĮSTA (hero fonas, ženklas, avataras, rezultatų ženkleliai), mėlyna VEIKIA (visi mygtukai ir nuorodos). Iki 2026-08-31 korepetitoriaus kortelės mygtukas buvo dalyko spalvos - chemijai tai davė 3,74:1, biologijai 3,30:1 (baltas 14 px tekstas), t. y. žemiau WCAG 2.2 AA, o lietuvių puslapyje pagrindinis veiksmas buvo nudažytas sistemos klaidos raudoniu. Keičiant - paleisti ./versijos.sh (kešas savaitei, žr. B4). */ /* --akcentas-rgb reikalingas hero gradientui: rgba() su kintamuoju veikia tik tada, kai kintamajame guli patys komponentai, ne #hex. */ body.d-mat { --akcentas: #7C3AED; --akcentas-svelnus: #F5F3FF; --akcentas-tamsus: #6D28D9; --akcentas-rgb: 124,58,237; } body.d-liet { --akcentas: #DC2626; --akcentas-svelnus: #FEF2F2; --akcentas-tamsus: #B91C1C; --akcentas-rgb: 220,38,38; } body.d-ang { --akcentas: #0369A1; --akcentas-svelnus: #E0F2FE; --akcentas-tamsus: #075985; --akcentas-rgb: 3,105,161; } body.d-chem { --akcentas: #0D9488; --akcentas-svelnus: #F0FDFA; --akcentas-tamsus: #0F766E; --akcentas-rgb: 13,148,136; } body.d-bio { --akcentas: #16A34A; --akcentas-svelnus: #F0FDF4; --akcentas-tamsus: #15803D; --akcentas-rgb: 22,163,74; } /* ---------- Antraštė ---------- */ .dalyko-hero { padding: 176px 0 64px; /* Fonas dažomas dalyko spalva - tai identifikacija, ne veiksmas: iš kito kambario galo matyti, kuriame iš penkių puslapių esi. Alfa laikoma ties 0,13: tamsiausiame gradiento taške --ink-muted (#556074) tada duoda 4,6-5,3:1 visuose penkiuose dalykuose (žemiausia - anglų k., 4,61:1). */ background: radial-gradient(ellipse 60% 46% at 50% -10%, rgba(var(--akcentas-rgb), 0.13) 0%, transparent 62%), linear-gradient(180deg, var(--akcentas-svelnus) 0%, var(--akcentas-svelnus) 24%, var(--surface) 78%); text-align: center; } .dalyko-hero .h1 { max-width: 800px; margin: 0 auto; } .dalyko-hero .lead { max-width: 620px; margin: 22px auto 0; } .dalyko-zenklas { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 7px 15px; border-radius: 50px; /* Baltas fonas, ne --akcentas-svelnus: hero fonas dabar pats yra to paties atspalvio, tad ženklas ant jo tiesiog dingtų. */ background: #fff; border: 1px solid var(--line); color: var(--akcentas-tamsus); font-size: 13px; font-weight: 600; } .dalyko-hero .hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 36px; } /* ---------- Trumpi faktai po antrašte ---------- */ .faktai { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 46px; text-align: center; } .faktas { padding: 0 26px; border-left: 1px solid var(--line); } .faktas:first-child { border-left: 0; } .faktas strong { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--ink); } .faktas span { display: block; font-size: 14px; font-weight: 500; color: var(--ink-muted); margin-top: 7px; } /* ---------- Korepetitorių sąrašas ---------- */ /* Flex, ne grid: kai to dalyko korepetitorius vienas (o šiandien tai įprasta), grid'as jį paliktų kairėje su tuščiu stulpeliu dešinėje. DESIGN.md: nepilna kortelių eilė centruojama. */ .dalyko-mokytojai { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; } .dalyko-mokytojai > .mok-kort { flex: 1 1 340px; max-width: 460px; } .mok-kort { display: flex; flex-direction: column; gap: 16px; padding: 26px; } .mok-virsus { display: flex; align-items: center; gap: 14px; } .mok-av { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; color: #fff; /* Vientisas tamsusis atspalvis: ant jo guli balti inicialai, o šviesusis gradiento galas chemijai davė 3,7:1, biologijai - 3,3:1. */ background: var(--akcentas-tamsus); } .mok-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---------- Nuotrauka padidinama paspaudus (2026-08-31) ---------- Profilio nuotrauka saugoma 512x512 px, o kortelėje ilgai matėsi 56 px - veido praktiškai nesimatė. Dabar „Plačiau" atveria kortelę visą: kartu su aprašymu išauga ir nuotrauka. Pati nuotrauka yra atskiras mygtukas, nes „Plačiau" rodomas TIK ten, kur aprašymas nukirstas. Uzuomina po nuotrauka reikalinga todėl, kad apvalus 56 px paveikslėlis niekuo nepasako, jog jis spaudžiamas. */ .mok-foto { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; } button.mok-av { padding: 0; border: none; font-family: inherit; cursor: zoom-in; } button.mok-av:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .mok-kort.atverta button.mok-av { cursor: zoom-out; } .mok-av { transition: width 260ms var(--ease), height 260ms var(--ease), font-size 260ms var(--ease); } .mok-kort.atverta .mok-av { width: 132px; height: 132px; font-size: 34px; } /* Išskleidus antraštė virsta stulpeliu: 132 px nuotrauka šalia vardo palieka siauroje kortelėje ~110 px, ir vardas laužydavosi į dvi eilutes. */ .mok-kort.atverta .mok-virsus { flex-direction: column; align-items: flex-start; gap: 12px; } .mok-av-uzuomina { font-size: 11px; font-weight: 500; line-height: 1; color: var(--ink-soft); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .mok-av { transition: none; } } /* Vardas yra antraštė, ne : kitaip ekrano skaitytuvo antraščių sąraše korepetitorių nėra visai ir sąrašo naršyti neįmanoma. */ .mok-vardas h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.3; } .mok-klases { display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-top: 5px; } .mok-bio { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Išskleistas aprašymas ir jo mygtukas. Skleidžiama vietoje, be lango - skaitymui pertraukos nereikia. */ .mok-bio.atverta { -webkit-line-clamp: unset; line-clamp: unset; display: block; } .mok-daugiau { /* Vidinė paraštė su neigiama išorine: taikinys ~42 px aukščio, o išdėstymas nepasikeičia (buvo 46x19,5 px - pusė WCAG minimumo). */ align-self: flex-start; margin: -18px -14px 0; padding: 12px 14px; background: none; border: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--blue); cursor: pointer; } .mok-daugiau:hover { text-decoration: underline; } .mok-daugiau:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; } .mok-apacia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); } .mok-kainos { display: flex; flex-direction: column; gap: 2px; } /* Sprendimo taškas: pirmas skaičius, kurį tėvas pamato, turi būti tikrasis. Iki 2026-08-31 kortelė rodė tik „nuo 23 €", nors siūloma vertė yra 0 €. */ .mok-nemokama { font-size: 13px; font-weight: 700; color: #15803D; } .mok-kaina { font-size: 13px; font-weight: 500; color: var(--ink-soft); } .mok-past { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-soft); } .mok-cta { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 12px 20px; border-radius: 50px; text-decoration: none; font-size: 14px; font-weight: 600; color: #fff; background: var(--blue); transition: background 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease); } .mok-cta:hover { background: var(--blue-deep); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(37,99,235,0.28); } .mok-zinute { flex: 1 1 100%; text-align: center; padding: 48px 0; margin: 0 auto; max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--ink-muted); } .mok-zinute a { color: var(--blue); font-weight: 600; } /* ---------- Kainos santrauka ---------- */ .kainos-juosta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .kaina-kort { padding: 30px; } .kaina-kort h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; color: var(--ink); } .kaina-suma { font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--ink); } .kaina-suma span { font-size: 15px; font-weight: 500; color: var(--ink-muted); } .kaina-eil { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; } .kaina-eil li { font-size: 15px; color: var(--ink-muted); display: flex; justify-content: space-between; gap: 12px; } .kaina-eil li b { color: var(--ink); font-weight: 600; } .kainos-past { text-align: center; font-size: 15px; color: var(--ink-muted); margin-top: 30px; } .kainos-past a { color: var(--blue); font-weight: 600; } /* ---------- DUK (perimta iš index.html) ---------- */ .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq { background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); } .faq[open] { border-color: #BFDBFE; box-shadow: 0 6px 24px rgba(37,99,235,0.07); } .faq summary { list-style: none; cursor: pointer; padding: 22px 26px; font-size: 17px; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 18px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; flex-shrink: 0; width: 10px; height: 10px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform 250ms var(--ease); } .faq[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--blue); } .faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 16px; } .faq-body { padding: 0 26px 24px; max-width: 74ch; font-size: 16px; line-height: 1.7; color: var(--ink-muted); } .faq-body a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* ---------- Baigiamasis CTA ir kryžminės nuorodos ---------- */ .cta-band { background: var(--ink); color: #fff; text-align: center; padding: 96px 0; } .cta-band .h2 { color: #fff; max-width: 720px; margin: 0 auto; } .cta-band .lead { color: rgba(255,255,255,0.62); max-width: 540px; margin: 22px auto 0; } .cta-band .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; } /* Kryžminės nuorodos į kitus dalykus stovi PO baigiamojo CTA, ne prieš jį: penki išėjimai tiesiai prieš vienintelį veiksmą reiškė, kad paskutinė mintis prieš „Registruotis" buvo „gal man reikia ko nors kito". */ .kiti-dalykai-skiltis { padding: 62px 0; text-align: center; } .kiti-dalykai-skiltis .h3 { color: var(--ink-muted); font-weight: 600; margin-bottom: 20px; } .kiti-dalykai { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; } .kitas-dalykas { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 50px; text-decoration: none; border: 1px solid var(--line); background: #fff; color: var(--ink-muted); font-size: 15px; font-weight: 500; transition: border-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease); } .kitas-dalykas:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); } .kitas-dalykas i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } @media (max-width: 900px) { .kainos-juosta { grid-template-columns: 1fr; } } /* Judesys - tik atsakas į veiksmą, tad jį galima išjungti visą. site.css turi savo atitikmenį; čia dengiami šio failo elementai. */ @media (prefers-reduced-motion: reduce) { .mok-cta, .card, .kitas-dalykas, .faq, .faq summary::after { transition: none !important; } .mok-cta:hover, .kitas-dalykas:hover { transform: none; } } @media (max-width: 767px) { .dalyko-hero { padding: 138px 0 44px; } .mok-apacia { align-items: stretch; } .mok-cta { width: 100%; justify-content: center; } .faktai { margin-top: 34px; } .faktas { padding: 0 16px; } .faktas strong { font-size: 24px; } .cta-band { padding: 68px 0; } } /* Valiutos paaiškinimo kortelė kainų skiltyje (chemija, biologija - jos apmokamos molekulėmis, tad be paaiškinimo dvi valiutos atrodytų kaip klaida). Gyvena kainų tinklelyje šalia kainų kortelės. */ .valiuta-kort { background: var(--akcentas-svelnus); border-color: var(--akcentas); } .valiuta-kort strong { color: var(--ink); font-weight: 600; } .valiuta-juosta { padding: 24px 28px; margin-bottom: 22px; } .valiuta-juosta h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 17px; font-weight: 600; color: var(--ink); } .valiuta-juosta h3 i { color: var(--akcentas); flex-shrink: 0; } .valiuta-juosta p { margin: 0; max-width: 74ch; font-size: 15px; line-height: 1.65; color: var(--ink-muted); } /* Kainų ir valiutos kortelės nespaudžiamos, tad .card pakilimas ant jų yra klaidingas afordansas (DESIGN.md: „Šešėlis - atsakas [į veiksmą]"). */ .kaina-kort:hover, .valiuta-kort:hover, .valiuta-juosta:hover { transform: none; box-shadow: none; } /* Rezultatai kortelėje (tutors.egzaminai) */ .mok-egz { display: flex; flex-wrap: wrap; gap: 7px; } .mok-egz-zenklas { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 50px; background: var(--akcentas-svelnus); color: var(--akcentas-tamsus); font-size: 12.5px; font-weight: 500; } .mok-egz-zenklas b { font-weight: 700; margin-left: 4px; } /* ---------- Atrankos kelias (perimta iš index.html) ---------- Keturi žingsniai stovi VIRŠ korepetitorių sąrašo, tad tuščias sąrašas nebelieka puslapiu be jokio įrodymo. Stiliai sąmoningai identiški index.html - tai ta pati juosta, ne jos variantas. */ .kelias { list-style: none; margin: 0 0 52px; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* Linija brėžiama nuo ikonos iki KITOS ikonos, ne per visą plotį - kitaip ji pratįsta už paskutinės į tuščią vietą. */ .kelias li:not(:last-child)::before { content: ''; position: absolute; top: 23px; left: 58px; right: -28px; height: 1px; background: var(--line); } .kelias li { position: relative; } .kelias-ico { position: relative; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 16px; flex-shrink: 0; background: #fff; border: 1px solid var(--line); color: var(--blue); margin-bottom: 18px; } .kelias li:last-child .kelias-ico { color: #15803D; background: #F0FDF4; border-color: #BBF7D0; } .kelias strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; } .kelias-txt { display: block; font-size: 14px; line-height: 1.6; color: var(--ink-muted); max-width: 34ch; } /* Žingsniai centruojami: antraštė ir įžanga virš kelio centruotos, o patys keturi žingsniai stovėjo kairėje - blokas nesidalijo su jais ta pačia ašimi. Sucentravus ikoną reikia perbrėžti ir jungiamąją liniją: ji nebeprasideda nuo kairiojo krašto, o jungia IKONŲ CENTRUS. Ikona 46 px, tad nuo `50% + 23px` plius 8 px oro; dešinysis galas peršoka į kitą stulpelį per `tarpas + pusę stulpelio - 31px`, o tarpas 28 px, tad `3px - 50%`. Tik nuo 901 px - žemiau kelias virsta vertikaliu sąrašu su ikona kairėje, ir ten centruoti nėra ko. */ @media (min-width: 901px) { .kelias li { text-align: center; } .kelias-ico, .kelias-txt { margin-left: auto; margin-right: auto; } .kelias li:not(:last-child)::before { left: calc(50% + 31px); right: calc(3px - 50%); } } /* ---------- Kas valdo platformą (perimta iš index.html) ---------- Tėvas, radęs tuščią sąrašą, iki 2026-08-31 puslapyje neturėjo nei el. pašto, nei telefono - jie gulėjo tik poraštėje, dviem skiltimis žemiau. */ .mok-atsakingas { max-width: 70ch; margin: 34px auto 0; text-align: center; font-size: 14px; line-height: 1.7; color: var(--ink-muted); } .mok-atsakingas strong { color: var(--ink); font-weight: 600; } .mok-atsakingas a { color: var(--blue); font-weight: 600; text-underline-offset: 2px; } /* ---------- Virtualios klasės kadras ---------- */ .klase-blokas { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 44px; align-items: center; } .mock { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; } .mock-bar { display: flex; align-items: center; gap: 6px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #F8FAFC; } .mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E2E8F0; display: block; } .mock-bar span { margin-left: 10px; font-size: 12px; font-weight: 500; color: var(--ink-soft); } .mock img { display: block; width: 100%; height: auto; } .mock figcaption { padding: 12px 18px; border-top: 1px solid var(--line); background: #F8FAFC; font-size: 13px; font-weight: 500; color: var(--ink-soft); } .klase-sarasas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; } .klase-sarasas li { display: flex; align-items: flex-start; gap: 16px; } .klase-sarasas .kelias-ico { margin-bottom: 0; } .klase-sarasas strong { display: block; font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 5px; } .klase-sarasas li > span:last-child { font-size: 15px; line-height: 1.6; color: var(--ink-muted); } /* Mikrokopija po baigiamuoju veiksmu - ji atsako į klausimą, kuris kyla pirštui jau kabant virš mygtuko. */ .cta-past { margin: 20px 0 0; font-size: 13px; color: rgba(255,255,255,0.62); } @media (max-width: 1023px) { .klase-blokas { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 900px) { .kelias { grid-template-columns: 1fr; gap: 22px; margin-bottom: 40px; } .kelias li:not(:last-child)::before { top: 46px; bottom: -22px; left: 23px; right: auto; width: 1px; height: auto; } .kelias li { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; align-items: center; } .kelias-ico { grid-row: 1 / 3; margin-bottom: 0; } .kelias strong { margin-bottom: 2px; } .kelias-txt { grid-column: 2; max-width: none; } } /* ══════════════════════════════════════════════════════════════════════════ BENDRAS KATALOGAS /mokytojai (2026-08-31) Puslapis naudoja tą patį dalykas.js piešėją, tik be . Iki šiol jis turėjo savo realizaciją ir todėl atsiliko nuo dalykų puslapių. ══════════════════════════════════════════════════════════════════════════ */ /* Dalykų puslapyje akcentą duoda klasė, o bendrame kataloge vienos spalvos nėra - akcentą nustato pati kortelė pagal pirmą dalyką. Kintamieji tie patys, tad visa kita (avataras, ženkleliai) veikia be pakeitimų. */ body.d-visi { --akcentas: #2563EB; --akcentas-svelnus: #EFF6FF; --akcentas-tamsus: #1D4ED8; --akcentas-rgb: 37,99,235; } .mok-kort.s-mat { --akcentas: #7C3AED; --akcentas-svelnus: #F5F3FF; --akcentas-tamsus: #6D28D9; } .mok-kort.s-liet { --akcentas: #DC2626; --akcentas-svelnus: #FEF2F2; --akcentas-tamsus: #B91C1C; } .mok-kort.s-ang { --akcentas: #0369A1; --akcentas-svelnus: #E0F2FE; --akcentas-tamsus: #075985; } .mok-kort.s-chem { --akcentas: #0D9488; --akcentas-svelnus: #F0FDFA; --akcentas-tamsus: #0F766E; } .mok-kort.s-bio { --akcentas: #16A34A; --akcentas-svelnus: #F0FDF4; --akcentas-tamsus: #15803D; } /* Kuriuos dalykus dėsto. Dviejų tonų taisyklė: spalva, tapusi tekstu, visada tamsioji - #DC2626 ant #FEF2F2 davė 4,41:1 ir krito žemiau AA. */ .mok-dalykai { display: flex; flex-wrap: wrap; gap: 6px; } .mok-dalykas { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 50px; font-size: 12px; font-weight: 500; background: var(--akcentas-svelnus); color: var(--akcentas-tamsus); } .mok-dalykas.s-mat { background: #F5F3FF; color: #6D28D9; } .mok-dalykas.s-liet { background: #FEF2F2; color: #B91C1C; } .mok-dalykas.s-ang { background: #E0F2FE; color: #075985; } .mok-dalykas.s-chem { background: #F0FDFA; color: #0F766E; } .mok-dalykas.s-bio { background: #F0FDF4; color: #15803D; } /* ---------- Filtrai ---------- */ .mok-filtrai[hidden] { display: none; } .mok-filtru-eil { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; } .mok-filtru-eil + .mok-filtru-eil { margin-top: 12px; } /* Antraštėlių nėra (DESIGN.md): buvusi 12 px didžiųjų raidžių etiketė su 0.12em tarpu pakeista įprasta etikete. */ .mok-filtru-zyma { font-size: 13px; font-weight: 600; color: var(--ink-muted); padding-right: 6px; } .mok-filtras { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-muted); background: #fff; border: 1px solid var(--line); border-radius: 50px; padding: 11px 18px; cursor: pointer; transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease); } .mok-filtras:hover { border-color: var(--blue); color: var(--blue); } .mok-filtras:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* Pasirinkimą žymi TAMSUSIS tonas, ne mėlyna ir ne dalyko spalva (DESIGN.md, 2026-08-31). Senoji versija dažė mygtuką dalyko spalva, ir balta ant #16A34A davė 3,30:1, ant #0D9488 - 3,74:1: pasirinkta būsena buvo vienintelė vieta puslapyje, krentanti žemiau AA. */ .mok-filtras.aktyvus { background: var(--ink); border-color: var(--ink); color: #fff; } .mok-taskas { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .mok-sk { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 50px; background: #F1F5F9; color: #475569; font-size: 12px; font-weight: 700; } .mok-filtras.aktyvus .mok-sk { background: rgba(255,255,255,0.18); color: #fff; } /* Dalykas, kurio korepetitorių dar neturime: matomas, bet tylesnis, ir paspaudus atsidaro to dalyko puslapis, ne tuščias sąrašas. */ .mok-filtras.tuscias { color: var(--ink-soft); background: transparent; border-style: dashed; } .mok-filtras.tuscias:hover { background: #fff; border-style: solid; } .mok-filtras.tuscias .mok-taskas { opacity: 0.55; } /* Klasė, kurios pasirinktas dalykas neturi (chemija ir biologija - nuo 5 kl.) */ .mok-filtras[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; } .mok-filtras[aria-disabled="true"]:hover { border-color: var(--line); color: var(--ink-muted); } /* Kiek korepetitorių matoma. Iki 2026-08-31 filtravimas nepranešdavo apie save niekaip: nei skaičiaus, nei aria-live, o tuščias derinys palikdavo 0 px aukščio tinklelį. */ .mok-rezultatai { text-align: center; font-size: 14px; color: var(--ink-soft); margin: 22px 0 24px; } .mok-rezultatai:empty { margin: 0; } /* Tuščios būsenos veiksmai - be jų filtras buvo aklavietė */ .mok-zinute-veiksmai { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; } .mok-atstatyti, .mok-zinute-nuoroda { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 20px; border-radius: 50px; border: 1px solid var(--line); background: #fff; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; transition: border-color 180ms var(--ease); } .mok-atstatyti:hover, .mok-zinute-nuoroda:hover { border-color: var(--ink-soft); } /* Specifiškumas: dalykas.css `.mok-zinute a` (0,1,1) nustelbdavo mygtuko spalvą (0,1,0), ir du vienodo svorio mygtukai atrodydavo skirtingi. */ .mok-zinute .mok-zinute-nuoroda { color: var(--ink); } /* Nemokamos pamokos pažadas rodomas tik tada, kai jis TIESA. Svečias (be zs-auth) mato iškart - jis dar neturi paskyros, tad pirma pamoka tikrai nemokama. Prisijungusiam laukiame, kol vart-meniu.js perskaitys profilį: mokiniui, jau panaudojusiam bandomąją, tai būtų melas apie kainą. Geriau parodyti sekunde vėliau, nei parodyti neteisingai. */ .zs-auth .mok-nemokama { display: none; } .zs-auth.zs-bandomoji-yra .mok-nemokama { display: inline; } /* Juosta prisijungusiam mokiniui, dar turinčiam bandomąją. Perkelta iš /korepetitoriai (2026-08-31), kai tas puslapis panaikintas - jis buvo antra to paties sąrašo realizacija. */ .mok-bandomoji { display: none; align-items: center; gap: 12px; margin: 0 0 28px; padding: 16px 20px; border-radius: var(--radius-card); background: #F0FDF4; border: 1px solid #BBF7D0; color: var(--ink); font-size: 15px; line-height: 1.5; } .zs-bandomoji-yra .mok-bandomoji { display: flex; } .mok-bandomoji i { flex-shrink: 0; color: #15803D; } .mok-bandomoji b { font-weight: 700; } @media (max-width: 767px) { /* Telefone dešimt mygtukų susilaužydavo į penkias eilutes ir nustumdavo pirmą korepetitoriaus veidą už ~900 px. Slenkama juosta - tas pats sprendimas, kurį svetainė jau naudoja navigacijai. */ .mok-filtru-eil { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; } .mok-filtru-eil::-webkit-scrollbar { display: none; } .mok-filtru-eil .mok-filtras { flex-shrink: 0; } .mok-filtru-zyma { position: sticky; left: 0; z-index: 1; flex-shrink: 0; background: var(--surface); padding-right: 10px; } } @media (prefers-reduced-motion: reduce) { .mok-filtras, .mok-atstatyti, .mok-zinute-nuoroda { transition: none !important; } }