/* ========================================================================= uabtoras.lt v2 — dizaino sistema (T-007) Tokenai ir apribojimai: CLAUDE.md §4 · Kokybės grindys: §5 Kryptis: kelio ženklų ir transporto liverijos kalba. Ne „modernus startup". Auditorija renkasi vežėją pagal reputaciją ir telefono numerį, todėl viskas tarnauja dviem veiksmams: SKAMBINTI ir UŽSAKYTI. KONTRASTAS — pamatuota, ne spėta (T-007, WCAG 2.1): ink/white 18.20 ink/surface 16.37 steel/white 5.51 steel/surface 4.96 motorway/white 11.39 white/motorway 11.39 ink/signal 8.50 white/ok 5.35 white/alert 6.54 signal/motorway 5.32 signal/ink 8.50 signal-press/ink 6.83 motorway-press/paper 13.44 TRYS PAMATUOTI DRAUDIMAI: 1. white ant signal = 2.14 → CTA tekstas visada --ink, NIEKADA baltas 2. signal ant white = 2.14, ant surface = 1.93 → gintarinė NEGALI būti tekstas ar plona UI riba ant šviesaus fono (reikia 3.0) 3. steel ant motorway = 2.07 → antrinis tekstas header'yje/footer'yje yra --surface, ne --steel Iš 2 seka, kad `--signal` gyvena tik dviejose vietose: kaip FONAS po --ink tekstu (CTA), ir kaip žymeklis ant --motorway / --ink (aktyvi būsena). ========================================================================= */ /* SLUOKSNIŲ TAISYKLĖ — perskaityti prieš pridedant bet kokį perrašymą. Kontekstinis perrašymas (media query, tamsus fonas, footer'is) privalo gyventi TAME PAČIAME arba VĖLESNIAME @layer, nei taisyklė, kurią perrašo. Vėlesnis sluoksnis laimi NEPRIKLAUSOMAI nuo specifikos — tai ne klaida, o @layer apibrėžimas. Šiame faile ta pati spąstų forma buvo pagauta keturis kartus: `.flow` ant antraščių, `.muted` footer'yje, mobilus CTA slėpimas ir mobilus header'io dydis. Visus keturis rado F5 ciklas, ne peržiūra. */ @layer tokens, reset, base, layout, components, utils; /* ------------------------------------------------------------------------- ŠRIFTAI — self-hosted woff2, įkelta 2026-08-18 Display: Barlow Condensed 700 Body: Public Sans 400 / 600 Mono: sisteminis (žr. žemiau) Subsetas: latin + latin-ext VIENU failu per pjūvį. `latin-ext` (U+0100–U+017F) yra privalomas — be jo `ą č ę ė į š ų ū ž` nukristų į fallback šriftą ir tas pats žodis atsidurtų dviejų šriftų raidėse. Dviejų failų schema su `unicode-range` čia netaikoma: ji taupo baitus anglakalbiams, o mums reikštų du atskirus atsisiuntimus kiekvienam pjūviui, nes lietuviški rašmenys yra kiekviename puslapyje. PJŪVIŲ PASISKIRSTYMAS Barlow Condensed 700 → h1, h2, .logo, .band__inner Public Sans 400 → visas tekstas Public Sans 600 → h3, h4, strong, mygtukai, etiketės, lentelių th Public Sans **700 pjūvio nėra**, todėl body šrifto paryškinimas visur yra 600, ne 700. Prašyti 700 reikštų, kad naršyklė paima 600 ir dar sintetiškai jį paryškina — kraštai išteptų, o tai matoma būtent smulkiame tekste. BARLOW CONDENSED 600 NENAUDOJAMAS. CLAUDE.md §4 display šriftui skiria tris vietas — H1, H2 ir maršruto juostą — ir visos jos yra didelio kėglio, kur 700 yra teisingas svoris. Anksčiau display'ų buvau davęs ir `.card__label` bei lentelių antraštėms; tai jau buvo daugiau, negu §4 leidžia, todėl jos perkeltos į Public Sans 600. Failas `barlow-condensed-v13-latin_latin-ext-600.woff2` lieka nenaudojamas ir gali būti ištrintas (–28 KB). MONO: JETBRAINS MONO FAILO NĖRA. §4 jį nurodo mašinos skaitomiems duomenims (siuntos numeriai, pašto kodai, kainos, telefonai). Be failo `--font-mono` krenta į sisteminį `ui-monospace` / Consolas / Liberation Mono. Duomenims tai priimtina — `font-variant-numeric: tabular-nums` veikia ir sisteminiuose mono, o sutaupoma dar viena ~20 KB užklausa. Formaliai tai nukrypimas nuo §4; sprendimas savininko. PRELOAD — tik Public Sans regular (§4: „preload tik body face"). Įrašyta templates/layout.php. Daugiau preload'inti reikštų konkuruoti su LCP elementu dėl to paties pralaidumo; kiti pjūviai kraunami `swap` režimu. ------------------------------------------------------------------------- */ @font-face { font-family: "Public Sans"; src: url("/assets/fonts/public-sans-v21-latin_latin-ext-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Public Sans"; src: url("/assets/fonts/public-sans-v21-latin_latin-ext-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-v13-latin_latin-ext-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @layer tokens { :root { /* ================== PALETĖ IR PAMATUOTAS KONTRASTAS ================== CLAUDE.md §4 fiksuoja spalvas; §5 reikalauja ≥4.5:1 tekstui ir ≥3:1 UI elementams. Žemiau — visos poros, apskaičiuotos WCAG 2.1 formule (T-007, 2026-08-18). Kita sesija neturi skaičiuoti iš naujo. TEKSTAS (reikia 4.5:1) ink ant paper 18.20 ✔ ink ant surface 16.37 ✔ ink ant signal 8.50 ✔ ← CTA tekstas motorway ant paper 11.39 ✔ ← nuorodos motorway ant surface 10.24 ✔ paper ant motorway 11.39 ✔ ← header / footer paper ant ink 18.20 ✔ surface ant motorway 10.24 ✔ ← antrinis ant mėlyno steel ant paper 5.51 ✔ ← antrinis ant balto steel ant surface 4.96 ✔ ok ant paper 5.35 ✔ alert ant paper 6.54 ✔ alert ant surface 5.88 ✔ paper ant ok 5.35 ✔ paper ant alert 6.54 ✔ ink ant signal-press 6.83 ✔ ← CTA hover UI ELEMENTAI (reikia 3:1) signal ant motorway 5.32 ✔ ← aktyvi navigacija signal ant ink 8.50 ✔ ← juostų ribos motorway ant signal 5.32 ✔ ← focus ring ant CTA steel ant paper 5.51 ✔ ← laukų ribos ⛔ NEPRAEINA — NENAUDOTI paper ant signal 2.14 ✘ baltas tekstas ant gintarinės signal ant paper 2.14 ✘ gintarinė ant balto signal ant surface 1.93 ✘ gintarinė ant surface steel ant motorway 2.07 ✘ pilkas ant mėlyno IŠVADOS, ĮRAŠYTOS Į KOMPONENTUS 1. CTA tekstas visada --ink. Baltas ant gintarinės neegzistuoja. 2. --signal tik dviem būdais: FONAS po --ink tekstu, arba ŽYMEKLIS ant --motorway / --ink. Ant šviesaus fono jos nėra niekur — nei tekste, nei ribose, nei focus ring'e. 3. Antrinis tekstas ant mėlyno yra --surface, ne --steel. ==================================================================== */ /* Spalvos — CLAUDE.md §4, nekeičiamos */ --ink: #10161C; --motorway: #123A6B; --steel: #5A6B78; --surface: #F1F3F5; --signal: #F2A007; --ok: #1E7A45; --alert: #B3261E; --paper: #FFFFFF; /* Išvestinės. Naujų spalvų NEĮVEDAMA — čia tik permatomumo variantai ir vienas patamsintas gintarinės atspalvis paspaudimo būsenai. `--signal-press` (#D98F06) su --ink duoda 6.83 (reikia 4.5), todėl mygtuko tekstas hover'io metu lieka skaitomas. Ant balto jis 2.66 — t. y. jam galioja tas pats draudimas kaip ir --signal: tik fonas. */ --signal-press: #D98F06; /* `--motorway-press` (#0E2F57) su --paper duoda 13.44 (reikia 4.5) — paspaudimo būsena lieka skaitoma. Kaip ir --signal-press, tai ne nauja paletės spalva, o patamsintas esamos atspalvis. */ --motorway-press: #0E2F57; --line: rgb(90 107 120 / 0.28); --line-strong: rgb(90 107 120 / 0.55); --motorway-line: rgb(255 255 255 / 0.22); /* Šriftų stack'ai */ --font-display: "Barlow Condensed", "Archivo Condensed", "Liberation Sans Narrow", "Arial Narrow", system-ui, sans-serif; --font-body: "Public Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Mono KODUOJA PRASMĘ: mašinos skaitomi duomenys. Ne dekoracija. */ --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace; /* ===================== RITMAS: VARIANTAS B „ERDVUS" ===================== Savininko sprendimas 2026-08-18 po trijų variantų palyginimo telefone (public/assets/demo/ritmas.html). Tipografinė skalė: pagrindas 1.06rem, santykis ~1.25 (buvo 1rem, ~1.20). Tarpai ×1.5. Eilučių aukštis 1.7. `--measure` SUMAŽINTAS iki 62ch, nors tarpai išaugo — tai ne prieštaravimas. Kai raidė didesnė, ta pati 68ch eilutė fiziškai ilgėja, ir akis vėl pradeda pamesti eilutės pradžią grįždama. Platesnė tipografija reikalauja siauresnio stulpelio, ne platesnio. Kaina, apie kurią žinota renkantis: puslapis ilgesnis, todėl mobiliajame iki telefono numerio reikia daugiau slinkties, o skambutis yra pagrindinė konversija (§0). Būtent dėl to didieji tarpai mobiliajame lieka apkarpyti (žr. @media žemiau) — B taikomas ten, kur ekrane yra vietos. ====================================================================== */ /* Tipografinė skalė — fluid, be JS */ --step--1: clamp(0.88rem, 0.85rem + 0.15vw, 0.94rem); --step-0: clamp(1.06rem, 1.02rem + 0.20vw, 1.19rem); --step-1: clamp(1.33rem, 1.25rem + 0.40vw, 1.49rem); --step-2: clamp(1.66rem, 1.51rem + 0.75vw, 1.86rem); --step-3: clamp(2.07rem, 1.83rem + 1.20vw, 2.33rem); --step-4: clamp(2.59rem, 2.21rem + 1.90vw, 2.91rem); /* Tarpai — 6px tinklelis (0.375rem bazė) */ --space-1: 0.375rem; --space-2: 0.75rem; --space-3: 1.125rem; --space-4: 1.5rem; --space-5: 2.25rem; --space-6: 3rem; --space-7: 4.5rem; --space-8: 6rem; --measure: 62ch; --shell: 76rem; /* Kelio ženklo kalba: mažas radiusas, storos ribos */ --radius: 3px; --border: 2px; --tap: 44px; /* minimalus lietimo taikinys */ } } @layer reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, p, ul, ol, figure, table, blockquote { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } img, picture, svg { max-width: 100%; display: block; } input, button, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; } /* CLAUDE.md §5: prefers-reduced-motion gerbiamas. Šioje sistemoje animacijų beveik nėra (karuselės, parallax, counter'iai draudžiami §4), todėl taisyklė daugiausia dengia naršyklės slinkimą. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } } @layer base { html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.7; text-underline-offset: 0.18em; } h1, h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: 0.005em; text-transform: uppercase; } /* PAKOPOS. Anksčiau h1 buvo step-4, h2 step-3 — dvi gretimos pakopos, abi Barlow, abi didžiosiomis. /lt/informacija tai reiškė, kad sekcija („Kaip pakuoti") ir posekcija („PAKUOTĖS TVIRTUMAS") atrodė vienodo svorio, o toliau iškart prasidėdavo body tekstas. Tarp jų nebuvo nieko. Dabar kiekviena pakopa peršoka bent vieną žingsnį, o h3/h4 gauna ir formos skirtumą (didžiosios + tarpai), kad nesusiplaktų su paryškintu sakiniu — /lt/informacija tokių yra dešimtys. */ h1 { font-size: var(--step-4); } h2 { font-size: var(--step-2); } /* Display šriftas naudojamas TAUPIAI (§4): H1, H2 ir maršruto juosta. H3/H4 lieka body šriftu — kitaip kondensuotas grotesque nustoja būti akcentas ir tampa fonu. */ h3 { font-size: var(--step-1); font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04em; } h4 { font-size: var(--step-0); font-weight: 600; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.04em; color: var(--steel); /* 5.51 ant balto */ } /* RITMAS: didelis tarpas VIRŠ antraštės, mažas PO ja. Antraštė turi priklausyti tekstui, kurį pradeda, o ne kabėti per vidurį. Anksčiau buvo 2rem / 0.75rem, bet `.flow` utilita (paskutinis @layer) viršutinį perrašydavo į 1rem — todėl praktikoje jie buvo beveik lygūs. */ h1 { margin-block: var(--space-8) var(--space-3); } h2 { margin-block: var(--space-7) var(--space-2); } h3 { margin-block: var(--space-6) var(--space-2); } h4 { margin-block: var(--space-5) var(--space-1); } h1:first-child, h2:first-child, h3:first-child { margin-block-start: 0; } p, ul, ol, table { margin-block: 0 var(--space-4); } p { max-width: var(--measure); } ul:not([class]), ol:not([class]) { padding-inline-start: var(--space-4); line-height: 1.5; } li + li { margin-block-start: var(--space-1); } ol:not([class]) > li::marker { color: var(--steel); font-variant-numeric: tabular-nums; } a { color: var(--motorway); text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } strong { font-weight: 600; } /* --- FOCUS RING --- CLAUDE.md §5: matomas visur. --motorway ant šviesaus fono duoda 11.39, gintarinė ten davė 2.14 ir todėl focus ring'e NENAUDOJAMA. */ :focus-visible { outline: 3px solid var(--motorway); outline-offset: 2px; border-radius: 1px; } /* Ant tamsaus fono ta pati mėlyna dingtų — ten žymeklis baltas. */ .band :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--paper); } } @layer layout { .shell { width: min(100% - 2 * var(--space-4), var(--shell)); margin-inline: auto; } .section { padding-block: var(--space-7); } .section--tight { padding-block: var(--space-5); } .section--surface { background: var(--surface); } .stack > * + * { margin-block-start: var(--space-4); } /* TEKSTO STULPELIS — centruotas, ribotas iki --measure. Anksčiau riba buvo tik ant `p` ir `li`, o konteineris liko 76rem platus. 1900px ekrane tai reiškė 640px teksto prie kairio krašto ir ~570px tuštumos dešinėje: skaityti buvo galima, bet puslapis atrodė nesulygiuotas. Riba perkelta ant paties stulpelio, todėl jis centruojasi. Lentelės ir platūs blokai lieka `.table-scroll` viduje — jie slenka, o ne plečia stulpelio. */ .prose { max-width: var(--measure); margin-inline: auto; } /* SEKCIJŲ ATSKYRIMAS. Ne dekoracija: /lt/informacija turi keturias nesusijusias sekcijas viename URL, ir be ribos akis nemato, kur baigiasi „Kaip pakuoti" ir prasideda „Siuntos kaina". Pirma antraštė ribos negauna — virš jos nieko nėra. */ .prose > h1:not(:first-child) { border-block-start: var(--border) solid var(--line); padding-block-start: var(--space-6); } .grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); } @media (max-width: 47.99em) { /* Lipni mobili juosta uždengia puslapio apačią — atlaisvinam vietos. */ body { padding-block-end: calc(var(--tap) + var(--space-4)); } /* Didieji tarpai mobiliajame per dideli: B skalėje `--space-8` yra 6rem, o 390 px ekrane tai daugiau nei pusė matomo aukščio. Mažinami TIK trys didžiausi — smulkus ritmas (space-1..4) lieka toks pat, kad komponentų vidus ir lietimo taikiniai nesikeistų. Reikšmės sąmoningai grąžinamos maždaug į A lygį: variantas B pasirinktas dėl erdvumo TEN, KUR EKRANE YRA VIETOS. Telefone tos vietos nėra, o kiekvienas papildomas rem'as atitolina telefono numerį — pagrindinę konversiją (§0). */ :root { --space-6: 2rem; --space-7: 2.75rem; --space-8: 3.5rem; } } } @layer components { /* --- Skip link (§5: klaviatūra) --- */ .skip-link { position: absolute; left: var(--space-4); top: -4rem; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--ink); color: var(--paper); text-decoration: none; transition: top 120ms ease; } .skip-link:focus { top: var(--space-2); } /* --- Header --- */ .site-header { background: var(--motorway); color: var(--paper); border-block-end: var(--border) solid var(--ink); } .site-header a { color: var(--paper); } /* CTA tekstas header'yje PRIVALO likti --ink. `.site-header a` yra (0,1,1), o `.btn--cta` — (0,1,0), todėl bendra header'io taisyklė tyliai nugalėdavo ir mygtukas gaudavo BALTĄ tekstą ant gintarinės: 2.14:1 vietoj 8.50:1. Kontrastų lentelė sakė viena, kaskada darė kita — rado axe (F5 ciklas), ne akis. */ .site-header .btn--cta { color: var(--ink); } .header-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-block: var(--space-3); } /* CTA prisispaudžia prie dešinio krašto, kad header'io juosta būtų užpildyta iki galo, o ne nutrūktų per vidurį. */ .header-bar .btn--cta { margin-inline-start: auto; } .logo { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; } /* --- Sulankstoma navigacija (be JS, CLAUDE.md §5) --- Mobiliajame header'is suvalgydavo ~650 px pirmo ekrano. Uždaryta būsena dabar telpa į vieną eilutę. Desktop'e `summary` paslepiamas, o turinys rodomas visada: uždaryto
vaikų `display` yra perrašomas, todėl JS nereikia. */ .nav-toggle > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding-inline: var(--space-3); border: var(--border) solid var(--paper); border-radius: var(--radius); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; list-style: none; } .nav-toggle > summary::-webkit-details-marker { display: none; } .nav-toggle > summary::after { content: "▾"; } .nav-toggle[open] > summary::after { content: "▴"; } .nav-toggle[open] > .nav-primary { padding-block-start: var(--space-3); } @media (min-width: 48em) { .nav-toggle > summary { display: none; } .nav-toggle > .nav-primary { display: block; } } .nav-primary ul { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; } .nav-primary li { margin: 0; max-width: none; } .nav-primary a { display: inline-block; padding-block: var(--space-2); text-decoration: none; border-block-end: 3px solid transparent; } .nav-primary a:hover { border-block-end-color: var(--motorway-line); } /* Aktyvi būsena — BALTA, ne gintarinė (11.39 ant motorway). §4 gintarinę leidžia „TIK CTA ir aktyviai būsenai", bet tas pats §4 riboja ją iki VIENO elemento viewport'e. Abi taisyklės kartu praktiškai reiškia, kad tarp CTA ir aktyvios būsenos reikia rinktis. Renkamės CTA: gintarinė reiškia veiksmą, ne vietą. Be šito /lt/marsrutai mobiliajame vėl būtų du gintariniai elementai — aktyvi nuoroda ir lipnios juostos UŽSAKYTI. */ .nav-primary a[aria-current="page"] { border-block-end-color: var(--paper); font-weight: 600; } /* --- Mygtukai --- --signal limitas: MAX 1 elementas viewport'e (§4). Todėl .btn--cta yra vienintelis gintarinis, o visa kita — .btn--ghost. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap); padding: var(--space-2) var(--space-5); border: var(--border) solid transparent; border-radius: var(--radius); font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; } .btn--cta { background: var(--signal); color: var(--ink); /* baltas čia = 2.14, draudžiama */ border-color: var(--ink); } .btn--cta:hover { background: var(--signal-press); } /* Header CTA mobiliajame NERODOMAS: lipni juosta jį dubliuoja, o du gintariniai elementai viename ekrane pažeidžia §4. Veiksmas nedingsta — jis lieka ten, kur nykštys jį pasiekia be slinkties. TAISYKLĖ PRIVALO BŪTI ŠIAME SLUOKSNYJE. Anksčiau ji stovėjo `layout` sluoksnyje, o `.btn { display: inline-flex }` yra `components` — vėlesnis @layer laimi nepriklausomai nuo specifikos ir media query, todėl mygtukas mobiliajame liko matomas. Trečias tos pačios klasės defektas šiame faile; pirmi du — `.flow` ant antraščių ir `.muted` footer'yje. */ @media (max-width: 47.99em) { .header-bar .btn--cta { display: none; } } /* Pilnas mygtukas BE gintarinės: --motorway fonas, --paper tekstas (11.39). Skirtas veiksmams, kurie yra privalomi, bet NĖRA pagrindinė konversija — šiuo metu tai slapukų sutikimas. Gintarinė lieka tik UŽSAKYTI (CLAUDE.md §4 išaiškinimas 2026-08-18). */ .btn--solid { background: var(--motorway); color: var(--paper); border-color: var(--ink); } .btn--solid:hover { background: var(--motorway-press); } .btn--ghost { background: transparent; color: var(--motorway); border-color: var(--motorway); } .btn--ghost:hover { background: var(--surface); } .site-header .btn--ghost, .band .btn--ghost { color: var(--paper); border-color: var(--paper); } .site-header .btn--ghost:hover { background: rgb(255 255 255 / 0.12); } /* --- MARŠRUTO JUOSTA (signature, §4) --- Vienintelė vieta, kur leidžiama drąsa. Horizontali ženklo tipo juosta LT ⇄ UK ⇄ SCT, kartojama pagrindiniame, maršrutų ir kainų puslapiuose. */ .band { background: var(--motorway); color: var(--paper); border-block: var(--border) solid var(--ink); } .band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-5); padding-block: var(--space-4); font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); text-transform: uppercase; letter-spacing: 0.04em; } .band__leg { display: inline-flex; align-items: center; gap: var(--space-3); } /* Rodyklė BALTA, ne gintarinė. §4 leidžia ne daugiau kaip vieną --signal elementą viewport'e, o pirmame ekrane jų buvo trys: header CTA, dvi juostos rodyklės ir lipnios juostos UŽSAKYTI. Gintarinė lieka tik ten, kur ji reiškia veiksmą. */ .band__arrow { color: var(--paper); } /* Kaina yra mašinos skaitomas duomuo → mono (§4). */ .band__price { font-family: var(--font-mono); font-size: var(--step-1); font-weight: 500; padding: var(--space-1) var(--space-3); border: var(--border) solid var(--paper); border-radius: var(--radius); letter-spacing: 0; } /* --- HERO --- Vienintelis puslapio paveikslėlis be `lazy`: jis yra LCP elementas. `width`/`height` iš config/images.php, todėl vietos rezervavimas tikslus ir CLS nekyla (CLAUDE.md §5). */ .hero { background: var(--motorway); color: var(--paper); border-block-end: var(--border) solid var(--ink); } .hero__inner { display: grid; gap: var(--space-5); align-items: center; padding-block: var(--space-6); } .hero h1 { margin-block: 0 var(--space-3); } .hero__lead { margin: 0; max-width: 46ch; font-size: var(--step-1); color: var(--surface); /* 10.24 ant motorway; --steel duotų 2.07 */ } .hero__img { width: 100%; height: auto; border: var(--border) solid var(--ink); border-radius: var(--radius); } @media (min-width: 48em) { .hero__inner { grid-template-columns: 1fr 1fr; } } /* --- Lipni mobili juosta: SKAMBINTI + UŽSAKYTI --- */ .phone-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); /* Riba --surface, ne gintarinė: §4 išaiškinimas sako, kad gintarinė reiškia užsakymą, o riba yra atskyrimas, ne veiksmas. Su gintarine riba juostoje būtų DU gintariniai elementai (riba + mygtukas), ir §4 limitas lūžtų kiekviename mobiliame puslapyje. */ border-block-start: var(--border) solid var(--surface); } .phone-bar a { display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding: var(--space-2); color: var(--paper); font-weight: 600; text-decoration: none; text-transform: uppercase; } .phone-bar a + a { background: var(--signal); color: var(--ink); border-inline-start: var(--border) solid var(--ink); } @media (min-width: 48em) { .phone-bar { display: none; } } /* --- MONO: tik mašinos skaitomi duomenys (§4) --- Siuntos numeriai, pašto kodai, kainos, telefonai. Niekur kitur. */ .data { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; } .data--lg { font-size: var(--step-1); } a.data { text-decoration: none; } a.data:hover { text-decoration: underline; } /* --- Kortelės ir blokai --- */ .card { padding: var(--space-5); background: var(--paper); border: 1px solid var(--line); border-block-start: var(--border) solid var(--motorway); border-radius: var(--radius); } .card > :last-child { margin-block-end: 0; } /* Body šriftas, ne display: §4 display'ui skiria tik H1, H2 ir maršruto juostą. Kondensuotas grotesque step-1 kėglyje jau nustotų būti akcentas. */ .card__label { font-family: var(--font-body); font-weight: 600; font-size: var(--step-1); text-transform: uppercase; letter-spacing: 0.02em; margin-block-end: var(--space-2); } /* --- Kontaktų kortelė: rekvizitai iš config/company.php --- */ .contact-card dl { display: grid; gap: var(--space-2) var(--space-4); margin: 0; } .contact-card dt { color: var(--steel); font-size: var(--step--1); } .contact-card dd { margin: 0; } /* Ta pati kortelė pernaudojama footer'yje (compact režimas). Ant --motorway fono --steel duoda 2.07:1 ir §5 nepraeina, todėl ten etiketės yra --surface (10.24:1). Be šios eilutės kortelės pernaudojimas būtų tylus prieinamumo regresas. */ .site-footer .contact-card dt { color: var(--surface); } @media (min-width: 30em) { .contact-card dl { grid-template-columns: auto 1fr; } } /* --- Sekcijų navigacija (#anchor, ne skirtukai) --- /lt/informacija ir /lt/taisykles. Skirtukai reikalautų JS ir pažeistų §5. */ .section-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .section-nav li { margin: 0; max-width: none; } .section-nav a { display: inline-block; padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; } .section-nav a:hover { background: var(--paper); border-color: var(--motorway); } /* --- Lentelės (kainos, sekimo rezultatai) --- */ .table { width: 100%; font-variant-numeric: tabular-nums; } .table th, .table td { padding: var(--space-3); text-align: start; border-block-end: 1px solid var(--line); } .table thead th { background: var(--motorway); color: var(--paper); font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } .table td.data, .table th.data { font-family: var(--font-mono); } /* Slenkama sritis PRIVALO būti pasiekiama klaviatūra: be `tabindex` pelės neturintis lankytojas lentelės dešinės pusės nepamatytų (axe `scrollable-region-focusable`, serious). */ .table-scroll { overflow-x: auto; } .table-scroll:focus-visible { outline: 3px solid var(--motorway); outline-offset: 2px; } /* --- Formos --- CLAUDE.md §7: klaida rodoma PRIE LAUKO, ne viršuje. */ .field { margin-block-end: var(--space-4); max-width: 32rem; } .field label { display: block; font-weight: 600; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.02em; margin-block-end: var(--space-1); } .field input, .field select, .field textarea { width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-3); background: var(--paper); border: var(--border) solid var(--line-strong); border-radius: var(--radius); } .field textarea { min-height: 8rem; } .field--error input, .field--error select, .field--error textarea { border-color: var(--alert); } .field__error { display: block; margin-block-start: var(--space-1); color: var(--alert); /* 6.54 ant balto */ font-size: var(--step--1); font-weight: 600; } .field__hint { display: block; margin-block-start: var(--space-1); color: var(--steel); /* 5.51 ant balto */ font-size: var(--step--1); } /* Honeypot (§7) — paslėptas nuo žmogaus, matomas botui. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; } /* --- Būsenų pranešimai --- */ .note { padding: var(--space-4); border-inline-start: 6px solid var(--steel); background: var(--surface); border-radius: var(--radius); } .note > :last-child { margin-block-end: 0; } .note--ok { border-inline-start-color: var(--ok); } /* „Ruošiama" pranešimas: --steel riba, ne gintarinė. Nebaigtas modulis nėra veiksmas, todėl jis neturi konkuruoti su CTA dėl dėmesio. */ .note--wait { border-inline-start-color: var(--steel); } .note--alert { border-inline-start-color: var(--alert); } .badge { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius); font-size: var(--step--1); font-weight: 600; text-transform: uppercase; color: var(--paper); } .badge--ok { background: var(--ok); } /* 5.35 */ .badge--alert { background: var(--alert); } /* 6.54 */ /* --- Siuntos būsenų timeline (T-011) --- */ .timeline { margin: 0; padding: 0; list-style: none; } .timeline li { position: relative; padding-inline-start: var(--space-5); padding-block-end: var(--space-4); border-inline-start: var(--border) solid var(--line); max-width: var(--measure); } .timeline li::before { content: ""; position: absolute; inset-inline-start: -7px; inset-block-start: 0.45em; width: 12px; height: 12px; background: var(--paper); border: var(--border) solid var(--steel); border-radius: 50%; } .timeline li[data-state="done"]::before { background: var(--ok); border-color: var(--ok); } .timeline li:last-child { border-inline-start-color: transparent; padding-block-end: 0; } .timeline time { display: block; color: var(--steel); font-size: var(--step--1); } /* --- Footer --- */ .site-footer { background: var(--motorway); color: var(--paper); border-block-start: var(--border) solid var(--ink); padding-block: var(--space-7); } .site-footer a { color: var(--paper); } .site-footer ul { margin: 0; padding: 0; list-style: none; } .site-footer li { max-width: none; } /* --- Slapukų juosta (T-015): 2 mygtukai, be vendoro --- */ .cookie-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60; padding: var(--space-4); background: var(--ink); color: var(--paper); border-block-start: var(--border) solid var(--surface); } .cookie-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); justify-content: space-between; } .cookie-bar p { max-width: 48ch; margin: 0; font-size: var(--step--1); } .cookie-bar .btn--ghost { color: var(--paper); border-color: var(--paper); } /* --- MOBILŪS KOMPONENTŲ PATIKSLINIMAI --- Blokas gyvena ČIA, o ne `layout` sluoksnyje, ir tai ne stiliaus klausimas. `.header-bar`, `.logo`, `.hero__inner` apibrėžti šiame sluoksnyje; `layout` yra ANKSTESNIS, todėl jo taisyklės pralaimi nepriklausomai nuo specifikos ir media query. Perkėlus jas ten, header'is mobiliajame liko 137 px, nors taisyklė atrodė teisinga. BENDRA TAISYKLĖ, PATVIRTINTA KETURIS KARTUS ŠIAME FAILE: kontekstinis perrašymas privalo gyventi TAME PAČIAME arba VĖLESNIAME @layer, nei taisyklė, kurią jis perrašo. */ @media (max-width: 47.99em) { /* B skalėje header'is išaugo iki 137 px ir peržengė §5.1 ribą (120 px): logotipas gavo step-2 (1.86rem), o tarpai — 1.5× didesnius. Logotipas nukeliamas viena pakopa žemyn, tarpai — į smulkiausius. Lietimo taikinys `summary` lieka 44 px: jį mažinti reikštų mainyti išmatuojamą ribą į neišmatuojamą nepatogumą. */ .header-bar { padding-block: var(--space-1); gap: var(--space-2); } .logo { font-size: var(--step-1); } .hero__inner { padding-block: var(--space-5); } } } @layer utils { .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .muted { color: var(--steel); } /* 5.51 ant balto, 4.96 ant surface */ /* Ant tamsaus fono --steel duoda 2.06 ir §5 nepraeina. Perrašymas PRIVALO gyventi šiame sluoksnyje: `utils` yra paskutinis @layer, todėl `.muted` čia nugali bet kokį `.site-footer .muted` komponentų sluoksnyje, kad ir kokia būtų jo specifika. Anksčiau taisyklė stovėjo `components` ir neveikė — footer'io tekstas buvo pilkas ant mėlyno visuose puslapiuose. */ .site-header .muted, .site-footer .muted, .hero .muted, .band .muted { color: var(--surface); } /* 10.24 ant motorway */ .center { text-align: center; } /* .flow ir .stack skirti MAŽIEMS junginiams (footer sąrašai, kortelių vidus), NE teksto puslapiams. Utils yra paskutinis @layer, todėl ant prozos jie perrašo antraščių `margin-block-start` ir sugriauna ritmą. Puslapių šablonai naudoja `.prose`. */ .flow > * + * { margin-block-start: var(--space-4); } .cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } }