/* ========================================================================== KOMPONENTAI — mygtukai, kortelės, formos, antraštė, poraštė, puslapių blokai. ========================================================================== */ /* ── Signature: pavadėlio linija ─────────────────────────────────────────── SVG kabo už viso turinio kairėje pusėje. Piešiama slenkant (leash.js). „Karabinas" (.vu-clip) — trumpas brūkšnys, jungiantis sekcijos žymę su linija. ------------------------------------------------------------------------- */ .vu-leash{position:absolute;top:0;left:0;width:calc(var(--vu-gut) + var(--vu-rail));height:100%;z-index:0;pointer-events:none} .vu-leash path{fill:none;stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke} .vu-leash__line{stroke:var(--vu-clay)} .vu-leash__ghost{stroke:var(--vu-hair)} .vu-clip{position:relative;display:flex;align-items:center;gap:.55rem;margin-bottom:.9rem} .vu-clip::before{content:"";position:absolute;right:calc(100% + .8rem);top:.62em; width:clamp(14px,3.4vw,58px);height:2px;background:var(--vu-clay);flex:none} @media(max-width:1080px){ .vu-leash{width:var(--vu-gut);opacity:.55} } /* ── Mygtukai ───────────────────────────────────────────────── */ .vu-btn{ display:inline-flex;align-items:center;gap:.5em;cursor:pointer; font-family:var(--vu-font-body);font-size:.9rem;font-weight:700;letter-spacing:.01em; padding:.9em 1.5em;border-radius:var(--vu-radius);border:1.5px solid transparent; transition:background .2s var(--vu-ease),color .2s var(--vu-ease),transform .2s var(--vu-ease); } .vu-btn-1{background:var(--vu-ink);color:var(--vu-invert)} .vu-btn-1:hover{background:#241a15;transform:translateY(-2px)} .vu-btn-2{background:transparent;color:var(--vu-ink);border-color:var(--vu-ink)} .vu-btn-2:hover{background:var(--vu-ink);color:var(--vu-invert);transform:translateY(-2px)} .vu-btn-3{background:var(--vu-clay);color:#241a15} .vu-btn-3:hover{background:#d59d70;transform:translateY(-2px)} a:focus-visible,button:focus-visible,input:focus-visible{outline:2.5px solid var(--vu-moss);outline-offset:3px;border-radius:2px} .vu-arw{font-size:.85rem;font-weight:700;color:var(--vu-bark);display:inline-flex;gap:.4em;align-items:center;transition:gap .2s var(--vu-ease),color .2s var(--vu-ease)} .vu-arw:hover{gap:.8em;color:var(--vu-ink)} /* ── Topbar + Header ────────────────────────────────────────── */ .vu-top{background:var(--vu-ink);color:var(--vu-invert);text-align:center;font-size:.775rem;letter-spacing:.02em;padding:.62em 1em;position:relative;z-index:2} .vu-hd{position:sticky;top:0;z-index:40;background:rgba(251,247,242,.9);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--vu-hair)} .vu-hd-in{display:flex;align-items:center;gap:2rem;height:80px} .vu-hd-lg img{height:52px;width:auto} .vu-nv{display:flex;gap:1.55rem;margin-inline:auto;font-size:.88rem;font-weight:600} .vu-nv a{position:relative;padding:.35em 0} .vu-nv a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--vu-clay);transition:right .26s var(--vu-ease)} .vu-nv a:hover::after{right:0} .vu-ic{display:flex;gap:1rem;align-items:center} .vu-ic button{background:none;border:0;padding:5px;cursor:pointer;color:var(--vu-ink);display:grid;place-items:center;position:relative} .vu-ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .vu-cdot{position:absolute;top:-1px;right:-3px;background:var(--vu-clay);color:#241a15;font-size:.6rem;font-weight:800;width:16px;height:16px;border-radius:50%;display:grid;place-items:center} .vu-brg{display:none} /* ── Hero ───────────────────────────────────────────────────── */ .vu-hero{position:relative;z-index:1;padding-block:clamp(48px,7vw,92px) clamp(40px,6vw,80px)} .vu-hero-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4.5vw,72px);align-items:center} .vu-hero .vu-d1{margin-bottom:1.25rem} .vu-hero .vu-lede{margin-bottom:2.1rem} .vu-hero-cta{display:flex;gap:.7rem;flex-wrap:wrap} .vu-hero-fig{position:relative;aspect-ratio:4/4.6;border-radius:var(--vu-radius);overflow:hidden;background:linear-gradient(158deg,#E9D8C5 0%,var(--vu-sand) 46%,#BE9A7D 100%)} .vu-hero-fig::after{content:"Vieta hero nuotraukai";position:absolute;inset:auto 0 0 0;padding:1.1rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(59,43,34,.45);text-align:center} .vu-hero-note{display:flex;gap:1.6rem;margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid var(--vu-hair);flex-wrap:wrap} .vu-hero-note div{font-size:.8rem;color:var(--vu-bark)} .vu-hero-note b{display:block;font-family:var(--vu-font-display);font-stretch:114%;font-size:1.15rem;color:var(--vu-ink);letter-spacing:-.02em;font-weight:600} /* ── Sekcijos antraštė ──────────────────────────────────────── */ .vu-sh{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:2.4rem;flex-wrap:wrap} /* ── Kategorijos ────────────────────────────────────────────── */ .vu-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,22px)} .vu-cat{display:block;transition:transform .26s var(--vu-ease)} .vu-cat:hover{transform:translateY(-5px)} .vu-cat-i{aspect-ratio:1/1.18;border-radius:var(--vu-radius);background:linear-gradient(160deg,#EEE0CF,#D3B69C);display:grid;place-items:center;transition:box-shadow .26s var(--vu-ease)} .vu-cat:hover .vu-cat-i{box-shadow:var(--vu-lift)} .vu-cat-i svg{width:44px;height:44px;stroke:var(--vu-ink);fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;opacity:.5} .vu-cat-m{margin-top:.85rem} .vu-cat-m span{font-size:.74rem;color:var(--vu-bark);font-variant-numeric:tabular-nums} .vu-cat-s{font-size:.8rem;color:var(--vu-bark);margin-top:.15rem} /* ── USP ────────────────────────────────────────────────────── */ .vu-usp{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,56px)} .vu-usp-i svg{width:26px;height:26px;stroke:var(--vu-ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.9rem} .vu-usp-i p{margin:.3rem 0 0;font-size:.87rem;color:var(--vu-bark);max-width:30ch} /* ── Prekės ─────────────────────────────────────────────────── */ .vu-pg{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.7vw,26px)} .vu-pc{position:relative;display:block} .vu-pc-i{aspect-ratio:1;border-radius:var(--vu-radius);background:linear-gradient(162deg,#F3E9DC,#E1CDB8);display:grid;place-items:center;transition:transform .26s var(--vu-ease),box-shadow .26s var(--vu-ease)} .vu-pc:hover .vu-pc-i{transform:translateY(-5px);box-shadow:var(--vu-lift)} .vu-pc-i svg{width:34px;height:34px;stroke:var(--vu-bark);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.45} .vu-tag{position:absolute;top:11px;left:11px;z-index:2;font-size:.61rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:.35em .7em;border-radius:3px;background:var(--vu-ink);color:var(--vu-invert)} .vu-tag-c{background:var(--vu-clay);color:#241a15} .vu-pc-t{margin-top:.85rem;font-size:.92rem;font-weight:700;line-height:1.32} .vu-pc-s{font-size:.75rem;color:var(--vu-bark);margin-top:.14rem;display:flex;align-items:center;gap:.4rem} .vu-dot{width:6px;height:6px;border-radius:50%;background:var(--vu-moss);flex:none} .vu-pc-p{margin-top:.45rem;font-family:var(--vu-font-display);font-stretch:112%;font-weight:600;font-size:1.02rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums} /* ── Apie ───────────────────────────────────────────────────── */ .vu-ab{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(28px,5vw,76px);align-items:center} .vu-ab-i{aspect-ratio:5/4.2;border-radius:var(--vu-radius);background:linear-gradient(150deg,#E7D5C0,#C7A98F);display:grid;place-items:center} .vu-ab-i span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(59,43,34,.45)} .vu-ab p{margin:1.1rem 0 1.9rem;color:var(--vu-bark);max-width:46ch} /* ── Straipsniai ────────────────────────────────────────────── */ .vu-bg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,38px)} .vu-bc-i{aspect-ratio:16/10;border-radius:var(--vu-radius);background:linear-gradient(155deg,#E9D9C6,#C4A78D);transition:transform .26s var(--vu-ease),box-shadow .26s var(--vu-ease)} .vu-bc:hover .vu-bc-i{transform:translateY(-5px);box-shadow:var(--vu-lift)} .vu-bc-m{font-size:.73rem;color:var(--vu-bark);letter-spacing:.06em;margin:.95rem 0 .4rem;font-variant-numeric:tabular-nums} .vu-bc p{margin:.4rem 0 0;font-size:.86rem;color:var(--vu-bark)} /* ── Naujienlaiškis ─────────────────────────────────────────── */ .vu-nl{background:var(--vu-ink);color:var(--vu-invert);border-radius:var(--vu-radius);padding:clamp(30px,4.6vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center} .vu-nl p{color:rgba(245,237,228,.7);font-size:.92rem;margin:.9rem 0 0;max-width:40ch} .vu-nl form{display:grid;gap:.85rem} .vu-nl input[type=email]{background:rgba(245,237,228,.07);border:1.5px solid rgba(245,237,228,.2);border-radius:var(--vu-radius);padding:.92em 1.15em;color:var(--vu-invert);font-family:inherit;font-size:.94rem} .vu-nl input[type=email]::placeholder{color:rgba(245,237,228,.42)} .vu-cns{display:flex;gap:.6rem;align-items:flex-start;font-size:.765rem;color:rgba(245,237,228,.66);line-height:1.5} .vu-cns input{margin-top:.2em;accent-color:var(--vu-clay);width:16px;height:16px;flex:none} .vu-cns a{text-decoration:underline;text-underline-offset:2px} /* ── Instagram ──────────────────────────────────────────────── */ .vu-ig{display:grid;grid-template-columns:repeat(6,1fr);gap:9px} .vu-ig i{display:block;aspect-ratio:1;border-radius:var(--vu-radius);background:linear-gradient(150deg,#EADACA,#CBAE95);transition:transform .22s var(--vu-ease)} .vu-ig i:hover{transform:scale(1.045)} /* ── Footer ─────────────────────────────────────────────────── */ .vu-ft{position:relative;z-index:1;background:var(--vu-ink);color:var(--vu-invert);padding-top:clamp(48px,6vw,84px);margin-top:clamp(56px,7vw,104px)} .vu-ft-g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.25fr;gap:clamp(24px,4vw,56px)} .vu-ft img{height:54px;margin-bottom:1.1rem} .vu-ft-g p,.vu-ft-g li,.vu-ft-g a{font-size:.84rem;color:rgba(245,237,228,.68)} .vu-ft-h{font-size:.69rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--vu-clay);margin:0 0 1rem} .vu-ft ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem} .vu-ft a:hover{color:var(--vu-invert)} .vu-so{display:flex;gap:.6rem;margin-top:1.15rem} .vu-so a{width:36px;height:36px;border:1.5px solid rgba(245,237,228,.2);border-radius:var(--vu-radius);display:grid;place-items:center;transition:.2s var(--vu-ease)} .vu-so a:hover{background:rgba(245,237,228,.1);border-color:var(--vu-clay)} .vu-so svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .vu-ft-b{border-top:1px solid rgba(245,237,228,.13);margin-top:clamp(32px,4vw,56px);padding-block:1.35rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.76rem;color:rgba(245,237,228,.48)} .vu-ft-b a{color:inherit;text-decoration:underline;text-underline-offset:2px} .vu-pay{display:flex;gap:.45rem} .vu-pay span{border:1px solid rgba(245,237,228,.2);border-radius:3px;padding:.22em .55em;font-size:.63rem;letter-spacing:.07em} /* ── Responsive ─────────────────────────────────────────────── */ @media(max-width:1080px){ .vu-nv{display:none}.vu-brg{display:grid} .vu-hero-g,.vu-ab,.vu-nl{grid-template-columns:1fr} .vu-cats,.vu-pg{grid-template-columns:repeat(2,1fr)} .vu-bg{grid-template-columns:1fr} .vu-usp{grid-template-columns:1fr;gap:26px} .vu-ft-g{grid-template-columns:1fr 1fr} .vu-ig{grid-template-columns:repeat(3,1fr)} .vu-rail{padding-left:var(--vu-gut)} .vu-leash{width:var(--vu-gut);opacity:.55} .vu-clip::before{width:7px;height:7px} } @media(max-width:560px){ .vu-ft-g{grid-template-columns:1fr} .vu-hero-fig{aspect-ratio:4/3.4} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition-duration:.01ms!important;animation-duration:.01ms!important} } /* ========================================================================== PUSLAPIŲ BLOKAI — katalogas, prekės kortelė ========================================================================== */ /* ── Bendra puslapiams ─────────────────────────────────────── */ .vu-nv a.vu-on::after{right:0} .vu-crumb{font-size:.78rem;color:var(--vu-bark);display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.3rem} .vu-crumb a:hover{color:var(--vu-ink);text-decoration:underline;text-underline-offset:2px} .vu-crumb span{opacity:.45} .vu-phead{padding-block:clamp(30px,4vw,54px) clamp(22px,3vw,34px)} .vu-phead .vu-lede{margin-top:.95rem} /* kategorijų perjungimas */ .vu-swi{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.6rem} .vu-swi a{border:1.5px solid var(--vu-hair);border-radius:4px;padding:.45em .9em;font-size:.83rem;font-weight:700;color:var(--vu-bark);transition:.18s var(--vu-ease)} .vu-swi a:hover{border-color:var(--vu-bark);color:var(--vu-ink)} .vu-swi a.vu-on{background:var(--vu-ink);color:var(--vu-invert);border-color:var(--vu-ink)} /* ── Katalogas ─────────────────────────────────────────────── */ .vu-cat-l{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(24px,3.4vw,56px);align-items:start} .vu-fl{position:sticky;top:104px} .vu-fl-g{border-top:1px solid var(--vu-hair);padding:1.1rem 0} .vu-fl-g:first-child{border-top:0;padding-top:0} .vu-fl-h{font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--vu-ink);margin:0 0 .8rem} .vu-fl-l{list-style:none;margin:0;padding:0;display:grid;gap:.42rem} .vu-fl-l a{font-size:.87rem;color:var(--vu-bark)} .vu-fl-l a:hover{color:var(--vu-ink)} .vu-fl-l a.vu-on{color:var(--vu-ink);font-weight:700} .vu-chips{display:flex;gap:.35rem;flex-wrap:wrap} .vu-chip{border:1.5px solid var(--vu-hair);background:transparent;border-radius:4px;padding:.4em .72em;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;color:var(--vu-ink);transition:.18s var(--vu-ease)} .vu-chip:hover{border-color:var(--vu-bark)} .vu-chip[aria-pressed="true"]{background:var(--vu-ink);color:var(--vu-invert);border-color:var(--vu-ink)} .vu-cbx{display:flex;align-items:center;gap:.55rem;font-size:.87rem;color:var(--vu-bark);cursor:pointer;padding:.13rem 0} .vu-cbx input{accent-color:var(--vu-clay);width:15px;height:15px;flex:none} .vu-rng{display:flex;align-items:center;gap:.5rem} .vu-rng input{width:100%;min-width:0;border:1.5px solid var(--vu-hair);border-radius:4px;padding:.5em .6em;font:inherit;font-size:.83rem;background:transparent;color:var(--vu-ink)} .vu-tbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--vu-hair)} .vu-tbar p{margin:0;font-size:.84rem;color:var(--vu-bark)} .vu-sel{border:1.5px solid var(--vu-hair);border-radius:4px;padding:.55em 2em .55em .75em;font:inherit;font-size:.84rem;font-weight:600;background:transparent;color:var(--vu-ink);cursor:pointer;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--vu-bark) 50%),linear-gradient(135deg,var(--vu-bark) 50%,transparent 50%); background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat} .vu-pg3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.7vw,26px)} .vu-pgn{display:flex;gap:.4rem;justify-content:center;margin-top:clamp(32px,4vw,56px)} .vu-pgn a{min-width:38px;height:38px;display:grid;place-items:center;border:1.5px solid var(--vu-hair);border-radius:4px;font-size:.85rem;font-weight:700;padding-inline:.6rem} .vu-pgn a.vu-on{background:var(--vu-ink);color:var(--vu-invert);border-color:var(--vu-ink)} .vu-pgn a:hover:not(.vu-on){border-color:var(--vu-bark)} .vu-seo{margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--vu-hair);max-width:66ch} .vu-seo p{margin:.85rem 0 0;font-size:.9rem;color:var(--vu-bark)} .vu-seo a{text-decoration:underline;text-underline-offset:2px} /* ── Prekės kortelė ────────────────────────────────────────── */ .vu-pd{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,4vw,68px);align-items:start} .vu-pd-g{position:sticky;top:104px} .vu-gal-m{aspect-ratio:1;border-radius:var(--vu-radius);background:linear-gradient(160deg,#F3E9DC,#DFC9B2);display:grid;place-items:center;position:relative} .vu-gal-m span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(59,43,34,.42)} .vu-gal-t{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:9px} .vu-gal-t i{display:block;aspect-ratio:1;border-radius:4px;background:linear-gradient(155deg,#EFE2D2,#D5BCA3);cursor:pointer;border:2px solid transparent;transition:.18s var(--vu-ease)} .vu-gal-t i.vu-on,.vu-gal-t i:hover{border-color:var(--vu-clay)} .vu-pi-top{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.8rem} .vu-pi-price{font-family:var(--vu-font-display);font-stretch:114%;font-weight:600;font-size:clamp(1.7rem,2.5vw,2.2rem);letter-spacing:-.03em;margin:1rem 0 .3rem;font-variant-numeric:tabular-nums} .vu-pi-vat{font-size:.79rem;color:var(--vu-bark)} .vu-pi-d{margin:1.3rem 0 0;color:var(--vu-bark);font-size:.94rem;max-width:46ch} .vu-opt{margin-top:1.7rem} .vu-opt-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem} .vu-opt-h b{font-size:.79rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase} .vu-opt-h a{font-size:.79rem;color:var(--vu-bark);text-decoration:underline;text-underline-offset:2px} .vu-opt-h a:hover{color:var(--vu-ink)} .vu-sw{display:flex;gap:.5rem;flex-wrap:wrap} .vu-sw button{width:34px;height:34px;border-radius:50%;border:2px solid var(--vu-hair);cursor:pointer;padding:0;transition:.18s var(--vu-ease)} .vu-sw button[aria-pressed="true"]{border-color:var(--vu-ink);box-shadow:0 0 0 2px var(--vu-paper) inset} .vu-buy{display:flex;gap:.6rem;margin-top:1.9rem;flex-wrap:wrap} .vu-qty{display:flex;align-items:center;border:1.5px solid var(--vu-hair);border-radius:var(--vu-radius);overflow:hidden;flex:none} .vu-qty button{width:40px;height:100%;min-height:46px;background:none;border:0;font-size:1.05rem;cursor:pointer;color:var(--vu-ink);font-weight:700} .vu-qty button:hover{background:var(--vu-paper-2)} .vu-qty span{min-width:34px;text-align:center;font-weight:700;font-size:.94rem;font-variant-numeric:tabular-nums} .vu-buy .vu-btn-1{flex:1;justify-content:center;min-width:180px} .vu-trust{display:grid;gap:.65rem;margin-top:1.7rem;padding-top:1.5rem;border-top:1px solid var(--vu-hair)} .vu-trust div{display:flex;gap:.65rem;align-items:flex-start;font-size:.85rem;color:var(--vu-bark)} .vu-trust svg{width:17px;height:17px;stroke:var(--vu-moss);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:.22em} .vu-acc{margin-top:1.9rem;border-top:1px solid var(--vu-hair)} .vu-acc details{border-bottom:1px solid var(--vu-hair)} .vu-acc summary{list-style:none;cursor:pointer;padding:1.05rem 0;font-size:.92rem;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:1rem} .vu-acc summary::-webkit-details-marker{display:none} .vu-acc summary::after{content:"+";font-family:var(--vu-font-display);font-size:1.25rem;font-weight:400;color:var(--vu-clay);line-height:1} .vu-acc details[open] summary::after{content:"–"} .vu-acc-b{padding-bottom:1.2rem;font-size:.89rem;color:var(--vu-bark)} .vu-acc-b p{margin:0 0 .7rem} .vu-acc-b ul{margin:0;padding-left:1.15rem;display:grid;gap:.35rem} .vu-tbl{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:.3rem} .vu-tbl th,.vu-tbl td{text-align:left;padding:.6em .7em;border-bottom:1px solid var(--vu-hair);font-variant-numeric:tabular-nums} .vu-tbl th{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vu-ink);font-weight:800} .vu-tbl td{color:var(--vu-bark)} .vu-tbl tr:last-child td{border-bottom:0} .vu-note{margin-top:.8rem;font-size:.78rem;color:var(--vu-bark);background:var(--vu-paper-2);border-left:2px solid var(--vu-clay);padding:.7rem .85rem;border-radius:0 4px 4px 0} @media(max-width:1080px){ .vu-cat-l,.vu-pd{grid-template-columns:1fr} .vu-pd-g{position:static} .vu-fl{position:static} .vu-pg3{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .vu-pg3{grid-template-columns:repeat(2,1fr)} .vu-buy .vu-btn-1{min-width:0;width:100%} } /* ========================================================================== PUSLAPIŲ BLOKAI — straipsniai, apie, kontaktai, DUK ========================================================================== */ /* ── Straipsnių sąrašas ────────────────────────────────────── */ .vu-feat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center; background:var(--vu-paper-2);border-radius:var(--vu-radius);padding:clamp(18px,2.4vw,32px);margin-bottom:clamp(36px,4.5vw,64px)} .vu-feat-i{aspect-ratio:16/11;border-radius:var(--vu-radius);background:linear-gradient(155deg,#E9D9C6,#C4A78D)} .vu-feat h2{margin:.7rem 0 .8rem} .vu-feat p{color:var(--vu-bark);font-size:.94rem;margin:0 0 1.3rem;max-width:44ch} .vu-blist{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px)} .vu-bc-tag{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--vu-clay);margin-bottom:.5rem} /* ── Vienas straipsnis ─────────────────────────────────────── */ .vu-art{max-width:68ch} .vu-art-meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--vu-bark);margin:1.2rem 0 0} .vu-art-hero{aspect-ratio:16/9;border-radius:var(--vu-radius);background:linear-gradient(155deg,#E9D9C6,#C4A78D); margin:clamp(24px,3vw,40px) 0;display:grid;place-items:center} .vu-art-hero span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(59,43,34,.42)} .vu-prose{max-width:68ch} .vu-prose p{margin:0 0 1.15rem;font-size:1.02rem;line-height:1.72;color:var(--vu-bark)} .vu-prose h2{margin:2.3rem 0 .9rem;font-size:clamp(1.4rem,2.2vw,1.9rem)} .vu-prose h3{margin:1.8rem 0 .6rem} .vu-prose ul,.vu-prose ol{margin:0 0 1.15rem;padding-left:1.3rem;display:grid;gap:.5rem;color:var(--vu-bark);font-size:1.02rem;line-height:1.6} .vu-prose strong{color:var(--vu-ink)} .vu-prose a{text-decoration:underline;text-underline-offset:2px} .vu-pull{border-left:3px solid var(--vu-clay);padding:.3rem 0 .3rem 1.3rem;margin:1.8rem 0; font-family:var(--vu-font-display);font-stretch:112%;font-weight:600;font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.3;letter-spacing:-.02em;color:var(--vu-ink)} .vu-cta-box{background:var(--vu-paper-2);border-radius:var(--vu-radius);padding:clamp(20px,2.6vw,32px);margin:2.2rem 0} .vu-cta-box p{margin:.5rem 0 1.2rem;font-size:.93rem} /* ── Apie mus ──────────────────────────────────────────────── */ .vu-ab2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4.5vw,72px);align-items:center} .vu-ab2-i{aspect-ratio:4/4.4;border-radius:var(--vu-radius);background:linear-gradient(150deg,#E7D5C0,#C7A98F);display:grid;place-items:center} .vu-ab2-i span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(59,43,34,.45)} .vu-vals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,52px)} .vu-vals svg{width:26px;height:26px;stroke:var(--vu-ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.9rem} .vu-vals p{margin:.35rem 0 0;font-size:.89rem;color:var(--vu-bark)} .vu-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px); border-top:1px solid var(--vu-hair);border-bottom:1px solid var(--vu-hair);padding-block:clamp(24px,3vw,40px)} .vu-stats b{display:block;font-family:var(--vu-font-display);font-stretch:116%;font-weight:600; font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.035em;line-height:1} .vu-stats span{font-size:.84rem;color:var(--vu-bark);display:block;margin-top:.3rem} /* ── Kontaktai ─────────────────────────────────────────────── */ .vu-kt{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(26px,4vw,68px);align-items:start} .vu-kt-c{display:grid;gap:1.5rem} .vu-kt-r{display:flex;gap:.9rem;align-items:flex-start} .vu-kt-r svg{width:19px;height:19px;stroke:var(--vu-clay);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:.28em} .vu-kt-r b{display:block;font-size:.69rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--vu-bark);margin-bottom:.15rem} .vu-kt-r a,.vu-kt-r p{font-size:.98rem;margin:0;font-weight:600} .vu-kt-r a:hover{color:var(--vu-clay)} .vu-kt-r small{display:block;font-size:.82rem;color:var(--vu-bark);font-weight:400;margin-top:.2rem} .vu-frm{background:var(--vu-paper-2);border-radius:var(--vu-radius);padding:clamp(22px,3vw,40px)} .vu-frm-g{display:grid;grid-template-columns:1fr 1fr;gap:.9rem} .vu-fld{display:grid;gap:.4rem;margin-bottom:.9rem} .vu-fld label{font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--vu-bark)} .vu-fld input,.vu-fld textarea,.vu-fld select{border:1.5px solid var(--vu-hair);border-radius:4px;padding:.75em .9em; font:inherit;font-size:.93rem;background:var(--vu-paper);color:var(--vu-ink);width:100%} .vu-fld textarea{min-height:130px;resize:vertical} .vu-frm .vu-cbx{align-items:flex-start;font-size:.79rem;line-height:1.5;margin:.4rem 0 1.3rem} .vu-frm .vu-cbx input{margin-top:.18em} .vu-frm .vu-cbx a{text-decoration:underline;text-underline-offset:2px} .vu-frm .vu-btn-1{width:100%;justify-content:center} .vu-rekv{margin-top:clamp(32px,4vw,52px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--vu-hair); display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 2.5rem;max-width:52rem} .vu-rekv b{display:block;font-size:.69rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--vu-bark);margin-bottom:.2rem} .vu-rekv p{margin:0;font-size:.92rem} /* ── DUK ───────────────────────────────────────────────────── */ .vu-duk{max-width:74ch} .vu-duk h2{margin:2.4rem 0 .6rem;font-size:clamp(1.2rem,1.8vw,1.5rem)} .vu-duk h2:first-child{margin-top:0} @media(max-width:1080px){ .vu-feat,.vu-ab2,.vu-kt{grid-template-columns:1fr} .vu-blist,.vu-vals{grid-template-columns:1fr} .vu-stats{grid-template-columns:1fr;gap:20px} .vu-rekv{grid-template-columns:1fr} } @media(max-width:640px){ .vu-frm-g{grid-template-columns:1fr} } /* ========================================================================== GUTENBERG BLOKŲ INTEGRACIJA Prototipe komponentai buvo kuriami savo HTML struktūra. WordPress'e tas pats turinys išeina per core blokus (wp-block-columns, wp-block-group), kurie turi savo išdėstymo taisykles. Ši sekcija sujungia abu dalykus: dizaino klasės dedamos ant WP blokų, o čia joms priskiriamas teisingas išdėstymas. ========================================================================== */ /* --- Turinio ritmas ------------------------------------------------------- Skirtukas naudojamas kaip sekcijų riba, todėl jam duodamas sekcijos tarpas. ------------------------------------------------------------------------- */ .entry-content .wp-block-separator { margin-block: clamp(48px, 6vw, 88px); background: var(--vu-hair); height: 1px; border: 0; opacity: 1; } .entry-content .wp-block-columns { margin-block: clamp(20px, 2.6vw, 36px); gap: clamp(16px, 2vw, 28px); align-items: flex-start; } /* --- Nuotraukos vieta ----------------------------------------------------- Rodoma tol, kol redaktorius nepakeičia jos tikru vaizdo bloku. ------------------------------------------------------------------------- */ .vu-img-slot { display: grid; place-items: center; min-height: 200px; padding: 2rem 1.25rem; border: 1.5px dashed var(--vu-hair); border-radius: var(--vu-radius); background: linear-gradient(160deg, #F3E9DC, #E1CDB8); } .vu-img-slot p { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(59, 43, 34, .5); text-align: center; max-width: 26ch; } /* --- Kategorijų juosta ---------------------------------------------------- */ .wp-block-columns.vu-cats .vu-img-slot { min-height: 0; aspect-ratio: 1/1.1; } .wp-block-columns.vu-cats h3 { margin: .85rem 0 .15rem; } .wp-block-columns.vu-cats h3 a { text-decoration: none; } .wp-block-columns.vu-cats h3 a:hover { color: var(--vu-clay); } .wp-block-columns.vu-cats p { font-size: .8rem; } /* --- Hero ----------------------------------------------------------------- */ .wp-block-columns.vu-hero-g { align-items: center; } /* Be aspect-ratio: siauroje kolonoje 4/4.6 išaugina dėžutę iki ~700 px ir ji nustelbia visą hero. Fiksuotas aukštis elgiasi nuspėjamai. */ .wp-block-columns.vu-hero-g .vu-img-slot { min-height: clamp(280px, 30vw, 420px); } /* --- Privalumų ir vertybių juostos ---------------------------------------- */ .wp-block-columns.vu-usp h3, .wp-block-columns.vu-vals h3 { margin-bottom: .35rem; } .wp-block-columns.vu-usp p, .wp-block-columns.vu-vals p { font-size: .89rem; color: var(--vu-bark); margin: 0; } /* --- Skaičių juosta ------------------------------------------------------- */ .wp-block-columns.vu-stats { border-top: 1px solid var(--vu-hair); border-bottom: 1px solid var(--vu-hair); padding-block: clamp(22px, 3vw, 38px); } .wp-block-columns.vu-stats p { margin: 0; font-size: .84rem; color: var(--vu-bark); } .wp-block-columns.vu-stats strong { display: block; font-family: var(--vu-font-display); font-stretch: 116%; font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.3rem); letter-spacing: -.035em; line-height: 1; color: var(--vu-ink); margin-bottom: .25rem; } /* --- Kontaktų išdėstymas -------------------------------------------------- */ .wp-block-columns.vu-kt p { margin-bottom: 1.1rem; } .wp-block-columns.vu-kt strong { display: block; font-family: var(--vu-font-body); font-size: .69rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--vu-bark); margin-bottom: .15rem; } /* --- Kvietimo veikti blokas ----------------------------------------------- */ .wp-block-group.vu-cta-box { background: var(--vu-paper-2); border-radius: var(--vu-radius); padding: clamp(20px, 2.6vw, 34px); margin-block: clamp(28px, 3.4vw, 44px); } .wp-block-group.vu-cta-box > *:last-child { margin-bottom: 0; } /* --- Sekcijos žymė su brūkšniu -------------------------------------------- */ .entry-content p.vu-util { margin-bottom: .6rem; } /* --- DUK akordeonas (core/details) ---------------------------------------- */ .entry-content .wp-block-details { border-bottom: 1px solid var(--vu-hair); padding-block: .3rem; } .entry-content .wp-block-details summary { cursor: pointer; padding: 1rem 0; font-size: .95rem; font-weight: 700; color: var(--vu-ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .entry-content .wp-block-details summary::-webkit-details-marker { display: none; } .entry-content .wp-block-details summary::after { content: "+"; font-family: var(--vu-font-display); font-size: 1.3rem; font-weight: 400; color: var(--vu-clay); line-height: 1; } .entry-content .wp-block-details[open] summary::after { content: "–"; } .entry-content .wp-block-details p { margin: 0 0 1rem; font-size: .9rem; } /* --- Naujausi įrašai ------------------------------------------------------ */ .wp-block-latest-posts.is-grid { gap: clamp(18px, 2.4vw, 36px); } .wp-block-latest-posts__featured-image img { border-radius: var(--vu-radius); width: 100%; aspect-ratio: 16/10; object-fit: cover; } .wp-block-latest-posts__post-title { font-family: var(--vu-font-display); font-stretch: var(--vu-stretch-tight); font-weight: 600; font-size: 1.08rem; letter-spacing: -.02em; line-height: 1.2; color: var(--vu-ink); text-decoration: none; display: inline-block; margin-top: .8rem; } .wp-block-latest-posts__post-title:hover { color: var(--vu-clay); } .wp-block-latest-posts__post-date { font-size: .75rem; color: var(--vu-bark); } .wp-block-latest-posts__post-excerpt { font-size: .87rem; color: var(--vu-bark); } @media (max-width: 780px) { .entry-content .wp-block-columns { gap: 20px; } .wp-block-columns.vu-hero-g .vu-img-slot { min-height: 240px; } } /* --- Hero skaičių eilutė -------------------------------------------------- Prototipe ji ėjo iškart po mygtukais, atskirta plona linija. SVARBU: WordPress kolonas dalija po lygiai per visą plotį. Prototipe šie trys skaičiai stovėjo glaudžiai vienas šalia kito, o ne išsimėtę per ekraną — todėl kolonoms nuimamas lygus dalijimas ir jos glaudžiasi prie turinio. ------------------------------------------------------------------------- */ .wp-block-columns.vu-hero-note { border-top: 1px solid var(--vu-hair); padding-top: clamp(16px, 2vw, 24px); margin-top: clamp(4px, 1vw, 12px); flex-wrap: wrap; gap: clamp(18px, 2.6vw, 40px); } .wp-block-columns.vu-hero-note .wp-block-column { flex: 0 0 auto !important; flex-basis: auto !important; min-width: 0; } .wp-block-columns.vu-hero-note p { margin: 0; font-size: .8rem; color: var(--vu-bark); } .wp-block-columns.vu-hero-note strong { display: block; font-family: var(--vu-font-display); font-stretch: 114%; font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; color: var(--vu-ink); line-height: 1.1; margin-bottom: .15rem; } /* --- Linijinės ikonos ----------------------------------------------------- */ .vu-ico { width: 30px; height: 30px; stroke: var(--vu-ink); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; display: block; margin-bottom: .9rem; } .wp-block-columns.vu-cats .vu-ico { opacity: .5; } /* --- Naujienlaiškio blokas (tamsus) -------------------------------------- Vienintelė tamsi sala puslapio viduryje. Tekstai apverčiami, nes ant rašalo spalvos fono įprastas tekstas neįskaitomas. ------------------------------------------------------------------------- */ .wp-block-group.vu-nl { background: var(--vu-ink); border-radius: var(--vu-radius); padding: clamp(28px, 4vw, 56px); margin-block: clamp(32px, 4vw, 56px); } .wp-block-group.vu-nl h1, .wp-block-group.vu-nl h2, .wp-block-group.vu-nl h3 { color: var(--vu-invert); } .wp-block-group.vu-nl p { color: rgba(245, 237, 228, .72); } .wp-block-group.vu-nl .vu-util { color: var(--vu-clay); } .wp-block-group.vu-nl .vu-clip::before { background: var(--vu-clay); } .wp-block-group.vu-nl > *:last-child { margin-bottom: 0; } .wp-block-group.vu-nl .wp-block-button__link { background: var(--vu-clay); color: #241A15; } .wp-block-group.vu-nl .wp-block-button__link:hover { background: #D59D70; } /* Pastaba tamsiame bloke — kitaip ji lieka šviesi ant šviesaus. */ .wp-block-group.vu-nl .vu-note { background: rgba(245, 237, 228, .07); color: rgba(245, 237, 228, .8); } /* --- Instagram juosta ----------------------------------------------------- */ .wp-block-columns.vu-ig { gap: 10px; } .wp-block-columns.vu-ig .vu-img-slot { min-height: 0; aspect-ratio: 1; padding: .75rem; } .wp-block-columns.vu-ig .vu-img-slot p { font-size: .6rem; letter-spacing: .1em; } @media (max-width: 780px) { .wp-block-columns.vu-ig { flex-wrap: wrap; } .wp-block-columns.vu-ig .wp-block-column { flex-basis: calc(33.333% - 7px) !important; } } /* --- Teksto eilutės ilgis ------------------------------------------------- Net ir susiaurinus turinį, pastraipos plačiame ekrane išeina per ilgos. Skaitymui patogus plotis — apie 70 ženklų. ------------------------------------------------------------------------- */ .entry-content > p, .entry-content > ul, .entry-content > ol { max-width: 68ch; } .wp-block-columns.vu-usp p, .wp-block-columns.vu-vals p { max-width: 32ch; } .wp-block-group.vu-nl p { max-width: 46ch; } /* ========================================================================== 1.5.0 — likę prototipo v2 elementai ========================================================================== */ /* --- Sekcijos antraštė su nuoroda dešinėje ------------------------------- Prototipe kiekviena sekcija turėjo antraštę kairėje ir nuorodą („Visos prekės →") dešinėje, sulygiuotą su antraštės apatine linija. ------------------------------------------------------------------------- */ .wp-block-columns.vu-sh { align-items: flex-end; gap: clamp(16px, 3vw, 40px); margin-block: clamp(40px, 5vw, 72px) clamp(18px, 2.4vw, 32px); padding-bottom: .9rem; border-bottom: 1px solid var(--vu-hair); flex-wrap: nowrap; } /* Nuorodos kolona nesitempia — antraštei paliekama visa likusi vieta. */ .wp-block-columns.vu-sh > .wp-block-column:last-child { flex-basis: auto !important; flex-grow: 0; text-align: right; white-space: nowrap; } /* Antraštė sekcijos galvoje jau turi apatinį rėmelį — dvigubi tarpai nereikalingi. */ .wp-block-columns.vu-sh h2, .wp-block-columns.vu-sh h3 { margin-block: 0; } .wp-block-columns.vu-sh .vu-util { margin-bottom: .5rem; } .wp-block-columns.vu-sh p { margin: 0; max-width: none; } /* --- Nuoroda su rodykle --------------------------------------------------- */ .vu-arw a, a.vu-arw { font-family: var(--vu-font-body); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vu-ink); text-decoration: none !important; border-bottom: 1.5px solid var(--vu-clay); padding-bottom: 2px; transition: color .2s var(--vu-ease), border-color .2s var(--vu-ease); } .vu-arw a:hover, a.vu-arw:hover { color: var(--vu-clay); border-color: var(--vu-ink); } /* --- Sekcija su kitokiu fonu per visą ekrano plotį ------------------------ Turinys lieka 1280 px konteineryje, o fonas eina iki ekrano kraštų. Naudojamas box-shadow + clip-path, o ne 100vw: 100vw neįskaičiuoja slinkties juostos pločio ir atsiranda horizontali slinktis. ------------------------------------------------------------------------- */ .wp-block-group.vu-band { position: relative; background: var(--vu-paper-2); box-shadow: 0 0 0 100vmax var(--vu-paper-2); clip-path: inset(0 -100vmax); padding-block: clamp(36px, 5vw, 72px); margin-block: clamp(48px, 6vw, 88px); } .wp-block-group.vu-band > *:first-child { margin-top: 0; } .wp-block-group.vu-band > *:last-child { margin-bottom: 0; } /* Juostos viduje esanti sekcijos antraštė — rėmelis tamsesnis, kad matytųsi. */ .wp-block-group.vu-band .wp-block-columns.vu-sh { margin-top: 0; border-bottom-color: rgba(59, 43, 34, .14); } /* --- Naujienlaiškis dviem stulpeliais ------------------------------------- Prototipe kairėje — tekstas, dešinėje — forma. Vienu stulpeliu blokas išsitempdavo į aukštą juodą stačiakampį. ------------------------------------------------------------------------- */ .wp-block-group.vu-nl .wp-block-columns.vu-nl-g { align-items: center; gap: clamp(24px, 4vw, 64px); margin-block: 0; } .wp-block-group.vu-nl .wp-block-columns.vu-nl-g > .wp-block-column > *:first-child { margin-top: 0; } .wp-block-group.vu-nl .wp-block-columns.vu-nl-g > .wp-block-column > *:last-child { margin-bottom: 0; } .wp-block-group.vu-nl .wp-block-columns.vu-nl-g p { max-width: 38ch; } /* --- Ikona nuotraukos vietos dėžutėje ------------------------------------- */ .vu-img-slot .vu-ico { width: 34px; height: 34px; stroke: rgba(59, 43, 34, .42); margin: 0 0 .7rem; } .wp-block-columns.vu-cats .vu-img-slot .vu-ico { opacity: 1; } /* --- Antraščių nuorodos nepabraukiamos ----------------------------------- base.css pabraukia visas turinio nuorodas. Kortelių pavadinimuose (h2/h3 su nuoroda) pabraukimas atrodo kaip klaida. ------------------------------------------------------------------------- */ .entry-content h1 a, .entry-content h2 a, .entry-content h3 a, .entry-content h4 a, .entry-content .wp-block-latest-posts__post-title, .entry-content .wp-block-post-title a { text-decoration: none; transition: color .2s var(--vu-ease); } .entry-content h1 a:hover, .entry-content h2 a:hover, .entry-content h3 a:hover, .entry-content h4 a:hover, .entry-content .wp-block-latest-posts__post-title:hover, .entry-content .wp-block-post-title a:hover { color: var(--vu-clay); } /* --- Mobilus vaizdas ------------------------------------------------------ */ @media (max-width: 780px) { .wp-block-columns.vu-sh { flex-wrap: wrap; align-items: flex-start; } .wp-block-columns.vu-sh > .wp-block-column:last-child { text-align: left; flex-basis: 100% !important; } .wp-block-group.vu-band { padding-block: 34px; } } /* --- 1.5.0 pataisos ------------------------------------------------------- */ /* Prototipo `.vu-nl` buvo pats dviejų stulpelių tinklelis. WordPress versijoje stulpelius daro vidinis `vu-nl-g` blokas, todėl išorinis tinklelis turinį suspausdavo į pusę pločio. */ .wp-block-group.vu-nl { display: block; } /* base.css paryškintam tekstui duoda rašalo spalvą — tamsiame bloke jis dingsta. */ .wp-block-group.vu-nl .vu-note, .wp-block-group.vu-nl .vu-note strong, .wp-block-group.vu-nl strong { color: rgba(245, 237, 228, .82); } /* ========================================================================== PORAŠTĖ (Kadence) Struktūra kuriama Customizer'yje (Konfigūruoti → Poraštė), tema tik pritaiko išvaizdą prototipo v2 poraštei. Selektoriai taikomi Kadence poraštės klasėms, todėl valdiklius galima laisvai keisti — stilius lieka. Spalvos aprašytos kadence.css (fonas, nuorodos, valdiklių antraštės). ========================================================================== */ /* --- Vidiniai tarpai ------------------------------------------------------ */ .site-middle-footer-inner-wrap { padding-block: clamp(44px, 6vw, 84px) clamp(28px, 3.5vw, 48px); gap: clamp(24px, 4vw, 56px); } /* --- Valdiklių antraštės -------------------------------------------------- Prototipe `.ft-h`: mažas versaliukas, molio spalva. kadence.css jau nustato spalvą ir šriftą — čia lieka tik tarpai. */ #colophon .widget-title, .site-footer .widget-title { margin: 0 0 1rem; line-height: 1.2; } /* --- Sąrašai ir meniu ----------------------------------------------------- */ #colophon .footer-widget-area ul, #colophon .widget_nav_menu ul { list-style: none; margin: 0; padding: 0; } #colophon .footer-widget-area li { margin: 0 0 .52rem; font-size: .84rem; line-height: 1.55; } #colophon .footer-widget-area li:last-child { margin-bottom: 0; } #colophon .site-middle-footer-wrap .footer-widget-area p { font-size: .84rem; line-height: 1.65; max-width: 34ch; margin: 0 0 .8rem; } #colophon .footer-widget-area a { text-decoration: none; transition: color .2s var(--vu-ease); } /* --- Logotipas ------------------------------------------------------------ */ .vu-ft-logo { display: block; height: auto; max-width: 168px; margin-bottom: 1.1rem; } /* --- Socialinės ikonos (Kadence poraštės elementas „Social") -------------- */ #colophon .footer-social-wrap { margin-top: 1.15rem; } #colophon .social-button { width: 36px; height: 36px; border: 1.5px solid rgba(245, 237, 228, .2); border-radius: var(--vu-radius); background: transparent; color: rgba(245, 237, 228, .82); transition: background .2s var(--vu-ease), border-color .2s var(--vu-ease); } #colophon .social-button:hover { background: rgba(245, 237, 228, .1); border-color: var(--vu-clay); color: var(--vu-invert); } /* --- Apatinė juosta ------------------------------------------------------- */ .site-bottom-footer-inner-wrap { border-top: 1px solid rgba(245, 237, 228, .13); padding-block: 1.35rem; gap: 1rem; font-size: .76rem; color: rgba(245, 237, 228, .48); } .site-bottom-footer-inner-wrap p { margin: 0; font-size: inherit; line-height: 1.6; } /* Didesnis specifiškumas nei `#colophon a` (kadence.css) — kitaip apatinės juostos nuorodos šviesesnės už jas supantį tekstą, o prototipe jos vienodos. */ #colophon .site-bottom-footer-inner-wrap a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(245, 237, 228, .3); } #colophon .site-bottom-footer-inner-wrap a:hover { color: var(--vu-invert); text-decoration-color: var(--vu-clay); } /* Apatinė juosta: skiltys pagal turinio plotį, o ne per pusę — kitaip teisinių dokumentų eilutė laužoma į tris eilutes, nors vietos ekrane yra. */ @media (min-width: 768px) { .site-bottom-footer-inner-wrap.site-footer-row-columns-2 { grid-template-columns: auto auto !important; justify-content: space-between; } } /* --- Mokėjimo ženklai ----------------------------------------------------- */ .vu-pay { display: flex; gap: .45rem; flex-wrap: wrap; } .vu-pay span { border: 1px solid rgba(245, 237, 228, .2); border-radius: 3px; padding: .22em .55em; font-size: .63rem; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; } /* Antroje apatinės juostos skiltyje ženklai lygiuojami dešinėje. */ .site-bottom-footer-section-2 .vu-pay { justify-content: flex-end; } @media (max-width: 767px) { .site-bottom-footer-inner-wrap { text-align: left; } .site-bottom-footer-section-2 .vu-pay { justify-content: flex-start; } #colophon .footer-widget-area p { max-width: none; } } /* Stulpelių proporcijos kaip prototipe. Kadence siūlo tik kelis fiksuotus išdėstymus (lygūs, kairė platesnė ir pan.), todėl proporcijos nurodomos čia — nesvarbu, kuris išdėstymas pasirinktas Customizer'yje. !important būtinas: Kadence generuoja savo taisykles inline