/* ========================================================= Sodlita – bazė, tokenai, layout, antraštė/poraštė ========================================================= */ :root { /* Spalvos – Sodlita raudona (paveldėta iš esamo logo, patamsinta iki AA kontrasto) */ --c-brand: #e01f26; --c-brand-dark: #b0141a; --c-ink: #0d1013; /* tekstas ir smulkūs elementai */ --c-dark: #2e363c; /* dideli tamsūs plotai: hero, poraštė, juostos */ /* * Akcentai tamsiame fone. Pagrindinė raudona ant #2a3238 duoda tik * 2,7:1 — per mažai net antraštėlei. Šviesesnis atspalvis pasiekia * 4,7:1 ir atrodo kaip ta pati spalva, tik neužgesusi. */ --c-brand-on-dark: #ff5a5f; --c-text-on-dark: #c2cad0; --c-ink-soft: #5a656e; --c-line: #e2e6ea; --c-bg: #ffffff; --c-bg-muted: #f5f7f8; --c-ok: #1f8a4c; --c-err: #c62828; /* Pilku skale: anksciau buvo 7 beveik vienodi atspalviai issibarste po failus. */ --c-mute: #8b959d; /* antrinis tekstas ant sviesaus */ --c-mute-dark: #c6ced4; /* antrinis tekstas ant tamsaus */ --c-line-strong: #cfd6dc; /* rembelis uzvedus */ --radius: 4px; --radius-lg: 6px; --shadow: 0 1px 2px rgba(20, 23, 26, .06), 0 6px 20px rgba(20, 23, 26, .06); --container: 1320px; --container-pad: 20px; --gap-section: 48px; /* tarpas nuo antraštės ir tarp sekcijų */ --gap: 24px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } /* * Apsauga nuo horizontalaus slinkimo. Butinai `clip`, o ne `hidden`: * `hidden` paverstu slinkimo konteineriu ir sugadintu prilipusia * antraste (`position: sticky`). `clip` tik nukerpa, konteinerio nekuria. */ body { overflow-x: clip; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--c-ink); background: var(--c-bg); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: var(--c-brand); } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; } h1 { font-size: clamp(28px, 3.4vw, 40px); } h2 { font-size: clamp(22px, 2.4vw, 30px); } h3 { font-size: 18px; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 999; width: auto; height: auto; clip: auto; background: #fff; padding: 10px 16px; border-radius: var(--radius); } /* ---------- Mygtukai ---------- */ /* ---------- Mygtukai ---------- * * Bendra konstrukcija visai temai: staciakampis korpusas ir atskira * rodykles lastele uz plonos linijos. Lastele gaunama neigiamomis * marzomis, kurios atsveria paties mygtuko vidini tarpa — todel ji * prisiglaudzia prie krastu ir yra pilno auksscio be papildomo . * * Uzpildas is kaires piesiamas `::before` su `z-index: -1`; mygtukui * butinas `isolation: isolate`, kitaip uzpildas uzlipa ant teksto * (WooCommerce etiketes yra grynas teksto mazgas, be elemento). */ .btn, button.btn { --btn-py: 13px; --btn-px: 22px; --btn-divider: rgba(255, 255, 255, .26); position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; padding: var(--btn-py) var(--btn-px); border: 0; border-radius: 0; font-weight: 800; font-size: 13px; line-height: 1.25; letter-spacing: .085em; text-transform: uppercase; cursor: pointer; transition: color .18s ease; } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-dark); transform: translateX(-101%); transition: transform .34s cubic-bezier(.2, .8, .2, 1); } .btn:hover::before { transform: none; } /* Rodykles lastele */ .btn > svg { flex: none; align-self: stretch; box-sizing: content-box; height: auto; margin: calc(var(--btn-py) * -1) calc(var(--btn-px) * -1) calc(var(--btn-py) * -1) var(--btn-px); padding: 0 calc(var(--btn-px) * .82); border-left: 1px solid var(--btn-divider); transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .18s ease; } .btn:hover > svg { transform: translateX(3px); } .btn--primary { background: var(--c-brand); color: #fff; } .btn--primary:hover { color: #fff; } .btn--dark { background: var(--c-dark); color: #fff; } .btn--dark::before { background: var(--c-brand); } .btn--dark:hover { color: #fff; } /* `--outline` yra tas pats kaip `--ghost`; abu vardai naudojami sablonuose. */ /* * Spalvos imamos is kintamuju, o ne rasomos tiesiai: tas pats mygtukas * stovi ir baltose, ir tamsiose sekcijose. Anksciau tamsi teksto spalva * buvo perrasoma po viena sekcija, ir naujai atsiradusioje juodos raides * susiliedavo su fonu. Dabar tamsus blokas persijungia pats. */ .btn--ghost, .btn--outline { --btn-divider: var(--btn-outline-line, rgba(13, 16, 19, .14)); background: transparent; color: var(--btn-outline-ink, var(--c-ink)); box-shadow: inset 0 0 0 1px var(--btn-outline-line, var(--c-line-strong)); } .btn--ghost:hover, .btn--outline:hover { color: #fff; } .btn--ghost:hover > svg, .btn--outline:hover > svg { border-left-color: rgba(255, 255, 255, .26); } .btn--lg { --btn-py: 17px; --btn-px: 28px; font-size: 14px; } /* ========================================================= ANTRAŠTĖ ========================================================= */ .site-header { position: sticky; top: 0; z-index: 60; background: #fff; box-shadow: 0 1px 0 var(--c-line); isolation: isolate; transition: box-shadow .2s ease; } .site-header.is-stuck { box-shadow: 0 2px 18px rgba(13, 16, 19, .1); } /* Fono forma: lėtai dreifuojantis pasuktas kvadratas. Vienintelė dekoracija antraštėje — ji ir suteikia charakterio. */ .site-header::before { content: ""; position: absolute; z-index: -1; top: -150px; right: 5%; width: 420px; height: 420px; border: 1px solid rgba(216, 31, 38, .15); transform: rotate(28deg); animation: sodlita-drift 22s ease-in-out infinite alternate; pointer-events: none; } .site-header::after { content: ""; position: absolute; z-index: -1; top: -80px; right: 13%; width: 200px; height: 200px; background: linear-gradient(135deg, rgba(216, 31, 38, .08), transparent 70%); transform: rotate(28deg); pointer-events: none; } @keyframes sodlita-drift { from { transform: rotate(24deg) translateY(0); } to { transform: rotate(32deg) translateY(24px); } } /* ---------- Kontaktinė juosta ---------- */ .topbar { background: var(--c-dark); color: #93a0aa; font-size: 12px; max-height: 40px; overflow: hidden; transition: max-height .2s ease, opacity .15s ease; } .site-header.is-stuck .topbar { max-height: 0; opacity: 0; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 40px; } .topbar__usps { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; } .topbar__usps li { display: flex; align-items: center; gap: 8px; white-space: nowrap; animation: sodlita-fade-up .5s ease both; } .topbar__usps li:nth-child(2) { animation-delay: .08s; } .topbar__usps li:nth-child(3) { animation-delay: .16s; } .topbar__icon { color: var(--c-brand); } @keyframes sodlita-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .topbar__contact { display: flex; align-items: center; gap: 22px; } .topbar__phone { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 13px; } .topbar__mail { display: flex; align-items: center; gap: 8px; } /* Pagrindine raudona ant tamsios juostos duoda tik 2,7:1 — uzvedus tekstas tapdavo neiskaitomas. `--c-brand-on-dark` duoda 4,0:1 ir atrodo taip pat. */ .topbar__phone:hover, .topbar__mail:hover, .topbar__phone:focus-visible, .topbar__mail:focus-visible { color: var(--c-brand-on-dark); } /* ---------- Pagrindinė juosta ---------- */ .header-main__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 46px; padding-top: 26px; padding-bottom: 26px; transition: padding .2s ease; } .site-header.is-stuck .header-main__inner { padding-top: 14px; padding-bottom: 14px; } /* Logotipas su įstrižu pabraukimu, kuris užvedus išsitiesia */ .site-title { position: relative; display: inline-flex; align-items: baseline; font-size: 30px; font-weight: 800; letter-spacing: -.045em; color: var(--c-ink); } .site-title::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 3px; background: var(--c-brand); transform: skewX(-24deg) scaleX(.34); transform-origin: left; transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .site-title:hover { color: var(--c-ink); } .site-title:hover::after { transform: skewX(-24deg) scaleX(1); } .custom-logo { max-height: 52px; width: auto; } /* ---------- Paieška: be rėmelio, tik linija ---------- */ .header-search { position: relative; } .search-form, .woocommerce-product-search { position: relative; display: flex; align-items: center; width: 100%; background: none; border: 0; } .woocommerce-product-search label { display: none; } .search-form__input, .woocommerce-product-search input[type="search"] { flex: 1 1 auto; min-width: 0; padding: 14px 0; border: 0; background: none; font: inherit; font-size: 16px; letter-spacing: -.01em; color: var(--c-ink); } /* * Buves #96a1a9 ant balto fono davė tik 2,6:1 — uzuomina buvo vos * iskaitoma. `--c-ink-soft` duoda 5,9:1 ir vis tiek lieka silpnesnis * uz ivesta teksta. */ .search-form__input::placeholder, .woocommerce-product-search input::placeholder { color: var(--c-ink-soft); } /* * Teksto laukai naršyklėse (skirtingai nuo mygtukų) `:focus-visible` gauna * ir nuo pelės paspaudimo, ne tik nuo klaviatūros – todėl bendra 3px raudona * `outline` taisyklė (main.css apačioje) suveikdavo net paspaudus pele ir * atrodė kaip sugedęs elementas. Fokusą čia jau rodo raudona linija po * lauku (`.header-search::before`, veikia ir klaviatūrai per `:focus-within`), * todėl outline nereikalingas visai – ne tik pelei. */ .search-form__input:focus, .woocommerce-product-search input:focus, .search-form__input:focus-visible, .woocommerce-product-search input:focus-visible { outline: none; } .search-form__submit, .woocommerce-product-search button[type="submit"] { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 12px 4px 12px 22px; border: 0; background: none; color: var(--c-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: color .2s ease; } .search-form__submit:hover, .woocommerce-product-search button[type="submit"]:hover { color: var(--c-brand); } /* Linija po paieška — fokusuojant nubėga raudonai */ .header-search::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-line); } .header-search::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2px; background: var(--c-brand); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2, .8, .2, 1); } .header-search:focus-within::before { transform: scaleX(1); } /* ---------- Veiksmai ---------- */ .header-actions { display: flex; align-items: center; gap: 4px; } .header-action, .header-account, .header-wishlist, .header-cart { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 66px; padding: 8px 0; color: var(--c-ink-soft); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; border-radius: var(--radius); transition: color .2s ease; } .header-action svg, .header-account svg, .header-wishlist svg, .header-cart svg { transition: transform .28s cubic-bezier(.2, .8, .2, 1); } .header-action:hover, .header-account:hover, .header-wishlist:hover, .header-cart:hover { color: var(--c-ink); } .header-action:hover svg, .header-account:hover svg, .header-wishlist:hover svg, .header-cart:hover svg { transform: translateY(-3px); } .header-cart__count, .header-wishlist__count { position: absolute; top: 2px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-brand); color: #fff; border-radius: var(--radius); font-size: 10px; font-weight: 700; } .header-wishlist__count { background: var(--c-dark); } .header-cart__count.is-zero, .header-wishlist__count.is-zero { display: none; } .nav-toggle { display: none; padding: 8px; border: 0; background: none; color: var(--c-ink); cursor: pointer; } /* ========================================================= NAVIGACIJA ========================================================= */ .main-nav { position: relative; background: #fff; border-top: 1px solid var(--c-line); } .main-nav__inner { display: flex; align-items: stretch; } /* Katalogo mygtukas: stačiakampis, fonas užsipildo tamsa iš kairės */ .catalog-trigger { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 11px; margin: 0 30px 0 0; padding: 0 30px; background: var(--c-brand); color: #fff; border: 0; border-radius: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .catalog-trigger::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-dark); transform: translateX(-101%); transition: transform .38s cubic-bezier(.2, .8, .2, 1); } .catalog-trigger:hover::before, .catalog-trigger[aria-expanded="true"]::before { transform: none; } .catalog-trigger > * { position: relative; z-index: 1; } .catalog-trigger:hover { color: #fff; } /* Meniu su įstrižu pabraukimu */ .main-nav__menu { display: flex; list-style: none; margin: 0; padding: 0; } .main-nav__menu > li { position: relative; } .main-nav__menu > li > .menu-link { position: relative; display: flex; align-items: center; height: 100%; padding: 17px 17px; font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--c-ink); } .main-nav__menu > li > .menu-link::after { content: ""; position: absolute; left: 17px; bottom: 12px; width: calc(100% - 34px); height: 2px; background: var(--c-brand); transform: scaleX(0) skewX(-20deg); transform-origin: left; transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .main-nav__menu > li:hover > .menu-link::after, .main-nav__menu > .current-menu-item > .menu-link::after { transform: scaleX(1) skewX(-20deg); } .main-nav__service { display: flex; align-items: center; gap: 9px; margin-left: auto; padding: 0 2px 0 20px; font-size: 13.5px; font-weight: 700; color: var(--c-ink); white-space: nowrap; } .main-nav__service svg { color: var(--c-brand); transition: transform .28s cubic-bezier(.2, .8, .2, 1); } .main-nav__service:hover { color: var(--c-brand); } .main-nav__service:hover svg { transform: rotate(-18deg); } /* Submeniu */ .main-nav .sub-menu { position: absolute; top: 100%; left: 0; z-index: 70; min-width: 240px; margin: 0; padding: 8px 0; list-style: none; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: 0 14px 30px rgba(13, 16, 19, .12); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; } .main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .main-nav .sub-menu .menu-link { display: block; padding: 9px 18px; font-size: 14px; color: var(--c-ink-soft); } .main-nav .sub-menu .menu-link:hover { color: var(--c-brand); background: var(--c-bg-muted); } .main-nav .sub-menu .sub-menu { top: -9px; left: 100%; } /* * Ilgi submeniu. Katalogas turi ~20 kategoriju — vienu stulpeliu jos * nulipdavo zemiau ekrano apacios ir dalies punktu pasiekti nebuvo galima. * `:has()` leidzia suskaiciuoti punktus pacioje CSS: nuo 9 punktu einam * i du stulpelius, nuo 15 — i tris. */ .main-nav .sub-menu:has(> li:nth-child(9)) { display: grid; grid-template-columns: repeat(2, minmax(214px, 1fr)); padding: 12px 0; } .main-nav .sub-menu:has(> li:nth-child(15)) { grid-template-columns: repeat(3, minmax(206px, 1fr)); } /* Platus iskleidziamas sarasas neturi isslysti uz lango desinio krasto. */ .main-nav .sub-menu:has(> li:nth-child(9)) { max-width: calc(100vw - var(--container-pad) * 2); } .main-nav__menu > li:nth-last-child(-n + 2) > .sub-menu:has(> li:nth-child(9)) { left: auto; right: 0; } /* * Atsargine riba naršyklems be `:has()` ir labai zemiems langams: * sarasas geriau tegul slenkasi pats, nei iskrenta uz ekrano. */ .main-nav .sub-menu { max-height: calc(100vh - 190px); overflow-y: auto; overscroll-behavior: contain; } .submenu-toggle { display: none; } /* Judesio mažinimas */ @media (prefers-reduced-motion: reduce) { .site-header::before { animation: none; } .topbar__usps li { animation: none; } } /* ========================================================= HERO SLANKIKLIS ========================================================= */ .hero { position: relative; background: var(--c-dark); color: #fff; overflow: hidden; } /* Fono linijos — tos pačios įstrižos, kaip antraštėje */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 54px); pointer-events: none; } .hero__track { position: relative; } /* Skaidrės viena ant kitos: aukštį diktuoja aktyvi, todėl nėra šuolių */ .hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease; } .hero-slide.is-active { position: relative; opacity: 1; visibility: visible; } .hero-slide__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; /* * Buvo 520px – kartu su turinio aukščiu bendras hero paimdavo daugiau * nei 900x768 tipo nesiaubo ekrano, todel pirmas ekranas atrodydavo * „nupjautas" ir reikedavo slinkti, kad pamatytum, kas zemiau. */ min-height: 360px; } /* * `container-type` butinas del antrastes: hero teksto stulpelis uzima maziau * nei puse lango, todel `vw` matavimai jam duodavo per didele raide ir * pavadinimas lauzdavosi i dvi eilutes. `cqi` matuoja pati stulpeli. */ .hero-slide__body { container-type: inline-size; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 36px 60px 36px 0; } /* Turinys atsiranda pakopomis kaskart perjungus skaidrę */ .hero-slide.is-active .hero-slide__eyebrow { animation: hero-up .6s .05s ease both; } .hero-slide.is-active .hero-slide__title { animation: hero-up .6s .12s ease both; } .hero-slide.is-active .hero-slide__lead { animation: hero-up .6s .2s ease both; } .hero-slide.is-active .hero-slide__cta { animation: hero-up .6s .28s ease both; } .hero-slide.is-active .hero-slide__facts { animation: hero-up .6s .36s ease both; } .hero-slide.is-active .hero-slide__tag { animation: hero-up .6s .5s ease both; } @keyframes hero-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .hero-slide__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-brand-on-dark); } .hero-slide__eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--c-brand-on-dark); } .hero-slide__title { margin: 0; font-size: clamp(34px, 4vw, 54px); /* atsarginis variantas be `cqi` */ font-size: clamp(30px, 6.6cqi, 56px); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; color: #fff; text-wrap: balance; } /* * Eilutes lauzimas ateina is turinio (`nl2br` skaidres antrasteje), * todel `em` cia turi likti `inline` — kitaip gautusi tuscia eilute. */ .hero-slide__title em { font-style: normal; color: var(--c-brand); } /* Slankiklis fokusuoja antraste programiskai (`tabindex="-1"`) — tada ziedo nereikia, bet klaviatura ji pasiekus ziedas privalo matytis. */ .hero-slide__title:focus:not(:focus-visible) { outline: none; } .hero-slide__lead { margin: 0; max-width: 500px; font-size: 17px; line-height: 1.6; color: var(--c-mute-dark); } .hero-slide__cta { display: flex; flex-wrap: wrap; gap: 12px; } /* Ta pati konstrukcija kaip `.btn`, tik didesne ir ant tamsaus fono. */ .hero-btn { --btn-py: 17px; --btn-px: 28px; --btn-divider: rgba(255, 255, 255, .3); position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; padding: var(--btn-py) var(--btn-px); background: var(--c-brand); color: #fff; border: 0; border-radius: 0; font-size: 13.5px; font-weight: 800; letter-spacing: .085em; text-transform: uppercase; transition: color .18s ease; } .hero-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; transform: translateX(-101%); transition: transform .38s cubic-bezier(.2, .8, .2, 1); } .hero-btn:hover::before { transform: none; } .hero-btn:hover { color: var(--c-ink); } .hero-btn > span { display: flex; align-items: center; } .hero-btn > svg { flex: none; align-self: stretch; box-sizing: content-box; height: auto; margin: calc(var(--btn-py) * -1) calc(var(--btn-px) * -1) calc(var(--btn-py) * -1) var(--btn-px); padding: 0 calc(var(--btn-px) * .8); border-left: 1px solid var(--btn-divider); transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .18s ease; } .hero-btn:hover > svg { transform: translateX(3px); border-left-color: rgba(13, 16, 19, .16); } .hero-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); } .hero-btn--ghost::before { background: #fff; } .hero-slide__facts { display: flex; gap: 34px; flex-wrap: wrap; margin: 0; padding-top: 20px; list-style: none; border-top: 1px solid rgba(255, 255, 255, .1); } .hero-slide__facts b { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.03em; } /* `--c-mute` skirtas sviesiam fonui — ant tamsaus hero jis davė 4,0:1. `--c-mute-dark` cia duoda 7,7:1 (12,5px tekstui butina 4,5:1). */ .hero-slide__facts span { font-size: 12.5px; color: var(--c-mute-dark); } /* Nuotraukos zona su įstrižu pjūviu */ .hero-slide__media { position: relative; background: #1b2127; clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%); } .hero-slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-slide__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 30%, rgba(224, 31, 38, .26), transparent 62%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .028) 0 2px, transparent 2px 22px); animation: hero-glow 11s ease-in-out infinite alternate; } @keyframes hero-glow { from { transform: translate(0, 0); } to { transform: translate(-26px, 18px); } } .hero-slide__tag { position: absolute; left: 18%; bottom: 40px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: #fff; color: var(--c-ink); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0, 0, 0, .34); } .hero-slide__tag svg { color: var(--c-brand); } .hero-slide__tag b { display: block; font-size: 14px; font-weight: 700; } .hero-slide__tag span { font-size: 12px; color: var(--c-ink-soft); } /* ---------- Valdikliai ---------- */ .hero__controls { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 3; display: flex; align-items: center; gap: 14px; pointer-events: none; } .hero__controls > * { pointer-events: auto; } .hero__arrow { display: grid; place-items: center; width: 42px; height: 42px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius); color: #fff; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .hero__arrow:hover { background: var(--c-brand-on-dark); border-color: var(--c-brand); } .hero__arrow:first-of-type svg { transform: rotate(180deg); } .hero__dots { display: flex; gap: 8px; } .hero__dot { position: relative; overflow: hidden; width: 40px; height: 4px; padding: 0; background: rgba(255, 255, 255, .2); border: 0; border-radius: 2px; cursor: pointer; } .hero__dot-fill { position: absolute; inset: 0; background: var(--c-brand-on-dark); transform: scaleX(0); transform-origin: left; } .hero__dot.is-active .hero__dot-fill { transform: scaleX(1); transition: transform .3s ease; } /* Automatinio keitimo eiga matoma taškelyje */ .hero.is-playing .hero__dot.is-active .hero__dot-fill { animation: hero-progress var(--hero-interval, 7s) linear forwards; } @keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ---------- Responsyvumas ---------- */ @media (max-width: 1040px) { .hero-slide__grid { grid-template-columns: 1fr; min-height: 0; } .hero-slide__body { padding: 56px 0 40px; } /* -28px buvo didesnis uz konteinerio 20px vidini tarpa — is cia atsirasdavo horizontalus slinkimas telefone ir plansete. Rissim per ta pati tokena. */ .hero-slide__media { height: 280px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); margin-inline: calc(var(--container-pad) * -1); } .hero-slide__tag { left: var(--container-pad); bottom: 24px; } .hero__controls { position: static; padding-top: 22px; padding-bottom: 26px; } } @media (max-width: 640px) { .hero-slide__facts { gap: 22px; } .hero-slide__facts b { font-size: 21px; } .hero-btn { flex: 1 1 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .hero-slide__media::after, .hero.is-playing .hero__dot.is-active .hero__dot-fill { animation: none; } .hero-slide.is-active * { animation: none !important; } } /* ========================================================= SEKCIJOS — bendra sistema ========================================================= */ /* * Fonų ritmas kuria puslapio struktūrą: šviesu → pilka → tamsu. * Sekcijos skiriamos oru ir fonu, ne rėmeliais. */ .home-section { position: relative; padding: clamp(56px, 7vw, 96px) 0; } .home-section--muted { background: var(--c-bg-muted); } .home-section--dark { background: var(--c-dark); color: #fff; } .home-section--tight { padding-top: clamp(40px, 5vw, 64px); } /* ---------- Sekcijos antraštė ---------- */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 38px; } .section-head__main { max-width: 720px; } .section-head__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-brand); } .section-head__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--c-brand); } .section-head__title { margin: 0; font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; } .section-head__lead { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--c-ink-soft); } .section-head__more { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; padding-bottom: 4px; font-size: 14.5px; font-weight: 700; color: var(--c-ink); white-space: nowrap; } .section-head__more svg { color: var(--c-brand); transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .section-head__more:hover { color: var(--c-brand); } .section-head__more:hover svg { transform: translateX(5px); } .section-head--invert .section-head__title { color: #fff; } .section-head--invert .section-head__lead { color: var(--c-mute-dark); } .section-head--invert .section-head__more { color: #fff; } /* ---------- Pasitikėjimo juosta ---------- */ .usp-bar { border-bottom: 1px solid var(--c-line); background: #fff; } .usp-bar__grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 0; padding-bottom: 0; } .usp { display: flex; align-items: center; gap: 14px; padding: 26px 24px 26px 0; position: relative; } .usp + .usp { padding-left: 24px; } .usp + .usp::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 1px; background: var(--c-line); } .usp__icon { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; background: var(--c-bg-muted); color: var(--c-brand); border-radius: var(--radius); transition: background .2s ease, color .2s ease; } .usp:hover .usp__icon { background: var(--c-brand); color: #fff; } .usp__title { margin: 0 0 2px; font-size: 14.5px; font-weight: 700; } .usp__text { margin: 0; font-size: 13px; color: var(--c-ink-soft); line-height: 1.45; } /* ---------- Kategorijų tinklelis ---------- */ .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .cat-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 22px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); transition: border-color .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1); } /* Raudona juosta išnyra iš apačios — vienintelis judesys kortelėje */ .cat-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-brand); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .cat-card:hover { border-color: var(--c-line-strong); transform: translateY(-3px); } .cat-card:hover::after { transform: scaleX(1); } .cat-card__media { display: block; aspect-ratio: 4 / 3; margin-bottom: 12px; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-muted); } .cat-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .cat-card:hover .cat-card__media img { transform: scale(1.05); } .cat-card__name { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; } .cat-card__count { font-size: 12.5px; color: var(--c-ink-soft); } /* ---------- Sezoninis blokas ---------- */ .season { position: relative; background: var(--c-dark); color: #fff; overflow: hidden; } .season::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 54px); } .season::after { content: ""; position: absolute; right: -90px; top: -110px; width: 420px; height: 420px; border: 1px solid rgba(224, 31, 38, .2); transform: rotate(28deg); animation: sodlita-drift 24s ease-in-out infinite alternate; } .season__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-top: clamp(52px, 6vw, 76px); padding-bottom: clamp(52px, 6vw, 76px); } .season__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-brand-on-dark); } .season__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--c-brand-on-dark); } .season__title { margin: 0 0 14px; font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; color: #fff; } .season__text { margin: 0 0 28px; font-size: 17px; line-height: 1.6; color: var(--c-mute-dark); } .season__media { position: relative; } .season__media img { width: 100%; border-radius: var(--radius); } /* ---------- Kodėl mes ---------- */ .why-us__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--c-line); } .why-card { position: relative; padding: 32px 32px 32px 78px; background: var(--c-bg-muted); transition: background .2s ease; } .why-us--light .why-card { background: #fff; } .why-card:hover { background: #fff; } .why-us--light .why-card:hover { background: var(--c-bg-muted); } .why-card__num { position: absolute; left: 32px; top: 32px; font-size: 15px; font-weight: 800; color: var(--c-brand); font-variant-numeric: tabular-nums; } .why-card__num::after { content: ""; display: block; width: 22px; height: 2px; margin-top: 7px; background: var(--c-brand); transform: scaleX(.4); transform-origin: left; transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .why-card:hover .why-card__num::after { transform: scaleX(1); } .why-card__title { margin: 0 0 9px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; } .why-card__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--c-ink-soft); } /* ---------- Prekių ženklai ---------- */ .brand-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--c-line); } .brand-grid__item { display: flex; } .brand-tile { flex: 1; display: grid; place-items: center; min-height: 96px; padding: 16px; background: #fff; transition: background .2s ease; } .brand-tile:hover { background: var(--c-bg-muted); } .brand-tile img { max-height: 46px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .25s ease, opacity .25s ease; } .brand-tile:hover img { filter: none; opacity: 1; } .brand-tile__name { font-size: 13px; font-weight: 700; text-align: center; color: var(--c-ink-soft); letter-spacing: -.01em; transition: color .2s ease; } .brand-tile:hover .brand-tile__name { color: var(--c-brand); } /* ---------- Serviso blokas ---------- */ .service-block { position: relative; background: var(--c-dark); color: var(--c-mute-dark); overflow: hidden; } .service-block::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 54px); } .service-block__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); } .service-block p { font-size: 16px; line-height: 1.65; } .service-block__list { margin: 24px 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; } .service-block__list li { position: relative; padding-left: 26px; } .service-block__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--c-brand-on-dark); } .service-block__meta { margin: 24px 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 15px; } .service-block__meta strong { color: #fff; } .service-block__meta a { color: #fff; } .service-block__meta a:hover { color: var(--c-brand-on-dark); } .service-block__actions { display: flex; flex-wrap: wrap; gap: 12px; } .service-block__media img { width: 100%; border-radius: var(--radius); } /* ---------- Gidai ---------- */ .guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .guide-card { display: flex; flex-direction: column; } .guide-card__thumb { display: block; margin-bottom: 16px; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-muted); } .guide-card__thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s cubic-bezier(.2, .8, .2, 1); } .guide-card:hover .guide-card__thumb img { transform: scale(1.04); } .guide-card__title { font-size: 18px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 8px; line-height: 1.3; } .guide-card__title a:hover { color: var(--c-brand); } .guide-card__excerpt { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--c-ink-soft); } .guide-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 700; font-size: 14px; color: var(--c-brand); } .guides__all { margin-top: 30px; font-weight: 700; } /* ---------- Atsiliepimai ---------- */ .reviews__widget { min-height: 60px; } /* * Busena, kai atsiliepimu ikiepio dar nera. * * Cia nera klaidos pranesimas – tai matomas puslapio blokas, kuri mato * pirkejas. Todel jis atrodo kaip kvietimas, o ne kaip nebaigtas darbas. */ .reviews__empty { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 44px 28px; background: #fff; border: 1px solid var(--c-line); text-align: center; } .reviews__empty-text { margin: 0; max-width: 620px; font-size: 15px; line-height: 1.65; color: var(--c-ink-soft); } .reviews__empty-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; color: var(--c-ink); border-bottom: 2px solid var(--c-brand); padding-bottom: 3px; transition: color .16s ease, gap .16s ease; } .reviews__empty-link:hover, .reviews__empty-link:focus-visible { color: var(--c-brand); gap: 12px; } .reviews__widget:empty::after { content: "Atsiliepimų įskiepis dar neprijungtas."; display: block; padding: 40px; text-align: center; color: var(--c-ink-soft); font-size: 14px; border: 1px dashed var(--c-line); border-radius: var(--radius); } /* ---------- DUK ---------- */ /* * Vientisas sarasas, o ne atskiros dezutes: kiekvienas punktas su savo * remeliu ir tarpu tarp ju atrodė kaip issibarstę langeliai, nors tai * viena grupė. Skiria plaukelio storio linija. */ .faq__list { border-top: 1px solid var(--c-line); } .faq__item { background: transparent; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; padding: 0; } .faq__q { list-style: none; cursor: pointer; position: relative; padding: 18px 44px 18px 0; font-size: 16px; font-weight: 700; letter-spacing: -.015em; transition: color .16s ease; } .faq__q:hover { color: var(--c-brand); } .faq__item[open] > .faq__q { color: var(--c-brand); } .faq__q::-webkit-details-marker { display: none; } /* * Pele paspaudus naršyklė piešia savo kontūrą — jis čia tik trukdo, nes * atidarytas punktas ir taip pasikeičia. Klaviatūrai kontūras paliekamas: * be jo nesimatytų, kur esi. */ .faq__q:focus { outline: none; } .faq__q:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; } .faq__q::before, .faq__q::after { content: ""; position: absolute; right: 0; top: 50%; background: var(--c-brand); transition: transform .25s cubic-bezier(.2, .8, .2, 1); } .faq__q::before { width: 14px; height: 2px; margin-top: -1px; right: 0; } .faq__q::after { width: 2px; height: 14px; right: 6px; margin-top: -7px; } .faq__item[open] .faq__q::after { transform: rotate(90deg); } .faq__a { padding: 0 0 20px; } .faq__a p { margin: 0; color: var(--c-ink-soft); font-size: 15px; line-height: 1.65; } .faq__more { margin-top: 26px; font-weight: 700; } /* ---------- Ilgasis SEO tekstas DUK sarase ---------- */ /* * Tekstas gyvena paskutiniame DUK punkte, todel paveldi visa `.faq__item` * isvaizda. Cia tik tai, kas skiriasi: platesnis turinys ir antrasciu * dydziai — DUK atsakymai ju neturi. */ .faq__item--long .entry-content { font-size: 15.5px; line-height: 1.7; color: var(--c-ink-soft); } .faq__item--long .entry-content h2 { font-size: 20px; color: var(--c-ink); margin-top: 1.6em; letter-spacing: -.02em; } .faq__item--long .entry-content h3 { font-size: 17px; color: var(--c-ink); margin-top: 1.3em; } .faq__item--long .entry-content ul, .faq__item--long .entry-content ol { padding-left: 20px; } /* ---------- Sekcijų responsyvumas ---------- */ @media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } .brand-grid { grid-template-columns: repeat(4, 1fr); } .usp-bar__grid { grid-template-columns: repeat(2, 1fr); } .usp + .usp::before { display: none; } .usp { padding-left: 0 !important; border-bottom: 1px solid var(--c-line); } .usp-bar__grid .usp:nth-child(odd) { padding-right: 24px; } .usp-bar__grid .usp:nth-child(even) { padding-left: 24px !important; } } @media (max-width: 900px) { .section-head { flex-direction: column; align-items: flex-start; gap: 16px; } .season__inner, .service-block__inner { grid-template-columns: 1fr; gap: 32px; } .season__media, .service-block__media { order: -1; } .why-us__grid { grid-template-columns: 1fr; } .guide-grid { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 640px) { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .cat-card { padding: 14px; } .brand-grid { grid-template-columns: repeat(3, 1fr); } .usp-bar__grid { grid-template-columns: 1fr; } .usp-bar__grid .usp { padding: 20px 0 !important; } .why-card { padding: 24px 22px 24px 60px; } .why-card__num { left: 22px; top: 26px; } } /* ---------- Puslapio antraštė / breadcrumbs ---------- */ .page-header { padding: 24px 0; background: var(--c-bg-muted); border-bottom: 1px solid var(--c-line); margin-bottom: var(--gap-section); } .page-header__title { margin: 6px 0 0; } /* * Skirtuka piesia CSS, o ne WooCommerce (`delimiter` paliktas tuscias). * Taip jis nepatenka i teksta, kuri nuskaito ekrano skaitytuvas, ir ji * galima nuspalvinti atskirai nuo pacio kelio. */ .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--c-ink-soft); } .breadcrumbs a { color: var(--c-ink-soft); transition: color .15s ease; } .breadcrumbs a:hover { color: var(--c-brand); } .breadcrumbs__item { display: inline-flex; align-items: center; } .breadcrumbs__item + .breadcrumbs__item::before { content: "/"; margin: 0 9px; color: var(--c-brand); font-weight: 700; } .breadcrumbs__item:last-child { color: var(--c-ink); font-weight: 600; } /* ---------- Tinklaraštis ---------- */ /* Patarimu sarasas be soninės juostos: turinys uzima visa ploti. */ .blog-archive { padding-bottom: 20px; } /* ---------- Patarimų kortelė sąraše ---------- */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); } .post-card { border: 1px solid var(--c-line); border-radius: 0; background: #fff; transition: border-color .18s ease, transform .22s ease, box-shadow .22s ease; } .post-card:hover { border-color: var(--c-line-strong); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(13, 16, 19, .08); } .post-card__link { display: grid; align-content: start; height: 100%; color: inherit; } .post-card__thumb { display: block; overflow: hidden; background: var(--c-bg-muted); } .post-card__thumb img { width: 100%; height: auto; display: block; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } .post-card:hover .post-card__thumb img { transform: scale(1.04); } .post-card__thumb--empty { display: grid; place-items: center; aspect-ratio: 16 / 10; background: linear-gradient(140deg, var(--c-bg-muted) 0%, #eaeef1 100%); color: var(--c-line-strong); } .post-card__body { display: grid; align-content: start; gap: 8px; padding: 18px; } .post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .post-card__tag { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-brand); } .post-card__read { font-size: 12px; font-weight: 600; color: var(--c-ink-soft); } .post-card__title { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--c-ink); } .post-card:hover .post-card__title { color: var(--c-brand); } .post-card__excerpt { font-size: 14px; line-height: 1.6; color: var(--c-ink-soft); } /* Nuoroda apacioje visada vienoje linijoje – kortelės skirtingo ilgio. */ .post-card__go { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink); } .post-card__go svg { color: var(--c-brand); transition: transform .24s cubic-bezier(.2, .8, .2, 1); } .post-card:hover .post-card__go svg { transform: translateX(3px); } .entry-meta { font-size: 13px; color: var(--c-ink-soft); } /* * Turinys uzima visa konteinerio ploti. * * Apatinis tarpas cia nededamas: ji duoda `.site-footer` marza. Anksciau * abu sluoksniai buvo susumuojami ir pries porastę likdavo apie 125 px oro. */ .entry-single { margin: 0; } .entry-content > * + * { margin-top: 1em; } /* ---------- Poraštė ---------- */ .site-footer { position: relative; margin-top: 64px; background: var(--c-dark); color: var(--c-mute-dark); overflow: hidden; } /* Tas pats istrizu liniju motyvas kaip hero ir CTA juostoje. */ .site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 58px); } .site-footer > * { position: relative; z-index: 1; } /* * Baltas tarpas pries porastę atsiranda tik tada, kai puslapis baigiasi * paprastu turiniu. Jei paskutine sekcija yra spalvota juosta (CTA) arba * pilkas blokas, tarpas atrodo kaip klaida — tada ji nuimame. */ /* Katalogo sekcijos baigiasi savo vidiniu tarpu – porastei jo nebereikia. */ .archive-text + .site-footer, .archive-faq + .site-footer, .archive-cats + .site-footer, #primary:has(> .cta:last-child) + .site-footer, #primary:has(> .home-section--muted:last-child) + .site-footer, #primary:has(> .service-block:last-child) + .site-footer { margin-top: 0; } .site-footer a { color: var(--c-mute-dark); transition: color .15s ease; } .site-footer a:hover { color: #fff; } .site-footer__cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding-top: 60px; padding-bottom: 44px; } .site-footer .site-title { color: #fff; } .site-footer__about { max-width: 320px; margin-top: 14px; font-size: 14px; line-height: 1.65; } .site-footer__contacts { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; font-size: 14px; } .site-footer__contacts li { display: flex; align-items: flex-start; gap: 10px; } .site-footer__icon { flex: none; margin-top: 2px; color: var(--c-brand-on-dark); } /* Skyriaus antraste: raudonas bruksnys vietoj didesnio srifto. */ .site-footer__heading { position: relative; margin: 0 0 18px; padding-bottom: 12px; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .site-footer__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; background: var(--c-brand-on-dark); } .site-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; } .site-footer__menu a { display: inline-block; } .site-footer__menu a:hover { transform: translateX(2px); } .site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; padding: 18px 0; } .site-footer__bottom-inner { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; } .site-footer__bottom p { margin: 0; } /* `--c-ink-soft` skirtas sviesiam fonui; porasteje jis susilieja su fonu. */ .site-footer__note { color: var(--c-mute-dark); opacity: .75; } @media (max-width: 900px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 32px; } .site-footer__col--brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .site-footer__cols { grid-template-columns: 1fr; } .site-footer__bottom-inner { justify-content: flex-start; } } .widget { margin-bottom: 28px; } .widget__title { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; } /* ---------- Responsyvumas ---------- */ @media (max-width: 1024px) { .usp-bar__grid { grid-template-columns: repeat(2, 1fr); } .cat-grid { grid-template-columns: repeat(3, 1fr); } .site-footer__cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 782px) { .header-main__inner { grid-template-columns: auto auto; grid-template-areas: "brand actions" "search search"; row-gap: 12px; } .site-branding { grid-area: brand; } .header-actions { grid-area: actions; } .header-search { grid-area: search; } .header-account__label { display: none; } .nav-toggle { display: block; } .main-nav { display: none; } .main-nav.is-open { display: block; } .main-nav__menu { flex-direction: column; gap: 0; } .main-nav__menu > li { border-bottom: 1px solid var(--c-line); } .main-nav__menu li { position: relative; } .main-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; display: none; border: 0; box-shadow: none; padding: 0 0 8px 16px; background: transparent; } .main-nav li.is-expanded > .sub-menu { display: block; } /* * `.main-nav .sub-menu:has(...)` (desktop skiltys su 214-206px minimaliu * plociu) turi DIDESNI specifiskuma uz `display:none` cia virsuje (3 * klases pries 2), todel be sio perrasymo 9+ punktu submeniu telefone * bendai NEUZSIDARYDAVO (grid visada rodomas) ir dar buvo per platus * (2 stulpeliai × min. 214px = 428px > 386px ekrano), todel tekstas * apsikirpdavo ir atsirasdavo horizontalus slinkimas. Cia selektorius * pakartotas TIKSLIAI toks pat, kad specifiskumas sutaptu, o virsu * paima veliau saraso pozicija. */ .main-nav .sub-menu:has(> li:nth-child(9)) { display: none; grid-template-columns: 1fr; max-width: none; } .main-nav li.is-expanded > .sub-menu:has(> li:nth-child(9)) { display: block; } .main-nav .sub-menu:has(> li:nth-child(15)) { grid-template-columns: 1fr; } .submenu-toggle { display: block; position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; } .submenu-toggle span { display: block; width: 10px; height: 10px; margin: 0 auto; border-right: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); transform: rotate(45deg); } .submenu-toggle[aria-expanded="true"] span { transform: rotate(225deg); } .cat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .usp-bar__grid { grid-template-columns: 1fr; } .site-footer__cols { grid-template-columns: 1fr; gap: 28px; } } /* ========================================================= Katalogo mega meniu ========================================================= */ .main-nav { position: relative; } .main-nav__inner { display: flex; align-items: stretch; gap: 8px; } .catalog-trigger { display: inline-flex; align-items: center; gap: 10px; padding: 0 20px; margin-right: 8px; background: var(--c-brand); color: #fff; border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; transition: background .15s ease; } .catalog-trigger:hover { background: var(--c-brand-dark); color: #fff; } .mega { position: absolute; top: 100%; left: 0; right: 0; z-index: 75; background: #fff; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); box-shadow: 0 18px 40px rgba(20, 23, 26, .12); } .mega[hidden] { display: none; } .mega__inner { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; padding-top: 28px; padding-bottom: 28px; } .mega__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; } .mega-col__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .mega-col__icon { flex: 0 0 auto; width: 32px; height: 32px; } .mega-col__icon img { width: 100%; height: 100%; object-fit: contain; } .mega-col__title { font-size: 15px; font-weight: 700; } .mega-col__head:hover .mega-col__title { color: var(--c-brand); } .mega-col__list { list-style: none; margin: 0; padding: 0 0 0 2px; display: grid; gap: 5px; } .mega-col__list a { font-size: 14px; color: var(--c-ink-soft); } .mega-col__list a:hover { color: var(--c-brand); } .mega__aside { display: grid; gap: 20px; align-content: start; border-left: 1px solid var(--c-line); padding-left: 32px; } .mega-brands__title { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-soft); margin-bottom: 10px; } .mega-brands__list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; font-size: 14px; } .mega-brands__all { font-size: 13px; font-weight: 600; color: var(--c-brand); } .mega-promo { display: block; border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .15s ease; } .mega-promo:hover { border-color: var(--c-brand); } .mega-promo__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .mega-promo__body { display: block; padding: 14px 16px; } .mega-promo__title { display: block; font-weight: 700; font-size: 15px; margin-bottom: 4px; } .mega-promo__text { display: block; font-size: 13px; color: var(--c-ink-soft); margin-bottom: 8px; } .mega-promo__more { display: block; font-size: 13px; font-weight: 600; color: var(--c-brand); } body.mega-open { overflow: hidden; } @media (max-width: 1200px) { .mega__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1024px) { .mega__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; } .mega__aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--c-line); padding-top: 20px; } .mega__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 782px) { .catalog-trigger { width: 100%; margin: 0; padding: 14px 20px; justify-content: center; } .main-nav__inner { flex-direction: column; } /* * Anksciau cia buvo savas vidinis slinkties langas (`max-height: 70vh; * overflow-y: auto`) – bet tikroji priezastis, kodel sarasas atrodydavo * "nebesislenkantis", buvo kita: `.site-header` yra `position: sticky`, * o toks elementas, tapes aukstesnis uz ekrana, savo pertekliaus * NEATSKLEIDZIA jokiu slinkimu – jis tiesiog "prilimpa" prie virsaus * visam savo aukstyje. Tikras sprendimas – `nav-open`/`mega-open` * klases (zemiau) laikinai grazina antraste i normalu dokumento sraut, * kol katalogas ar meniu atidaryti. */ .mega { position: static; box-shadow: none; } .mega__cols { grid-template-columns: 1fr; gap: 18px; } .mega-brands__list { grid-template-columns: 1fr; } body.mega-open { overflow: auto; } body.nav-open .site-header, body.mega-open .site-header { position: static; } } /* ========================================================= Gyva paieška ========================================================= */ .header-search { position: relative; } .search-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 85; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .search-suggest[hidden] { display: none; } .search-suggest__list { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; max-height: 60vh; overflow-y: auto; } .suggest { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius); transition: background .12s ease; } .suggest:hover, .suggest:focus { background: var(--c-bg-muted); outline: none; } /* Pasiulymu sarasas slenkasi, todel isorini ziedą jis nukirptu — laikom ji elemento viduje. */ .suggest:focus-visible { box-shadow: inset 0 0 0 2px var(--c-brand); outline-offset: -4px; } .suggest__media { flex: 0 0 auto; width: 48px; height: 48px; } .suggest__media img { width: 100%; height: 100%; object-fit: contain; } .suggest__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; } .suggest__title { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .suggest__sku { font-size: 12px; color: var(--c-ink-soft); } .suggest__meta { display: flex; align-items: baseline; gap: 10px; } .suggest__price { font-size: 14px; font-weight: 700; } .suggest__stock { font-size: 12px; font-weight: 600; } .suggest__stock--in { color: var(--c-ok); } .suggest__stock--out { color: var(--c-err); } .search-suggest__empty { margin: 0; padding: 18px; text-align: center; color: var(--c-ink-soft); font-size: 14px; } .search-suggest__more { display: block; padding: 12px; text-align: center; background: var(--c-bg-muted); border-top: 1px solid var(--c-line); font-size: 14px; font-weight: 600; color: var(--c-brand); } .search-suggest__more:hover { background: var(--c-line); color: var(--c-brand-dark); } @media (max-width: 782px) { .search-suggest { position: fixed; top: auto; left: 8px; right: 8px; max-height: 70vh; } } /* ========================================================= Ikonos ========================================================= */ .icon { display: block; flex: 0 0 auto; } /* Antraštės veiksmai: ikona + tekstas vertikaliai */ .header-actions { align-items: stretch; } .header-account, .header-wishlist, .header-cart { display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; padding: 4px 2px; font-size: 11px; font-weight: 600; line-height: 1; color: var(--c-ink); transition: color .15s ease; } .header-account:hover, .header-wishlist:hover, .header-cart:hover { color: var(--c-brand); } .header-account__label { display: block; } /* Skaitikliai — ženkleliai ant ikonos kampo */ .header-cart__count, .header-wishlist__count { position: absolute; top: -2px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-brand); color: #fff; border-radius: var(--radius); font-size: 11px; font-weight: 700; border: 2px solid #fff; } .header-wishlist__count { background: var(--c-dark); } .header-wishlist__count.is-zero, .header-cart__count.is-zero { display: none; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 4px; color: var(--c-ink); } .catalog-trigger__icon { color: currentColor; } /* Ikonos sekcijose */ .usp__icon, .why-card__icon, .trust-lines__icon { color: var(--c-brand); } /* ========================================================= Antraštė — mobilus vaizdas ========================================================= */ @media (max-width: 1240px) { .topbar__mail span { display: none; } .header-main__inner { gap: 28px; } } @media (max-width: 1040px) { .topbar__usps li:nth-child(3) { display: none; } .main-nav__service { display: none; } } @media (max-width: 900px) { .topbar__usps li:nth-child(2) { display: none; } .header-action__label { display: none; } .header-action, .header-account, .header-wishlist, .header-cart { min-width: 44px; } /* * `width: 66px` desktop'e reikalingas etiketei po ikona ("PASKYRA" ir * pan.) sutalpinti. Ta etiketė čia vizualiai paslėpta, bet plati dėžė * likdavo – todel ikonos atrodydavo nutoluses viena nuo kitos, o * skaičiukas (position:absolute; right:-6px) prisirisdavo prie PLACIOS * dežės kampo, ne prie pačios ikonos, ir kabodavo toli sonoje. */ .header-account, .header-wishlist, .header-cart { width: auto; padding: 8px 6px; } } @media (max-width: 782px) { .topbar__usps { display: none; } .topbar__inner { justify-content: center; } .topbar__contact { gap: 16px; } .header-main__inner { grid-template-columns: auto 1fr; grid-template-areas: "brand actions" "search search"; gap: 14px 12px; padding-top: 12px; padding-bottom: 12px; } .site-branding { grid-area: brand; } .header-actions { grid-area: actions; justify-self: end; } .header-search { grid-area: search; } .site-title { font-size: 21px; } .nav-toggle { display: block; } .main-nav { display: none; border-top: 0; } .main-nav.is-open { display: block; border-top: 1px solid var(--c-line); } .main-nav__inner { flex-direction: column; gap: 0; } .catalog-trigger { width: 100%; margin: 0; padding: 15px 20px; justify-content: center; } .main-nav__menu { flex-direction: column; } .main-nav__menu > li { border-bottom: 1px solid var(--c-line); } .main-nav__menu li { position: relative; } .main-nav__menu > li > .menu-link { padding: 14px 4px; } .main-nav__menu > li > .menu-link::after { display: none; } .main-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; display: none; border: 0; box-shadow: none; padding: 0 0 8px 16px; } .main-nav li.is-expanded > .sub-menu { display: block; } .submenu-toggle { display: block; position: absolute; top: 4px; right: 0; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; } .submenu-toggle span { display: block; width: 9px; height: 9px; margin: 0 auto; border-right: 2px solid var(--c-ink-soft); border-bottom: 2px solid var(--c-ink-soft); transform: rotate(45deg); } .submenu-toggle[aria-expanded="true"] span { transform: rotate(225deg); } } /* Lipni antraštė: slenkant kontaktų juosta suvyniojama */ .topbar { max-height: 38px; overflow: hidden; transition: max-height .2s ease, opacity .15s ease; } .site-header.is-stuck .topbar { max-height: 0; opacity: 0; } @media (max-width: 782px) { /* Telefone kontaktų juosta lieka visada – skambučiai svarbesni už vietą */ .site-header.is-stuck .topbar { max-height: 38px; opacity: 1; } } /* Logotipo taškas — vienintelis spalvos akcentas antraštės kairėje */ .site-title__dot { color: var(--c-brand); } /* Paieškos mygtuko rodyklė */ .woocommerce-product-search button[type="submit"] svg, .search-form__submit svg { transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .woocommerce-product-search button[type="submit"]:hover svg, .search-form__submit:hover svg { transform: translateX(4px); } /* Slankiklio eigos juostai reikia intervalo iš PHP */ .hero { --hero-interval: 7s; } /* ========================================================= Mobili paieška — ikona vietoj laukelio ========================================================= */ .search-toggle { display: none; padding: 8px; border: 0; background: none; color: var(--c-ink); cursor: pointer; border-radius: var(--radius); transition: color .2s ease; } .search-toggle:hover { color: var(--c-brand); } .site-header.is-search-open .search-toggle { color: var(--c-brand); } @media (max-width: 782px) { .search-toggle { display: block; } /* Antraštė lieka dviejų stulpelių — paieška iškrenta iš tinklelio */ .header-main__inner { grid-template-columns: auto 1fr; grid-template-areas: "brand actions"; gap: 12px; padding-top: 12px; padding-bottom: 12px; } .site-branding { grid-area: brand; } .header-actions { grid-area: actions; justify-self: end; } .site-title { font-size: 22px; } /* Paieška atsidaro atskira juosta po antrašte */ .header-search { grid-area: auto; position: absolute; left: 0; right: 0; top: 100%; z-index: 55; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--c-line); box-shadow: 0 10px 24px rgba(13, 16, 19, .1); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .24s ease, opacity .18s ease, padding .24s ease; } .site-header.is-search-open .header-search { max-height: 90px; opacity: 1; padding: 4px 20px 10px; } /* Linija po paieška mobiliajame nereikalinga — ją atstoja juostos kraštas */ .header-search::after, .header-search::before { display: none; } /* * Desktop'e lauka rodo apatine linija (`.header-search::after/::before`). * Ta linija cia isjungta, o pats laukas neturi jokio fono/remelio – * be sio bloko jis buvo visiskai bekontūris, ir vienintelis matomas * apvadas buvo klaviaturos fokuso ziedas (atrode kaip klaida). */ .search-form, .woocommerce-product-search { background: var(--c-bg-muted); border: 1px solid var(--c-line); border-radius: 0; padding: 0 4px 0 14px; } .search-form__input, .woocommerce-product-search input[type="search"] { padding: 12px 0; font-size: 16px; } .header-main { position: relative; } } /* ========================================================= Kategorijų ikonos, kai nuotraukos dar nėra ========================================================= */ .cat-card { padding-bottom: 26px; } .cat-card__media--icon { display: grid; place-items: center; background: linear-gradient(140deg, var(--c-bg-muted) 0%, #eaeef1 100%); position: relative; overflow: hidden; } .cat-card__media--icon::before { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border: 1px solid rgba(224, 31, 38, .16); transform: rotate(24deg); transition: transform .4s cubic-bezier(.2, .8, .2, 1); } .cat-card:hover .cat-card__media--icon::before { transform: rotate(34deg) scale(1.08); } .cat-card__icon { position: relative; color: var(--c-ink); opacity: .82; transition: color .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); } .cat-card:hover .cat-card__icon { color: var(--c-brand); transform: translateY(-3px); opacity: 1; } /* Rodyklė apatiniame dešiniajame kampe — atsiranda užvedus */ .cat-card__go { position: absolute; right: 16px; bottom: 14px; color: var(--c-brand); opacity: 0; transform: translateX(-6px); transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .2, 1); } .cat-card:hover .cat-card__go { opacity: 1; transform: none; } /* ========================================================= Kvietimas susisiekti ========================================================= */ .cta { position: relative; background: var(--c-brand); color: #fff; overflow: hidden; } /* Fono formos — tos pačios, tik ant raudono */ .cta::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 54px); } .cta::after { content: ""; position: absolute; right: -70px; top: -120px; width: 380px; height: 380px; border: 1px solid rgba(255, 255, 255, .22); transform: rotate(28deg); animation: sodlita-drift 20s ease-in-out infinite alternate; } .cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr auto; gap: 48px; align-items: center; padding-top: clamp(44px, 5vw, 64px); padding-bottom: clamp(44px, 5vw, 64px); } .cta__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .75); } .cta__eyebrow::before { content: ""; width: 28px; height: 2px; background: #fff; } .cta__title { margin: 0 0 12px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; color: #fff; } .cta__text { margin: 0; max-width: 620px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .86); } .cta__actions { display: flex; flex-direction: column; gap: 12px; } .cta__phone { display: flex; align-items: center; gap: 14px; padding: 18px 26px; background: #fff; color: var(--c-ink); border-radius: var(--radius); transition: transform .25s cubic-bezier(.2, .8, .2, 1); white-space: nowrap; } .cta__phone:hover { transform: translateY(-3px); color: var(--c-ink); } .cta__phone-icon { color: var(--c-brand); } .cta__phone small { display: block; font-size: 11.5px; font-weight: 600; color: var(--c-ink-soft); letter-spacing: .04em; text-transform: uppercase; } .cta__phone b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; } .cta__mail { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 26px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: var(--radius); color: #fff; font-size: 14.5px; font-weight: 600; transition: background .2s ease, border-color .2s ease; } .cta__mail:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; } /* ========================================================= Tamsiųjų sekcijų tuščia pusė ========================================================= */ /* * Kol nuotraukų nėra, dešinė sezono ir serviso pusė būtų tuščia. * Vietoj tuštumos — geometrinis raštas, kuris atkartoja antraštės motyvą. */ .season__media:empty, .service-block__media:empty { position: relative; min-height: 300px; background: #171d23; border-radius: var(--radius); overflow: hidden; } .season__media:empty::before, .service-block__media:empty::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 65% 35%, rgba(224, 31, 38, .24), transparent 64%); } .season__media:empty::after, .service-block__media:empty::after { content: ""; position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border: 1px solid rgba(255, 255, 255, .12); transform: rotate(24deg); animation: sodlita-drift 18s ease-in-out infinite alternate; } @media (max-width: 900px) { .reviews__fallback { grid-template-columns: 1fr; } .cta__inner { grid-template-columns: 1fr; gap: 28px; } .cta__actions { flex-direction: row; flex-wrap: wrap; } .cta__phone, .cta__mail { flex: 1 1 240px; } .season__media:empty, .service-block__media:empty { min-height: 200px; } } @media (max-width: 640px) { .cat-card__media--icon { aspect-ratio: 3 / 2; } .cat-card__go { display: none; } } /* ========================================================= Teisiniai dokumentai (page-teisine.php) ========================================================= */ .legal { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 48px; align-items: start; } /* Blokas prasideda prie pat konteinerio krasto, o skaitymo plotis ribojamas pacio teksto, ne stulpelio – kitaip desineje liktu keista tuscia juosta. */ .legal__main { min-width: 0; } /* * Turinys lieka matomas slenkant. `top` atitinka prilipusios antrastes * auksti, kad sarasas po ja nepasislėptų. */ .legal__aside { position: sticky; top: 104px; } .legal-toc { border-left: 2px solid var(--c-line); padding-left: 18px; } .legal-toc__title { margin: 0 0 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-soft); } .legal-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: legal; display: grid; gap: 9px; font-size: 13.5px; line-height: 1.45; } .legal-toc__list li { counter-increment: legal; } .legal-toc__list a { display: grid; grid-template-columns: 26px 1fr; align-items: baseline; color: var(--c-ink-soft); transition: color .15s ease; } .legal-toc__list a::before { content: counter(legal, decimal-leading-zero); font-size: 11px; font-weight: 800; color: var(--c-line-strong); font-variant-numeric: tabular-nums; transition: color .15s ease; } .legal-toc__list a:hover { color: var(--c-brand); } .legal-toc__list a:hover::before { color: var(--c-brand); } /* ---------- Antraštinė juosta ---------- */ .legal__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--c-line); } .legal__badge { padding: 5px 11px; background: var(--c-brand); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .legal__updated { font-size: 12.5px; font-weight: 600; color: var(--c-ink-soft); font-variant-numeric: tabular-nums; } /* ---------- Turinys ---------- */ .legal__content { font-size: 15.5px; line-height: 1.75; color: var(--c-ink-soft); } .legal__content p { margin: 0 0 1em; } /* * Antrastes gauna `scroll-margin-top`, kitaip perejus per turinio saraso * nuoroda jos atsiduria po prilipusia svetaines antraste. */ .legal__content h2 { scroll-margin-top: 100px; margin: 2.4em 0 .7em; padding-top: 1.4em; border-top: 1px solid var(--c-line); color: var(--c-ink); font-size: 21px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25; } .legal__content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .legal__content h3 { scroll-margin-top: 100px; margin: 1.8em 0 .5em; color: var(--c-ink); font-size: 16.5px; font-weight: 700; } .legal__content ul, .legal__content ol { margin: 0 0 1em; padding-left: 22px; } .legal__content li + li { margin-top: 6px; } .legal__content a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; } .legal__content strong { color: var(--c-ink); } /* Data ir juodrascio pastabos rasomos kursyvu — isskiriam ramiau. */ .legal__content em { display: inline-block; font-style: normal; font-size: 13.5px; color: var(--c-ink-soft); } .legal__content p > em:only-child { display: block; padding: 12px 16px; background: var(--c-bg-muted); border-left: 3px solid var(--c-line-strong); } .legal__content table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 14px; } .legal__content th, .legal__content td { padding: 11px 13px; border: 1px solid var(--c-line); text-align: left; } .legal__content th { background: var(--c-bg-muted); color: var(--c-ink); font-weight: 700; } /* ---------- Kiti dokumentai ---------- */ .legal-related { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--c-line); } .legal-related__title { display: block; margin-bottom: 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-soft); } .legal-related__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; } .legal-related__link { display: flex; align-items: center; gap: 10px; padding: 15px 17px; box-shadow: 0 0 0 1px var(--c-line); font-size: 14.5px; font-weight: 700; transition: background .16s ease; } .legal-related__link:hover { background: var(--c-bg-muted); color: var(--c-ink); } .legal-related__link svg { margin-left: auto; color: var(--c-brand); transition: transform .26s cubic-bezier(.2, .8, .2, 1); } .legal-related__link:hover svg { transform: translateX(3px); } @media (max-width: 900px) { .legal { grid-template-columns: 1fr; gap: 28px; } /* Mazame ekrane sarasas prilimpes tik trukdytu. */ .legal__aside { position: static; } .legal-toc { border-left: 0; padding: 18px; background: var(--c-bg-muted); } } @media print { .legal__aside, .legal-related, .site-header, .site-footer, .page-header { display: none; } .legal { display: block; } .legal__main { max-width: none; } } /* ========================================================= Prekių ženklų puslapis (page-preku-zenklai.php) ========================================================= */ .brands-page { padding-bottom: 20px; } .brands-page__intro { margin-bottom: 32px; } .brands-page__empty { color: var(--c-ink-soft); } /* Raidziu juosta: greitas sokis prie gamintojo, kai ju yra keliasdesimt. */ .brands-index { display: flex; flex-wrap: wrap; gap: 1px; margin-bottom: 40px; } .brands-index__link { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; box-shadow: 0 0 0 1px var(--c-line); font-size: 13px; font-weight: 800; transition: background .16s ease, color .16s ease; } .brands-index__link:hover { background: var(--c-dark); color: #fff; } .brands-group { margin-bottom: 36px; } .brands-group__letter { scroll-margin-top: 100px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--c-line); font-size: 15px; font-weight: 800; letter-spacing: .12em; color: var(--c-brand); } .brands-group__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1px; } .brand-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) 18px; gap: 14px; align-items: center; padding: 14px 16px; box-shadow: 0 0 0 1px var(--c-line); transition: background .16s ease; } .brand-item:hover { background: var(--c-bg-muted); color: var(--c-ink); } .brand-item__logo { display: grid; place-items: center; width: 56px; height: 42px; background: var(--c-bg-muted); } .brand-item__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; filter: grayscale(1); opacity: .8; transition: filter .2s ease, opacity .2s ease; } .brand-item:hover .brand-item__logo img { filter: none; opacity: 1; } /* Be logotipo – inicialas, kad langelis neatrodytu kaip nepakrauta nuotrauka. */ .brand-item__initial { font-size: 19px; font-weight: 800; color: var(--c-line-strong); } .brand-item__body { display: grid; gap: 2px; min-width: 0; } .brand-item__name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .brand-item__count { font-size: 12.5px; color: var(--c-ink-soft); font-variant-numeric: tabular-nums; } .brand-item__go { color: var(--c-line-strong); transition: transform .24s cubic-bezier(.2, .8, .2, 1), color .16s ease; } .brand-item:hover .brand-item__go { transform: translateX(3px); color: var(--c-brand); } /* ========================================================= Kontaktų puslapis (page-kontaktai.php) ========================================================= */ .contacts { padding-bottom: 20px; } /* ---------- Greitieji būdai ---------- */ .contacts__quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; margin-bottom: 48px; } .contact-card { position: relative; overflow: hidden; display: grid; align-content: start; gap: 4px; padding: 24px 22px 22px; background: #fff; box-shadow: 0 0 0 1px var(--c-line); transition: background .18s ease; } a.contact-card:hover { background: var(--c-bg-muted); color: var(--c-ink); } /* Telefonas isskiriamas tamsiu fonu – tai pageidaujamas kontakto budas. */ .contact-card--accent { background: var(--c-dark); color: #fff; box-shadow: none; } .contact-card--accent::before { content: ""; position: absolute; right: -50px; top: -70px; width: 190px; height: 190px; border: 1px solid rgba(255, 255, 255, .16); transform: rotate(26deg); pointer-events: none; } a.contact-card--accent:hover { background: #000; color: #fff; } .contact-card--accent .contact-card__hint { color: var(--c-mute-dark); } .contact-card__icon { color: var(--c-brand); margin-bottom: 10px; } .contact-card__label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-soft); } .contact-card--accent .contact-card__label { color: var(--c-mute-dark); } .contact-card__value { font-size: 19px; font-weight: 800; letter-spacing: -.025em; } .contact-card__hint { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--c-ink-soft); } /* ---------- Forma ir šoninis blokas ---------- */ .contacts__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; } .contacts__eyebrow { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-brand); } .contacts__title { margin: 0 0 10px; font-size: 27px; font-weight: 800; letter-spacing: -.03em; } .contacts__lead { margin: 0 0 26px; font-size: 15.5px; line-height: 1.7; color: var(--c-ink-soft); } .contact-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 18px; } .contact-form__field { display: grid; gap: 6px; margin: 0 0 18px; } .contact-form__field label { display: block; font-size: 13px; font-weight: 700; } .contact-form__field label span { color: var(--c-brand); } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form select, .contact-form textarea { width: 100%; padding: 13px 15px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); font: inherit; font-size: 15px; transition: border-color .16s ease, box-shadow .16s ease; } .contact-form textarea { resize: vertical; min-height: 150px; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { /* `outline: none` panaikintas: 1px remelis nera pakankama fokuso zyme. Ziedas ateina is bendros `:focus-visible` taisykles failo gale. */ border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(224, 31, 38, .12); } /* Slaptas laukas robotams: nematomas, bet ne `display: none`. */ .contact-form__trap { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .contact-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 6px; } .contact-form__privacy { margin: 0; flex: 1 1 240px; font-size: 12.5px; line-height: 1.55; color: var(--c-ink-soft); } .contact-form__privacy a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; } .contact-note { margin: 0 0 22px; padding: 14px 18px; border-left: 3px solid var(--c-ok); background: rgba(31, 138, 76, .08); font-size: 14.5px; font-weight: 600; color: #14663a; } .contact-note--error { border-left-color: var(--c-err); background: rgba(198, 40, 40, .07); color: #96201f; } /* * Salutinis blokas prilimpa slenkant: forma visada aukstesnė uz ji, todel * be sito desineje liktu ilga tuscia juosta. */ .contacts__side { position: sticky; top: 104px; } .contacts__panel { padding: 26px 24px; background: var(--c-bg-muted); border-top: 3px solid var(--c-brand); } .contacts__panel-title { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .contacts__content { font-size: 14.5px; line-height: 1.7; color: var(--c-ink-soft); } .contacts__content h2 { margin: 1.8em 0 .6em; color: var(--c-ink); font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .contacts__content h2:first-child { margin-top: 0; } .contacts__content h3 { margin: 1.4em 0 .4em; color: var(--c-ink); font-size: 15px; } .contacts__content table { width: 100%; border-collapse: collapse; font-size: 14px; } .contacts__content th, .contacts__content td { padding: 9px 0; border-bottom: 1px solid var(--c-line); text-align: left; } .contacts__content a { color: var(--c-brand); } @media (max-width: 900px) { .contacts__grid { grid-template-columns: 1fr; gap: 34px; } .contacts__side { position: static; } } /* ========================================================= Straipsnis: išdėstymas, turinys, blokai ========================================================= */ .post-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; padding-bottom: 24px; } .post-layout__main { min-width: 0; } .post-layout__aside { position: sticky; top: 104px; } .post-toc { border-left: 2px solid var(--c-line); padding-left: 18px; } .post-toc__title { display: block; margin-bottom: 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-soft); } .post-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 9px; font-size: 13.5px; line-height: 1.45; } .post-toc__list li { counter-increment: toc; } .post-toc__list a { display: grid; grid-template-columns: 24px 1fr; align-items: baseline; color: var(--c-ink-soft); transition: color .15s ease; } .post-toc__list a::before { content: counter(toc, decimal-leading-zero); font-size: 11px; font-weight: 800; color: var(--c-line-strong); font-variant-numeric: tabular-nums; transition: color .15s ease; } .post-toc__list a:hover, .post-toc__list a:hover::before { color: var(--c-brand); } .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; } .post-meta__badge { padding: 5px 11px; background: var(--c-brand); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .post-meta__read { font-size: 12.5px; font-weight: 600; color: var(--c-ink-soft); } .entry-thumb { margin: 0 0 30px; } .entry-thumb img { width: 100%; height: auto; display: block; } /* ---------- Teksto tipografija ---------- */ .post-content { font-size: 16.5px; line-height: 1.75; color: var(--c-ink-soft); } .post-content > p { margin: 0 0 1.1em; } .post-content h2 { scroll-margin-top: 100px; margin: 2.2em 0 .6em; padding-top: 1.3em; border-top: 1px solid var(--c-line); color: var(--c-ink); font-size: 25px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; } .post-content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .post-content h3 { scroll-margin-top: 100px; margin: 1.7em 0 .45em; color: var(--c-ink); font-size: 18px; font-weight: 700; letter-spacing: -.015em; } .post-content ul, .post-content ol { margin: 0 0 1.2em; padding-left: 22px; } .post-content li + li { margin-top: 7px; } .post-content strong { color: var(--c-ink); } .post-content a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; } .post-content blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--c-brand); font-size: 18px; color: var(--c-ink); } .post-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: 14.5px; } .post-content thead th { padding: 12px 14px; text-align: left; background: var(--c-dark); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .post-content td, .post-content tbody th { padding: 12px 14px; border-bottom: 1px solid var(--c-line); } .post-content tbody tr:nth-child(even) { background: var(--c-bg-muted); } .post-content td:first-child { font-weight: 600; color: var(--c-ink); } /* ---------- Pastabų kortelės ---------- */ .note { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; margin: 1.8em 0; padding: 20px 22px; background: var(--c-bg-muted); border-left: 3px solid var(--c-line-strong); } .note__icon { display: grid; place-items: center; width: 40px; height: 40px; background: #fff; color: var(--c-ink-soft); box-shadow: 0 0 0 1px var(--c-line); } .note__body > :first-child { margin-top: 0; } .note__body > :last-child { margin-bottom: 0; } .note__title { display: block; margin-bottom: 4px; color: var(--c-ink); font-size: 15px; } .note p { margin: 0 0 .6em; font-size: 15px; } .note--warning { border-left-color: var(--c-brand); background: rgba(224, 31, 38, .05); } .note--warning .note__icon { color: var(--c-brand); box-shadow: 0 0 0 1px rgba(224, 31, 38, .3); } .note--tip { border-left-color: var(--c-ok); background: rgba(31, 138, 76, .06); } .note--tip .note__icon { color: var(--c-ok); box-shadow: 0 0 0 1px rgba(31, 138, 76, .3); } /* ---------- Skaičių juosta ---------- */ /* * Viena eilute, ne tinklelis. `auto-fit` su `minmax` kaitaliodavo stulpeliu * skaiciu pagal ploti, o skirtingo ilgio uzrasai duodavo skirtingus auksscius — * juosta atrodė kaip sudelioti gabalai. `flex: 1 1 0` daro visus vienodo * plocio, `align-items: stretch` – vienodo auksscio. */ .statbar { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 1px; margin: 2em 0; } .statbar__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; background: #fff; box-shadow: 0 0 0 1px var(--c-line); } /* Uzrasas prilimpa prie apacios – skaiciai lieka vienoje linijoje. */ .statbar__label { margin-top: auto; } @media (max-width: 720px) { /* Keturi stulpeliai telefone butu neiskaitomi – lauziam i dvi eilutes. */ .statbar { flex-wrap: wrap; } .statbar__item { flex: 1 1 calc(50% - 1px); } } .statbar__value { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--c-ink); font-variant-numeric: tabular-nums; } .statbar__label { font-size: 12.5px; line-height: 1.45; color: var(--c-ink-soft); } /* ---------- Žingsniai ---------- */ .steps { margin: 2em 0; } .steps__title { display: block; margin-bottom: 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-brand); } .steps ol { margin: 0; padding: 0; list-style: none; counter-reset: step; } .steps li { position: relative; counter-increment: step; margin: 0 0 2px; padding: 14px 18px 14px 56px; background: var(--c-bg-muted); font-size: 15px; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; bottom: 0; display: grid; place-items: center; width: 40px; background: var(--c-dark); color: #fff; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } /* ---------- Raginimas straipsnyje ---------- */ .post-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin: 2.4em 0; padding: 26px 28px; background: var(--c-dark); color: var(--c-mute-dark); } .post-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 52px); } .post-cta > * { position: relative; } .post-cta__body { flex: 1 1 280px; } .post-cta__title { margin: 0 0 6px; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.025em; } .post-cta__text { margin: 0; font-size: 14.5px; line-height: 1.6; } .post-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; } .post-cta .btn--ghost { --btn-divider: rgba(255, 255, 255, .26); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); } /* ---------- Kategorijų kortelės tekste ---------- */ .post-cats { margin: 2.2em 0; } .post-cats__title { display: block; margin-bottom: 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-soft); } .post-cats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; } .post-cat { display: flex; align-items: center; gap: 11px; padding: 15px 17px; background: #fff; box-shadow: 0 0 0 1px var(--c-line); font-size: 14.5px; font-weight: 700; color: var(--c-ink); transition: background .16s ease; } .post-cat:hover { background: var(--c-bg-muted); color: var(--c-ink); } .post-cat__icon { color: var(--c-brand); display: flex; } .post-cat__go { margin-left: auto; color: var(--c-line-strong); transition: transform .24s cubic-bezier(.2, .8, .2, 1); } .post-cat:hover .post-cat__go { transform: translateX(3px); color: var(--c-brand); } /* ---------- DUK ---------- */ .post-faq { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--c-line); } .post-faq__title { margin: 0 0 20px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; } /* ---------- Kiti straipsniai ---------- */ .post-related { margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--c-line); } .post-related__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 20px; } .post-related__title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.025em; } .post-related__more { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--c-ink-soft); } .post-related__more:hover { color: var(--c-brand); } .post-related__more svg { transition: transform .24s cubic-bezier(.2, .8, .2, 1); } .post-related__more:hover svg { transform: translateX(3px); } .post-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); } .related-card { display: grid; align-content: start; border: 1px solid var(--c-line); transition: border-color .18s ease, transform .22s ease; } .related-card:hover { border-color: var(--c-line-strong); transform: translateY(-3px); color: var(--c-ink); } .related-card__thumb { display: block; overflow: hidden; background: var(--c-bg-muted); } .related-card__thumb img { width: 100%; height: auto; display: block; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } .related-card:hover .related-card__thumb img { transform: scale(1.04); } .related-card__body { display: grid; gap: 6px; padding: 16px; } .related-card__title { font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -.015em; } .related-card__excerpt { font-size: 13.5px; line-height: 1.5; color: var(--c-ink-soft); } @media (max-width: 1040px) { .post-layout { grid-template-columns: 1fr; gap: 28px; } .post-layout__aside { position: static; } .post-toc { border-left: 0; padding: 18px; background: var(--c-bg-muted); } } @media (max-width: 640px) { .post-content h2 { font-size: 21px; } } /* ========================================================= Lizingo puslapis (page-lizingas.php) ========================================================= */ .leasing { padding-bottom: 24px; } .leasing__main { max-width: 860px; } /* ---------- Skaičiuoklė ---------- */ .calc { position: relative; overflow: hidden; margin-bottom: 40px; padding: 30px 32px; background: var(--c-dark); color: var(--c-mute-dark); } .calc::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 56px); } .calc::after { content: ""; position: absolute; right: -70px; top: -90px; width: 280px; height: 280px; border: 1px solid rgba(255, 255, 255, .16); transform: rotate(28deg); pointer-events: none; } .calc > * { position: relative; } .calc__eyebrow { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-brand-on-dark); } .calc__title { margin: 0 0 24px; color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -.03em; } .calc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; align-items: start; } .calc__field label, .calc__label { display: block; margin-bottom: 9px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-mute-dark); } .calc__input { position: relative; display: flex; align-items: center; } .calc__input input { width: 100%; padding: 14px 44px 14px 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .22); border-radius: 0; color: #fff; font: inherit; font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: border-color .16s ease, background .16s ease; } .calc__input input:focus { /* Ziedas — is bendros `:focus-visible` taisykles failo gale. */ border-color: var(--c-brand); background: rgba(255, 255, 255, .1); } /* Skaitiklio rodyklės čia tik trukdo – suma vedama ranka. */ .calc__input input::-webkit-outer-spin-button, .calc__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .calc__input input { -moz-appearance: textfield; } .calc__input span { position: absolute; right: 16px; font-size: 20px; font-weight: 800; color: var(--c-mute-dark); pointer-events: none; } .calc__terms { display: flex; flex-wrap: wrap; gap: 1px; } .calc__term { display: grid; gap: 1px; place-items: center; padding: 11px 14px; background: rgba(255, 255, 255, .07); border: 0; border-radius: 0; color: #fff; font: inherit; font-size: 17px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .16s ease, color .16s ease; } .calc__term span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-mute-dark); } .calc__term:hover { background: rgba(255, 255, 255, .14); } .calc__term.is-active { background: var(--c-brand); color: #fff; } .calc__term.is-active span { color: rgba(255, 255, 255, .8); } .calc__result { display: grid; gap: 4px; align-content: center; padding: 16px 18px; background: rgba(255, 255, 255, .07); border-left: 3px solid var(--c-brand); } .calc__result-label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-mute-dark); } .calc__result-value { color: #fff; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .calc__result-note { font-size: 12.5px; color: var(--c-mute-dark); font-variant-numeric: tabular-nums; } .calc__disclaimer { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; line-height: 1.6; } /* ---------- Sąlygų kortelės ---------- */ .leasing__points { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; margin-bottom: 44px; } .leasing-point { display: grid; align-content: start; gap: 5px; padding: 20px 22px; background: #fff; box-shadow: 0 0 0 1px var(--c-line); } .leasing-point__icon { color: var(--c-brand); margin-bottom: 6px; } .leasing-point__title { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--c-ink); } .leasing-point__text { font-size: 14px; line-height: 1.55; color: var(--c-ink-soft); } @media (max-width: 900px) { .calc { padding: 24px 22px; } .calc__grid { grid-template-columns: 1fr; gap: 22px; } } /* ---------- Komponentai straipsnio tekste ---------- * * Teksto taisykles (`.post-content h3`, `.post-content a`, `.post-content li`) * yra specifiskesnes (0,1,1) uz komponentu klases (0,1,0), todel jos * perrasinejo ne tik spalvas, bet ir parastes, dydzius bei vidinius tarpus. * Is to atsirado juodas tekstas ant juodo fono ir tarpai, kuriu niekas * neaprase. * * Cia viskas atstatoma su `.post-content` priesdeliu — specifiskumas * sutampa, laimi paskutinis, ir `!important` neprireikia. */ /* CTA blokas */ .post-content .post-cta__title { margin: 0 0 6px; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.025em; padding-top: 0; border-top: 0; } .post-content .post-cta__text { margin: 0; color: var(--c-mute-dark); font-size: 14.5px; } /* Mygtukai */ .post-content .btn { text-decoration: none; } .post-content .btn--primary, .post-content .btn--dark { color: #fff; } .post-content .btn--ghost, .post-content .btn--outline { color: var(--btn-outline-ink, var(--c-ink)); } .post-content .btn:hover { color: #fff; } /* Kategoriju korteles */ .post-content .post-cat { color: var(--c-ink); text-decoration: none; } .post-content .post-cat:hover { color: var(--c-ink); } /* Zingsniai: numeracija ir tarpai savi, teksto saraso taisykles cia netinka. */ .post-content .steps ol { margin: 0; padding-left: 0; } .post-content .steps li { margin: 0 0 2px; } .post-content .steps li + li { margin-top: 0; } /* Pastabos */ .post-content .note p:last-child { margin-bottom: 0; } .post-content .note ul, .post-content .note ol { margin-bottom: 0; } /* ========================================================= Serviso puslapis (page-servisas.php) ========================================================= */ .service-page { padding-bottom: 24px; } /* ---------- Viršutinis blokas ---------- */ .service-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; margin-bottom: 48px; align-items: stretch; } /* Be nuotraukos blokas lieka vienas – tuscias remelis atrodytu kaip klaida. */ .service-intro--nophoto { grid-template-columns: 1fr; } .service-intro__photo { margin: 0; overflow: hidden; background: var(--c-bg-muted); } .service-intro__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .service-intro__box { position: relative; overflow: hidden; display: grid; align-content: center; gap: 12px; padding: 34px 32px; background: var(--c-dark); color: var(--c-mute-dark); } .service-intro__box::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 54px); } .service-intro__box > * { position: relative; } .service-intro__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-brand-on-dark); } .service-intro__title { margin: 0; color: #fff; font-size: 25px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; } .service-intro__text { margin: 0; font-size: 14.5px; line-height: 1.65; } .service-intro__contacts { margin: 6px 0 8px; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 14.5px; } .service-intro__contacts li { display: flex; align-items: center; gap: 10px; } .service-intro__contacts a { color: #fff; font-weight: 700; } .service-intro__contacts a:hover { color: var(--c-brand-on-dark); } .service-intro__icon { flex: none; color: var(--c-brand-on-dark); } .service-intro__box .btn { justify-self: start; } /* ---------- Turinys ---------- */ .service-page__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; } .service-page__main { min-width: 0; } .service-page__aside { position: sticky; top: 104px; } /* ---------- Nuotraukų juosta ---------- */ .service-gallery { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--c-line); } .service-gallery__title { margin: 0 0 20px; font-size: 22px; font-weight: 800; letter-spacing: -.025em; } .service-gallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); } .service-gallery__item { margin: 0; overflow: hidden; background: var(--c-bg-muted); } .service-gallery__item img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } .service-gallery__item:hover img { transform: scale(1.04); } @media (max-width: 1040px) { .service-page__grid { grid-template-columns: 1fr; gap: 28px; } .service-page__aside { position: static; } } @media (max-width: 860px) { .service-intro { grid-template-columns: 1fr; } .service-intro__photo img { aspect-ratio: 16 / 9; height: auto; } } /* ---------- Mygtukai tamsiuose blokuose ---------- * * `.btn::before` uzpildas yra `--c-dark`. Kai pats blokas tokios pat spalvos, * uzvedus mygtukas su juo susilieja ir dingsta. Tamsiame fone uzpildas * apverciamas: baltas plotas, tamsus tekstas — tas pats principas kaip * hero mygtukuose. */ .post-cta .btn::before, .service-intro__box .btn::before, .post-content .post-cta .btn::before { background: #fff; } .post-cta .btn:hover, .service-intro__box .btn:hover, .post-content .post-cta .btn:hover { color: var(--c-ink); } /* Rodykles lastelės skirtukas ant balto turi buti tamsus. */ .post-cta .btn:hover > svg, .service-intro__box .btn:hover > svg, .post-content .post-cta .btn:hover > svg { border-left-color: rgba(13, 16, 19, .18); } /* Perbraukta linija ghost mygtuke – ant balto ji irgi keiciasi. */ .post-cta .btn--ghost:hover, .post-content .post-cta .btn--ghost:hover { box-shadow: inset 0 0 0 1px transparent; } /* ---------- Pasirinkimo laukai ---------- * * Naršyklės numatytoji rodyklė yra skirtingo dydžio kiekvienoje sistemoje ir * prisispaudžia prie krašto. Čia ji piešiama pačiu fonu, o dešinėje paliekama * vietos, kad tekstas po ja nepalįstų. */ select, .woocommerce-ordering select, .woocommerce select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 12px 44px 12px 14px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%235a656e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 13px 8px; border: 1px solid var(--c-line); border-radius: var(--radius); font: inherit; font-size: 15px; line-height: 1.3; color: var(--c-ink); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease; } select:hover { border-color: var(--c-line-strong); } select:focus { /* Ziedas — is bendros `:focus-visible` taisykles failo gale. */ border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(224, 31, 38, .12); } select::-ms-expand { display: none; } /* ========================================================= DUK puslapis (page-duk.php) ========================================================= */ .faq-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; padding-bottom: 24px; } .faq-page__main { min-width: 0; } /* Grupės antraštė – ta pati juosta kaip kitose sekcijose. */ .faq-group__title { margin: 44px 0 16px; padding-top: 26px; border-top: 1px solid var(--c-line); font-size: 20px; font-weight: 800; letter-spacing: -.025em; } .faq-page__content > .faq-group__title:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .faq-page__content > p:first-child { margin: 0 0 8px; font-size: 16.5px; color: var(--c-ink-soft); } .faq-page__content > p:first-child a { color: var(--c-brand); } /* ---------- Pagalbos blokas ---------- */ .faq-page__aside { position: sticky; top: 104px; } .faq-help { position: relative; overflow: hidden; display: grid; gap: 10px; justify-items: start; padding: 26px 24px; background: var(--c-dark); color: var(--c-mute-dark); } .faq-help::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 54px); } .faq-help > * { position: relative; } .faq-help__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-brand-on-dark); } .faq-help__title { margin: 0; color: #fff; font-size: 21px; font-weight: 800; letter-spacing: -.025em; } .faq-help__text { margin: 0 0 6px; font-size: 14.5px; line-height: 1.6; } .faq-help__link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 3px; } .faq-help__link:hover { color: var(--c-brand-on-dark); } .faq-help__link svg { transition: transform .24s cubic-bezier(.2, .8, .2, 1); } .faq-help__link:hover svg { transform: translateX(3px); } /* Tamsiame bloke mygtuko uzpildas apverciamas – kitaip susilietu su fonu. */ .faq-help .btn::before { background: #fff; } .faq-help .btn:hover { color: var(--c-ink); } .faq-help .btn:hover > svg { border-left-color: rgba(13, 16, 19, .18); } @media (max-width: 1040px) { .faq-page { grid-template-columns: 1fr; gap: 28px; } .faq-page__aside { position: static; } } /* ========================================================= PRIEINAMUMAS — fokusas, judesys, lietimo zonos Blokas laikomas failo gale specialiai: taip jis yra vėlesnis uz komponentu taisykles ir nugali senus `outline: none`. ========================================================= */ /* * Fokuso ziedo spalva keiciama per kintamaji, o ne kartojant taisykle * kiekvienam blokui. Priezastis: pagrindine raudona ant tamsaus fono * duoda tik 2,7:1, o ant raudonos CTA juostos jos is viso nesimato. * WCAG 2.2 (1.4.11 / 2.4.13) reikalauja bent 3:1 su gretima spalva. */ :root { --focus-ring: var(--c-brand); } /* Tamsus blokai: sviesesnis raudonas atspalvis duoda 4,0:1. */ .topbar, .hero, .season, .service-block, .home-section--dark, .site-footer, .contact-card--accent, .post-cta, .calc, .service-intro__box, .faq-help { --focus-ring: var(--c-brand-on-dark); } /* Tuose paciuose blokuose persijungia ir konturinis mygtukas. */ .topbar, .hero, .season, .service-block, .home-section--dark, .site-footer, .contact-card--accent, .post-cta, .calc, .service-intro__box, .faq-help { --btn-outline-ink: #fff; --btn-outline-line: rgba(255, 255, 255, .38); } /* Raudona CTA juosta: cia matosi tik baltas ziedas. */ .cta { --focus-ring: #fff; } /* * Bendra fokuso zyme visiems interaktyviems elementams. `:focus-visible`, * o ne `:focus` — pele spaudant ziedas nerodomas, klaviatura visada. * `:where()` nulinis specifiskumas, todel komponentai gali ji perrasyti, * bet niekas nelieka be zymes. */ :where(a[href], area[href], button, input, select, textarea, summary, [tabindex], [contenteditable="true"]):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* Slenkantis pasiulymu sarasas isorini ziedą nukirstu — sukam i vidu. */ .suggest:focus-visible { outline-offset: -4px; } /* Ziedas neturi dingti po lipnia antraste ar mega meniu. */ .skip-link:focus { outline: 3px solid var(--c-brand); outline-offset: 2px; } /* * `:hover` be `:focus-visible` poros reiskia, kad klaviatura einant * afordansas (uzpildas, pabraukimas) nepasirodo. Zemiau — trukstamos poros. */ .btn:focus-visible::before, .hero-btn:focus-visible::before { transform: none; } .btn--primary:focus-visible, .btn--dark:focus-visible, .btn--ghost:focus-visible, .btn--outline:focus-visible { color: #fff; } .btn--ghost:focus-visible > svg, .btn--outline:focus-visible > svg { border-left-color: rgba(255, 255, 255, .26); } .hero-btn:focus-visible { color: var(--c-ink); } .hero-btn:focus-visible > svg { border-left-color: rgba(13, 16, 19, .16); } .catalog-trigger:focus-visible::before { transform: none; } .catalog-trigger:focus-visible { color: #fff; } .main-nav__menu > li > .menu-link:focus-visible::after { transform: scaleX(1) skewX(-20deg); } .main-nav .sub-menu .menu-link:focus-visible { color: var(--c-brand); background: var(--c-bg-muted); } .main-nav__service:focus-visible { color: var(--c-brand); } .header-action:focus-visible, .header-account:focus-visible, .header-wishlist:focus-visible, .header-cart:focus-visible { color: var(--c-ink); } .search-toggle:focus-visible { color: var(--c-brand); } .search-form__submit:focus-visible, .woocommerce-product-search button[type="submit"]:focus-visible { color: var(--c-brand); } .section-head__more:focus-visible { color: var(--c-brand); } .site-footer a:focus-visible { color: #fff; } .faq__q:focus-visible { outline-color: var(--focus-ring); } /* * Ikonos meniu juostoje: `display: none` isimtu uzrasa ir is prieinamumo * medzio, o pati ikona yra `aria-hidden` — nuoroda liktu be pavadinimo. * Todel slepiam vizualiai, o ne visiskai. */ @media (max-width: 900px) { .header-action__label { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } } /* * Lietimo zonos telefone. Meniu ir paieskos mygtukai buvo ~32x38 px — * maziau uz rekomenduojama 44x44 (WCAG 2.5.5). */ @media (max-width: 782px) { .nav-toggle, .search-toggle { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; } .header-action, .header-account, .header-wishlist, .header-cart { min-height: 44px; justify-content: center; } .topbar__phone, .topbar__mail { min-height: 38px; } } /* * Penki 44px mygtukai (paskyra, įsiminti, krepšelis, paieška, meniu) kartu * su logotipu netelpa siauriausiuose telefonuose (~360-400px) – antraštės * veiksmų juosta išlįsdavo už ekrano krašto ir meniu mygtuko apskritai * nesimatydavo. Paskyros ikona čia pasitraukia, o nuoroda persikelia į * meniu vidų (žr. header.php), kad funkcija neišnyktų. */ .main-nav__account { display: none; } @media (max-width: 480px) { .header-account { display: none; } .main-nav__account { display: flex; align-items: center; gap: 9px; padding: 14px 4px; border-bottom: 1px solid var(--c-line); font-size: 14px; font-weight: 700; color: var(--c-ink); } .main-nav__account svg { color: var(--c-brand); } } /* * Judesio mazinimas. Iki siol buvo isjungtos tik dvi animacijos, o * antrastes dreifas, hero svytejimas, kortelu pakilimai ir visi `transition` * liko — vestibuliariniams sutrikimams to nepakanka. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } } /* ========================================================= Prekių kortelės ir serviso raginimas straipsnio tekste ([sodlita_products], [sodlita_cta type="servisas"]) ========================================================= * * Korteles piesia WooCommerce `[products]` per tema `content-product.php`, * todel ju vidus ateina is shop.css. Cia sprendziami tik du dalykai: * * 1. shop.css tinklelis skirtas katalogui (4 stulpeliai, veliau 3, 2), o * straipsnio stulpelis ~820 px – tris korteles reikia isspausti visada, * telefone vienas. shop.css kraunamas PO main.css, o jo taisykles yra * `.woocommerce ul.products` (0,2,1), tad cia rasoma su `.post-content` * priesdeliu (0,3,1) – kitaip laimetu katalogo reiksmes. * * 2. `.post-content h2/ul/li/a` teksto taisykles (0,1,1) uzgriutu korteles: * pavadinimas gautu virsutini bruksni ir 2,2em paraste, specifikaciju * sarasas – 22 px itrauka, nuorodos – raudona pabraukima. Viskas * atstatoma tuo paciu principu kaip `.post-content .post-cta` bloke. */ .post-products { margin: 2.6em 0; } .post-content .post-products__title { margin: 0 0 16px; padding: 0 0 12px; border-top: 0; border-bottom: 2px solid var(--c-line); color: var(--c-ink); font-size: 21px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25; } /* Tinklelis: WooCommerce apvalkalas `.woocommerce.columns-3 > ul.products`. */ .post-content .post-products .woocommerce { margin: 0; } .post-content .post-products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } /* Korteles vidus: numusamos teksto taisykles, kurios cia netinka. */ .post-content .post-products ul.products li { margin: 0; } .post-content .post-products ul.products li + li { margin-top: 0; } .post-content .post-products ul.products ul, .post-content .post-products ul.products ol { margin: 0; padding-left: 0; } .post-content .post-products ul.products h2, .post-content .post-products ul.products h3 { margin: 0; padding-top: 0; border-top: 0; scroll-margin-top: 0; color: var(--c-ink); } .post-content .post-products ul.products a { color: inherit; text-decoration: none; } .post-content .post-products ul.products a:hover { color: var(--c-brand); } .post-content .post-products ul.products p { margin: 0; } /* Nuoroda „Visos prekės" – rami, po kortelemis, deriname su .post-cats__title. */ .post-content .post-products__all { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--c-ink); text-decoration: none; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .post-content .post-products__all svg { color: var(--c-line-strong); transition: transform .24s cubic-bezier(.2, .8, .2, 1), color .2s ease; } .post-content .post-products__all:hover { color: var(--c-brand); } .post-content .post-products__all:hover svg { color: var(--c-brand); transform: translateX(3px); } @media (max-width: 900px) { .post-content .post-products ul.products { gap: 12px; } } @media (max-width: 640px) { .post-content .post-products ul.products { grid-template-columns: minmax(0, 1fr); } .post-content .post-products__title { font-size: 19px; } } /* * Serviso raginimas. Ta pati tamsi palete kaip `.post-cta`, kad blokas * nesipjautu su likusiais, bet: * - kairysis raudonas kraštas ir tolygus perejimas i `--c-ink` – akis ji * atskiria nuo katalogo raginimo dar nepradejus skaityti; * - istrizainiu kryptis apversta, kad du CTA tame paciame straipsnyje * neatrodytu kaip kopijos. */ .post-cta--servisas { background: linear-gradient(105deg, var(--c-dark) 0%, var(--c-ink) 100%); box-shadow: inset 4px 0 0 var(--c-brand-on-dark); padding-left: 32px; } .post-cta--servisas::before { background: repeating-linear-gradient(-115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 44px); } .post-cta--servisas .post-cta__title, .post-content .post-cta--servisas .post-cta__title { color: #fff; } .post-cta--servisas .post-cta__text, .post-content .post-cta--servisas .post-cta__text { color: var(--c-text-on-dark); } /* Telefonas cia – pilnavertis mygtukas, ne pilka alternatyva. */ .post-cta--servisas .btn--ghost, .post-content .post-cta--servisas .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .post-cta--servisas { padding-left: 24px; } .post-cta--servisas .post-cta__actions { width: 100%; } .post-cta--servisas .post-cta__actions .btn { flex: 1 1 auto; justify-content: center; } }