/* ========================================================================== Pagarba žmogui — main stylesheet Navy #101B33 · Cream #F7F3EA · Paper #FCFAF6 · Gold #D4A24C · Charcoal #2A3245 Brand gold gradient #F3C77A → #D4A24C. Navy #101B33 (deep — matches coming-soon, client preference; brand book navy #1B2333 to be updated to this). Cormorant Garamond (display) · Manrope (UI) · JetBrains Mono (labels) ========================================================================== */ :root { --navy: #101B33; --navy-hover: #1C2A4A; --cream: #F7F3EA; --paper: #FCFAF6; --gold: #D4A24C; --gold-soft: #E0BC7C; --charcoal: #2A3245; --line: #DED7C8; --line-2: #E8E2D4; --stone: #8B8577; --stone-2: #AAA396; --serif: "Cormorant Garamond", Georgia, serif; --sans: "Manrope", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --gutter: clamp(24px, 7vw, 100px); --content: 1240px; --section-y: clamp(88px, 12vw, 168px); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--charcoal); font-family: var(--sans); font-weight: 300; font-size: clamp(16px, 1.1vw, 17px); line-height: 1.8; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: var(--gold); text-decoration: none; transition: color .2s; } a:hover { color: var(--gold-soft); } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; line-height: 1.05; letter-spacing: -0.015em; color: var(--navy); margin: 0; } /* Reusable atoms -------------------------------------------------------- */ .eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } .mono-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); } .container { max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .lead { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.85; color: var(--charcoal); font-weight: 300; } /* Buttons --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 18px 44px; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; line-height: 1; } .btn--primary { background: var(--navy); color: var(--cream); } .btn--primary:hover { background: var(--navy-hover); color: var(--cream); } .btn--outline { border-color: var(--navy); color: var(--navy); background: transparent; } .btn--outline:hover { border-color: var(--gold); color: var(--gold); } .btn--on-navy { border-color: rgba(176,141,79,0.6); color: var(--gold); background: transparent; } .btn--on-navy:hover { background: var(--gold); color: var(--navy); } .link-underline { color: var(--navy); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid var(--gold); padding-bottom: 4px; width: fit-content; display: inline-block; } /* ========================================================================== Header ========================================================================== */ .site-header { background: var(--navy); border-bottom: 1px solid rgba(176,141,79,0.2); position: sticky; top: 0; z-index: 100; } .site-header__inner { max-width: 1440px; margin-inline: auto; padding: 22px var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } .site-nav { display: none; gap: 36px; } .site-nav a { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247,243,234,0.72); } .site-nav a:hover { color: var(--gold); } .brand-lockup { display: flex; align-items: center; justify-content: center; gap: 11px; } .site-header .brand-lockup .brand-lockup__mark { height: 42px !important; width: auto !important; flex: 0 0 auto; display: block; } .brand-lockup__word { display: flex; flex-direction: column; line-height: 1; } .brand-lockup__name { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: 0.18em; color: var(--gold); white-space: nowrap; } .brand-lockup__sub { font-family: var(--serif); font-style: italic; font-size: 12.5px; letter-spacing: 0.02em; color: var(--gold-soft); padding-left: 0.16em; margin-top: 2px; } @media (max-width: 900px) { .brand-lockup__word { display: none; } .site-header .brand-lockup .brand-lockup__mark { height: 36px !important; } } .header-utils { display: flex; gap: 24px; align-items: center; justify-content: flex-end; } .header-utils a, .header-utils span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: rgba(247,243,234,0.72); text-transform: uppercase; } .header-utils .bag { color: var(--gold); } /* "MENIU" word-toggle on ALL devices (client preference — no inline nav row, no hamburger icon anywhere; the word expands a dropdown panel everywhere). */ .nav-toggle { display: block; order: -1; background: none; border: 0; color: var(--cream); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; } .site-nav[data-open="true"] { display: flex; flex-direction: column; gap: 20px; position: absolute; top: 100%; left: 0; right: 0; background: var(--navy); padding: 28px var(--gutter); border-bottom: 1px solid rgba(176,141,79,0.2); z-index: 90; } @media (max-width: 900px) { .site-header__inner { grid-template-columns: auto 1fr auto; } .header-utils { gap: 16px; } .header-utils .util-account { display: none; } } @media (max-width: 600px) { /* The header is sticky, so on a phone its height is taken off every screen for the whole visit — and it sits directly under the browser's own bar, which collapses and expands as you scroll. 22px of padding around a 36px mark made 81px of permanent chrome; 14px brings it to 65px without shrinking the logo. */ .site-header__inner { padding-top: 14px; padding-bottom: 14px; } } /* ========================================================================== Full logo (official outlined asset) — same size in the hero (above the eyebrow) and the footer. Left-aligned block; the logo keeps its own real composition (emblem centered over the wordmark). ========================================================================== */ .brand-full { display: block; height: 118px; width: auto; max-width: 100%; } .hero__copy .brand-full { align-self: flex-start; margin-bottom: 2px; } .site-footer .brand-full { height: 78px; margin-bottom: 10px; } @media (max-width: 640px) { .brand-full { height: 96px; } } /* ========================================================================== Hero (homepage) ========================================================================== */ .hero { background: var(--navy); padding: clamp(72px, 10vw, 140px) var(--gutter) clamp(80px, 9vw, 120px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 70px); align-items: center; min-height: 620px; position: relative; max-width: 1440px; margin-inline: auto; } .hero__copy { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 34px); max-width: 30ch; } .hero__title { font-family: var(--serif); font-weight: 300; color: var(--cream); font-size: clamp(48px, 8vw, 84px); line-height: 1.01; letter-spacing: -0.02em; } .hero__actions { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; } .hero__from { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: rgba(247,243,234,0.36); } .hero__media { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; } .hero__media img { max-height: 540px; width: auto; object-fit: contain; } /* --- Hero product stack: 3 packs fanned; hover pops one forward + buy ------ */ .hero-stack { position: relative; width: 100%; min-height: 500px; } .hero-pack { position: absolute; left: 50%; top: 29%; width: 40%; max-width: 280px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 20px; border: 1px solid rgba(212,162,76,0.42); text-decoration: none; cursor: pointer; will-change: transform; transition: transform .55s cubic-bezier(.2,.75,.2,1), opacity .4s ease, filter .4s ease, border-color .3s ease; } .hero-pack__img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; } .hero-pack--1 { transform: translate(-50%,-50%) translateX(-58%) rotate(-9deg) scale(0.9); z-index: 1; } .hero-pack--2 { transform: translate(-50%,-53%) scale(1.06); z-index: 3; } .hero-pack--3 { transform: translate(-50%,-50%) translateX(58%) rotate(9deg) scale(0.9); z-index: 2; } /* Dim the others when the stack is hovered */ .hero-stack:hover .hero-pack { opacity: 0.35; filter: saturate(0.7) brightness(0.78); } /* Pop the hovered pack forward */ .hero-stack .hero-pack:hover { opacity: 1; filter: none; z-index: 6; border-color: var(--gold); } .hero-stack .hero-pack--1:hover { transform: translate(-50%,-50%) translateX(-66%) rotate(-3deg) translateY(-20px) scale(1.0); } .hero-stack .hero-pack--2:hover { transform: translate(-50%,-56%) scale(1.17); } .hero-stack .hero-pack--3:hover { transform: translate(-50%,-50%) translateX(66%) rotate(3deg) translateY(-20px) scale(1.0); } /* Buy info (revealed on hover) */ /* Info hidden by default; on hover it drops BELOW the frame onto the navy background (clearly readable, never faint over the packshot). */ .hero-pack__info { position: absolute; left: 50%; bottom: -74px; transform: translate(-50%, 10px); display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; pointer-events: none; text-align: center; white-space: nowrap; transition: opacity .35s ease, transform .35s ease; } .hero-pack:hover .hero-pack__info { opacity: 1; transform: translate(-50%, 0); } .hero-pack__g { font-family: var(--serif); font-size: 24px; color: var(--cream); line-height: 1; } .hero-pack__price { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--gold-soft); } .hero-pack__price .amount, .hero-pack__price bdi { color: var(--gold-soft); } .hero-pack__cta { margin-top: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy); background: var(--gold); padding: 9px 18px; transition: background .2s; } .hero-pack:hover .hero-pack__cta { background: var(--gold-soft); } .hero-pack__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); opacity: 0; transition: opacity .35s; z-index: 2; white-space: nowrap; } .hero-pack--2 .hero-pack__badge { opacity: 0.85; } .hero-stack:hover .hero-pack__badge { opacity: 0; } .hero-stack .hero-pack:hover .hero-pack__badge { opacity: 0.9; } .hero-stack__hint { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247,243,234,0.32); transition: opacity .3s; } .hero-stack:hover .hero-stack__hint { opacity: 0; } /* Touch devices: lay packs in a row, all buyable */ @media (hover: none) { .hero-stack { display: flex; gap: 10px; min-height: 0; align-items: flex-end; justify-content: center; } .hero-pack { position: relative; left: auto; top: auto; width: 32%; max-width: none; transform: none !important; opacity: 1 !important; filter: none !important; } .hero-pack__info { position: static; transform: none; opacity: 1; pointer-events: auto; margin-top: 12px; } .hero-pack__g { font-size: 18px; } .hero-pack__cta { padding: 8px 12px; } .hero-pack__badge { position: static; transform: none; opacity: 0.85; display: block; margin-bottom: 6px; } .hero-stack__hint { display: none; } } @media (max-width: 860px) { .hero { grid-template-columns: 1fr; text-align: left; min-height: 0; } .hero__media { min-height: 360px; } .hero__media img { max-height: 380px; } } /* ========================================================================== Story band (cream) ========================================================================== */ .story { background: var(--cream); } .story__grid { max-width: var(--content); margin-inline: auto; padding: var(--section-y) var(--gutter); display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .story__photo { aspect-ratio: 4/5; background: var(--navy); position: relative; overflow: hidden; background-image: repeating-linear-gradient(128deg, rgba(176,141,79,0.08) 0 2px, transparent 2px 12px); display: flex; align-items: flex-end; padding: 24px; } .story__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .story__photo .mono-label { color: rgba(247,243,234,0.45); position: relative; z-index: 1; } /* Subtle brand lockup over the dark flower (premium-poster feel) */ .story__photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; /* Strong dark band at the top so the gold lockup reads on "black" — the flower fills the frame, so a light scrim wasn't enough. */ background: linear-gradient(to bottom, rgba(6,6,10,0.90) 0%, rgba(6,6,10,0.55) 18%, rgba(6,6,10,0) 40%); } .story__brand { position: absolute; top: clamp(20px, 6%, 46px); left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none; line-height: 0; } .story__brand .brand-full { display: block; height: clamp(48px, 6vw, 70px); width: auto; margin: 0; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.5)); } .story__body { display: flex; flex-direction: column; gap: 22px; } .story__title { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; max-width: 23ch; } .story__body p { font-weight: 300; font-size: clamp(16px, 1.2vw, 17px); line-height: 1.85; color: var(--charcoal); margin: 0; max-width: 52ch; } .story__stats { display: flex; gap: clamp(24px, 4vw, 46px); border-top: 1px solid var(--line); padding-top: 26px; margin-top: 12px; flex-wrap: wrap; } .stat__num { font-family: var(--serif); font-size: 38px; font-weight: 300; color: var(--navy); line-height: 1; } .stat__label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); margin-top: 6px; } @media (max-width: 820px) { .story__grid { grid-template-columns: 1fr; gap: 40px; } } /* ========================================================================== Footer ========================================================================== */ /* ========================================================================== Newsletter band (above the footer, every page) ========================================================================== */ .newsletter { background-color: var(--navy); border-top: 1px solid rgba(212,162,76,0.18); background-image: radial-gradient(80% 120% at 88% 50%, rgba(212,162,76,0.10), transparent 60%); } .newsletter__inner { max-width: 1440px; margin-inline: auto; padding: clamp(48px, 6vw, 84px) var(--gutter); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .newsletter__eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); } .newsletter__title { font-family: var(--serif); font-weight: 300; color: var(--cream); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; margin-top: 12px; } .newsletter__lead { color: rgba(247,243,234,0.6); font-size: 15px; line-height: 1.7; margin-top: 12px; max-width: 46ch; } .newsletter__form { display: flex; flex-direction: column; gap: 12px; } .newsletter__row { display: flex; gap: 10px; flex-wrap: wrap; } .newsletter__row input[type="email"] { flex: 1 1 220px; min-width: 0; background: transparent; border: 1px solid rgba(247,243,234,0.24); color: var(--cream); font-family: var(--sans); font-size: 14px; padding: 16px 18px; outline: none; transition: border-color .2s; } .newsletter__row input[type="email"]::placeholder { color: rgba(247,243,234,0.4); } .newsletter__row input[type="email"]:focus { border-color: var(--gold); } .newsletter__row button { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--gold); color: var(--navy); border: 0; padding: 16px 30px; cursor: pointer; transition: background .2s; } .newsletter__row button:hover { background: var(--gold-soft); } .newsletter__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .newsletter__msg { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; min-height: 1.1em; margin: 0; } .newsletter__msg.is-ok { color: var(--gold-soft); } .newsletter__msg.is-err { color: #E7A17A; } .newsletter__fine { font-size: 11.5px; line-height: 1.6; color: rgba(247,243,234,0.38); margin: 0; } .newsletter__fine a { color: rgba(247,243,234,0.62); text-decoration: underline; } @media (max-width: 820px) { .newsletter__inner { grid-template-columns: 1fr; } } .site-footer { background: var(--navy); color: rgba(247,243,234,0.72); } .site-footer__inner { max-width: 1440px; margin-inline: auto; padding: clamp(64px, 8vw, 104px) var(--gutter) 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; /* every column starts at the top — links sit right under their heading */ } /* .brand-full styling lives in the Hero section (official logo ). */ .footer-brand__desc { font-weight: 300; font-size: 13px; line-height: 1.7; color: rgba(247,243,234,0.5); margin-top: 0; max-width: 30ch; } /* Links sit directly under their heading (top-aligned). The old "even baseline" trick (margin-top:auto) pushed the links to the bottom of each column, which left a big empty gap whenever the tall brand column stretched the row — so it was removed entirely. */ /* Social links — small outlined circles under the brand blurb. They double as the visible counterpart of the sameAs entries in the Organization schema. */ .footer-social { display: flex; gap: 12px; margin-top: 20px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(247,243,234,0.18); color: rgba(247,243,234,0.62); transition: color .2s, border-color .2s, background-color .2s; } .footer-social a:hover { color: var(--navy); background: var(--gold-soft); border-color: var(--gold-soft); } .footer-social svg { display: block; } .footer-col { display: flex; flex-direction: column; } .footer-col__head { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 18px; } .footer-col a { display: block; color: rgba(247,243,234,0.72); font-size: 14px; padding: 6px 0; } .footer-col a:hover { color: var(--cream); } .footer-bottom { max-width: 1440px; margin-inline: auto; padding: 24px var(--gutter); border-top: 1px solid rgba(247,243,234,0.12); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247,243,234,0.4); } /* Legal rekvizitai — one balanced block that wraps between segments (never mid-segment). */ .footer-rekvizitai { line-height: 2; max-width: 860px; text-wrap: balance; } .footer-rekvizitai .sep { font-style: normal; color: rgba(247,243,234,0.28); margin: 0 12px; } /* Legal links + email on their own centred row. */ .footer-bottom__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; } .footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; } .footer-legal a, .footer-mail { color: rgba(247,243,234,0.5); transition: color .2s; } .footer-legal a:hover, .footer-mail:hover { color: var(--gold-soft); } .footer-mail { position: relative; padding-left: 22px; } .footer-bottom__meta::before { content: none; } /* small dot separating legal group from email on wider screens */ @media (min-width: 560px) { .footer-mail::before { content: "·"; position: absolute; left: 6px; color: rgba(247,243,234,0.28); } } @media (max-width: 820px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .site-footer__inner { grid-template-columns: 1fr; } } /* ========================================================================== Four commitments (editorial rows) ========================================================================== */ .commitments { display: flex; flex-direction: column; gap: 0; } .commitments__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: 48px; flex-wrap: wrap; gap: 12px; } .commitments__head h2 { font-size: clamp(34px, 4.5vw, 52px); } .commitment { display: grid; grid-template-columns: 80px 1fr 1fr; gap: clamp(24px, 4vw, 64px); padding: 48px 0; border-bottom: 1px solid var(--line-2); } .commitment:last-child { border-bottom: 0; } .commitment__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--gold); padding-top: 12px; } .commitment__title { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; } .commitment__text { font-weight: 300; font-size: clamp(15px, 1.2vw, 16.5px); line-height: 1.85; color: var(--charcoal); margin: 0; } @media (max-width: 720px) { .commitment { grid-template-columns: 40px 1fr; } .commitment__text { grid-column: 2; } } /* ========================================================================== Single product (KHOR ONE) ========================================================================== */ .product-single__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: start; padding-block: clamp(48px, 6vw, 96px); } .product-gallery__main { background: var(--navy); background-image: linear-gradient(rgba(16,27,51,0.26), rgba(16,27,51,0.34)), url("https://pagarbazmogui.lt/wp-content/uploads/2026/08/marlik-saffron-7kJBr16M48s-unsplash-scaled.jpg"); background-size: cover; background-position: center; aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 56px); } .product-gallery__main img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 30px 46px rgba(0,0,0,0.55)); } /* Effective format-swap transition (fade + pop) — product page + homepage showcase */ [data-product-image], [data-showcase-image] { transition: opacity .2s ease, transform .5s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } [data-product-image].is-swapping, [data-showcase-image].is-swapping { opacity: 0; transform: scale(.82) rotate(-2deg); } @media (prefers-reduced-motion: reduce) { [data-product-image], [data-showcase-image] { transition: none; } } .product-buy { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 22px; } .product-title { font-size: clamp(38px, 5vw, 56px); line-height: 1.02; } .product-tagline { font-weight: 300; font-size: clamp(15px, 1.2vw, 16.5px); line-height: 1.8; color: var(--charcoal); margin: 0; max-width: 40ch; } .product-price { font-family: var(--serif); font-size: 30px; font-weight: 400; color: var(--navy); } .product-price del { color: var(--stone); font-size: 0.7em; margin-right: 8px; } .product-price ins { text-decoration: none; } /* Format cards */ .fmt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .fmt-card { position: relative; border: 1px solid var(--line); background: var(--cream); padding: 24px 18px 20px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; text-align: left; font-family: var(--sans); transition: border-color .2s, background .2s, color .2s; } .fmt-card:hover { border-color: var(--navy); } .fmt-card__g { font-family: var(--serif); font-size: 32px; font-weight: 300; color: var(--navy); line-height: 1; } .fmt-card__price { font-size: 14px; color: var(--charcoal); border-top: 1px solid var(--line-2); padding-top: 12px; margin-top: 4px; } .fmt-card__badge { position: absolute; top: 0; right: 0; background: var(--gold); color: var(--navy); font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 9px; } .fmt-card.is-active { background: var(--navy); border-color: var(--navy); } .fmt-card.is-active .fmt-card__g { color: var(--cream); } .fmt-card.is-active .fmt-card__price { color: rgba(247,243,234,0.7); border-top-color: rgba(247,243,234,0.16); } /* WooCommerce add-to-cart form — hide native select, keep functional */ .product-atc .variations, .product-atc .reset_variations, .product-atc .woocommerce-variation-price, .product-atc .woocommerce-variation-availability { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .product-atc .woocommerce-variation-add-to-cart { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; } .product-atc .quantity { display: flex; align-items: center; } .product-atc .quantity input.qty { width: 66px; height: 100%; min-height: 54px; border: 1px solid var(--line); background: var(--cream); text-align: center; font-family: var(--mono); font-size: 15px; color: var(--navy); } .product-atc .single_add_to_cart_button { flex: 1; min-width: 200px; border: 0; cursor: pointer; background: var(--navy); color: var(--cream); font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 19px 40px; transition: background .2s; } .product-atc .single_add_to_cart_button:hover { background: var(--navy-hover); } .product-atc .single_add_to_cart_button.disabled, .product-atc .single_add_to_cart_button:disabled { opacity: .4; cursor: not-allowed; } .product-meta { list-style: none; margin: 6px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 32px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); } .product-meta li { margin: 0; } .product-details { border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: 190px 1fr; gap: clamp(24px, 4vw, 64px); } .product-prose { max-width: 60ch; font-weight: 300; line-height: 1.85; color: var(--charcoal); } .product-prose p { margin: 0 0 18px; } @media (max-width: 860px) { .product-single__grid { grid-template-columns: 1fr; gap: 32px; } .product-buy { position: static; } .product-details { grid-template-columns: 1fr; } } /* ========================================================================== Page shell + WooCommerce (cart / checkout / account / notices) ========================================================================== */ .page-main { min-height: 50vh; } .page-title { font-size: clamp(38px, 5vw, 56px); margin-bottom: clamp(28px, 4vw, 48px); } /* Headings inside Woo */ .woocommerce h1, .woocommerce h2, .woocommerce h3, .wc-block-components-title { font-family: var(--serif); font-weight: 300; color: var(--navy); letter-spacing: -0.01em; } /* Links */ .woocommerce a:not(.button):not(.wp-element-button), .wc-block-components-checkout-step a { color: var(--gold); } .woocommerce a:hover:not(.button) { color: var(--gold-soft); } /* WooCommerce blocks accent — was an olive default (#958e09); force brand gold. Drives selected radios/checkboxes, active steps and highlights in the block cart & checkout. */ .woocommerce, .wc-block-checkout, .wp-block-woocommerce-checkout, .wc-block-cart, .wp-block-woocommerce-cart { --wc-highlight: #D4A24C !important; --wc-highlight-contrast: #101B33 !important; } /* Omniva paštomatų žemėlapio atidarymo mygtukas → brand navy. Kept compact: it sits directly under the selected-terminal box inside the narrow order-summary column, so a full-width slab read as a primary action and wrapped to two lines on a phone. Inline-size + tighter padding instead. */ .tmjs-open-modal-btn { background: var(--navy) !important; color: var(--cream) !important; border: 0 !important; border-radius: 0 !important; font-family: var(--mono) !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; display: inline-block !important; width: auto !important; padding: 8px 16px !important; font-size: 11px !important; line-height: 1.3 !important; white-space: nowrap !important; margin-top: 8px !important; } .tmjs-open-modal-btn:hover { background: var(--navy-hover) !important; } /* Omniva map picker (tmjs modal) — pull the plugin's stock look onto the brand. The modal already inherits Cormorant headings + gold accents; these rules kill the leftover Omniva-orange and the Verdana body font. */ .tmjs-modal, .tmjs-modal *, .omnivalt_terminal_container, .omnivalt_terminal_container * { font-family: var(--sans) !important; } /* Search button: Omniva orange -> brand navy with cream glyph. */ .tmjs-search-btn { background: var(--navy) !important; color: var(--cream) !important; border-color: var(--navy) !important; border-radius: 0 !important; } .tmjs-search-btn:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--navy) !important; } /* Search field: square, brand focus ring. */ .tmjs-terminal-finder input[type="text"], .tmjs-terminal-finder input[type="search"] { border-radius: 0 !important; border-color: var(--line) !important; font-family: var(--sans) !important; } .tmjs-terminal-finder input[type="text"]:focus, .tmjs-terminal-finder input[type="search"]:focus { outline: 2px solid var(--gold) !important; outline-offset: 1px; border-color: var(--gold) !important; } /* Geolocation link + list accents stay gold (already brand). Selected item keeps its gold rail. */ .tmjs-geolocation-btn { color: var(--gold) !important; } .tmjs-terminal-block.tmjs-selected, .tmjs-terminal-block:hover { border-color: var(--gold) !important; } /* Leaflet zoom controls: square, navy glyphs. */ .tmjs-modal .leaflet-control-zoom a { border-radius: 0 !important; color: var(--navy) !important; } /* Selected-terminal chip under the shipping row. */ .tmjs-selected-terminal { font-family: var(--sans) !important; color: var(--navy) !important; } /* Modal was 90vw × 90vh — nearly full-screen on a laptop/desktop. Cap it to a comfortable centred panel; stays near-fullscreen on small phones via min(). */ .tmjs-modal-content { width: min(92vw, 900px) !important; height: min(86vh, 620px) !important; max-width: 900px !important; max-height: 620px !important; margin: auto !important; } /* --- Buttons (classic + blocks) ------------------------------------------ */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .wc-block-components-button, .wp-element-button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { background: var(--navy) !important; color: var(--cream) !important; border: 0 !important; border-radius: 0 !important; font-family: var(--sans) !important; font-size: 12px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 400 !important; padding: 17px 40px !important; line-height: 1 !important; transition: background .2s !important; box-shadow: none !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .wc-block-components-button:hover, .wp-element-button:hover, .wc-block-cart__submit-button:hover { background: var(--navy-hover) !important; color: var(--cream) !important; } .wc-block-components-button.wc-block-components-button--outlined, .woocommerce a.button.wc-forward.wc-block-components-button--outlined { background: transparent !important; color: var(--navy) !important; border: 1px solid var(--navy) !important; } /* --- Form fields --------------------------------------------------------- */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .wc-block-components-text-input input, .wc-block-components-select select, .select2-container .select2-selection { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--cream) !important; font-family: var(--sans) !important; color: var(--navy) !important; padding: 14px 16px !important; min-height: 52px; } .wc-block-components-text-input input:focus, .woocommerce form .form-row input.input-text:focus { outline: none !important; border-color: var(--gold) !important; } .wc-block-components-text-input label, .woocommerce form .form-row label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--stone); } /* Required marker — clear red asterisk (phone etc.) */ .woocommerce form .form-row label .required, .woocommerce-checkout .form-row label .required, .woocommerce form .form-row label abbr.required { color: #C0392B; border: 0; text-decoration: none; margin-left: 3px; font-size: 13px; } /* --- Prices (serif) ------------------------------------------------------ */ .woocommerce .price, .wc-block-components-product-price, .wc-block-formatted-money-amount, .wc-block-components-totals-item__value { font-family: var(--serif) !important; color: var(--navy) !important; white-space: nowrap; } .woocommerce del, .wc-block-components-product-price del { color: var(--stone) !important; } /* --- Cart / checkout blocks ---------------------------------------------- */ .wc-block-cart, .wc-block-checkout { font-family: var(--sans); } .wc-block-cart-items, .wc-block-cart-items__row { border-color: var(--line) !important; } .wc-block-components-sidebar, .wc-block-checkout__sidebar, .wc-block-cart__sidebar .wc-block-components-sidebar { background: var(--cream) !important; border: 1px solid var(--line) !important; padding: clamp(20px, 2.4vw, 28px) !important; /* symmetric — numbers were flush to the right edge */ } .wc-block-components-totals-item__label { font-family: var(--sans); color: var(--charcoal); } .wc-block-components-order-summary__button-text, .wc-block-components-panel__button { color: var(--navy); } .wc-block-checkout__main .wc-block-components-checkout-step__title, .wc-block-components-checkout-step__title { font-family: var(--serif) !important; font-size: 24px !important; color: var(--navy) !important; } /* Narrow phones: the block cart line-item row is a CSS grid whose intrinsic tracks (80px image + product column floored by the 107px quantity stepper + total + three 16px gaps) come to ~308px. With the page gutter that needs a ~356px viewport, so anything narrower — iPhone SE, 360px Androids, or any phone with iOS Display Zoom on — pushed the page sideways. Shrink the image column, the stepper and the gaps, and let the product column actually shrink (its min-width is `auto`, which is what blocks the grid from collapsing). */ @media (max-width: 480px) { .wc-block-cart-items { width: 100% !important; } .wc-block-cart-items__row { grid-template-columns: 56px minmax(0, 1fr) 0 auto !important; column-gap: 10px !important; } .wc-block-cart-item__image { width: 56px !important; } .wc-block-cart-item__image img { width: 56px !important; height: auto !important; } .wc-block-cart-item__product, .wc-block-cart-item__wrap { min-width: 0 !important; } .wc-block-components-quantity-selector { min-width: 0 !important; max-width: 96px !important; } } /* Classic cart table */ .woocommerce table.shop_table { border: 1px solid var(--line); border-radius: 0; } .woocommerce table.shop_table th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); } .woocommerce .cart-collaterals .cart_totals h2 { font-family: var(--serif); } .woocommerce .quantity input.qty { border: 1px solid var(--line); background: var(--cream); min-height: 48px; font-family: var(--mono); text-align: center; } /* --- Notices ------------------------------------------------------------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { border-radius: 0 !important; border-left: 2px solid var(--gold) !important; background: var(--cream) !important; font-family: var(--sans); color: var(--charcoal); } .woocommerce-message { border-left-color: var(--gold) !important; } .woocommerce-error { border-left-color: #a3402f !important; } /* Kill the default blue top border + recolour the info/success icon to brand. */ .woocommerce-info, .woocommerce-message { border-top: 0 !important; } .woocommerce-info::before { color: var(--gold) !important; } /* Classic checkout: brand radio/checkbox accent (was browser-blue) */ .woocommerce input[type="radio"], .woocommerce input[type="checkbox"], .woocommerce-checkout input[type="radio"], .woocommerce-checkout input[type="checkbox"], #payment input[type="radio"], #order_review input[type="radio"] { accent-color: var(--gold); } /* Block-style notices rendered on the classic checkout (coupon toggle etc.): the "is-info" variant had a blue top border + blue SVG icon → brand gold. */ .wc-block-components-notice-banner.is-info { border-color: var(--gold) !important; border-top-color: var(--gold) !important; } /* The icon is a blue-BACKGROUND circle with a white glyph — recolour both. */ .wc-block-components-notice-banner.is-info svg { background: var(--gold) !important; fill: var(--navy) !important; } /* Conditional checkout fields (see inc/checkout-fields.php). A parcel-terminal order by a private person needs four fields; the address block only appears for courier delivery or a company purchase. The rows are

, so `block` is their natural display — the float-based form-row-first/last layout still applies on top. */ form.checkout .pz-addr, form.checkout .pz-biz { display: none !important; } form.checkout.pz-needs-address .pz-addr { display: block !important; } form.checkout.pz-is-business .pz-biz { display: block !important; } /* Country is locked to Lietuva and Omniva routes by postcode, not county — kept in the DOM so the values still post, but never shown. */ form.checkout .pz-field-hidden, /* "Siųsti kitu adresu?" — left unchecked, so billing is copied to shipping. */ form.checkout #ship-to-different-address { display: none !important; } .pz-business-toggle { margin-bottom: 22px !important; } .pz-business-toggle label { display: inline-flex !important; align-items: center; gap: 10px; cursor: pointer; } .pz-business-toggle span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--charcoal); } /* Shipping method labels → brand */ #shipping_method li label, .woocommerce-checkout #order_review .shipping label, #shipping_method li label .amount, #shipping_method li label bdi { font-family: var(--sans) !important; color: var(--navy) !important; font-size: 15px; font-weight: 400 !important; /* was a heavy 700 — un-bold to match the brand */ } /* Terminal picker as select2 — branded dropdown (kills the OS/blue highlight) */ .select2-container--open { z-index: 100001 !important; } .select2-dropdown { border-color: var(--navy) !important; border-radius: 0 !important; z-index: 100001 !important; box-shadow: 0 14px 44px rgba(16,27,51,0.20); } .select2-search--dropdown { padding: 8px !important; } .select2-search--dropdown .select2-search__field { min-height: 42px; padding: 8px 12px !important; background: var(--cream) !important; color: var(--navy) !important; } .select2-results__options { max-height: 230px !important; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted { background: var(--navy) !important; color: var(--cream) !important; } .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--cream) !important; color: var(--navy) !important; } .select2-results, .select2-container .select2-selection__rendered { font-family: var(--sans) !important; color: var(--navy) !important; } .select2-results__group { font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone) !important; } .select2-search--dropdown .select2-search__field { border: 1px solid var(--line) !important; border-radius: 0 !important; font-family: var(--sans) !important; } .select2-container--default .select2-selection--single { border: 1px solid var(--navy) !important; border-radius: 0 !important; height: auto !important; min-height: 52px; padding: 8px 6px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; } /* --- My account ---------------------------------------------------------- */ .woocommerce-account .woocommerce-MyAccount-navigation ul { border: 1px solid var(--line); list-style: none; margin: 0; padding: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 14px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--navy); color: var(--cream); } /* Header cart count */ .cart-count { font-variant-numeric: tabular-nums; } /* --- Paysera payment method (official Smart Checkout plugin) ------------- */ /* The only payment method at checkout. The plugin renders its own React radio list (.paysera-radio-control) inside WooCommerce's .payment_box, in a stock SaaS look — white cards, 8px radius, semibold slate labels. Pull the whole thing onto the brand: zero radius, cream/paper, navy text, gold accents. */ /* WooCommerce wraps the methods in a stock purple-grey rounded panel (rgba(129,110,153,0.14) + 5px radius) — let the cream box carry the shape. */ .woocommerce-checkout #payment { background: transparent !important; border-radius: 0 !important; } #payment .payment_method_paysera-smart-checkout-woocommerce > label { font-family: var(--sans) !important; color: var(--navy) !important; font-weight: 500 !important; font-size: 15px !important; } #payment .payment_method_paysera-smart-checkout-woocommerce .payment_box { background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; color: var(--charcoal) !important; font-family: var(--sans) !important; font-size: 14px; line-height: 1.55; } /* WooCommerce draws a little pointer triangle above the box — recolour to cream. */ #payment .payment_method_paysera-smart-checkout-woocommerce .payment_box::before { border-bottom-color: var(--cream) !important; } #payment .payment_method_paysera-smart-checkout-woocommerce.wc_payment_method label { cursor: pointer; } /* Country line above the list ("Veikia: Lietuva") — a quiet caption, not a form. Note: the control also carries an emotion hash class (css-…-control) that changes between plugin builds; target the stable BEM class only. */ .paysera-payment-country-select__control { border-radius: 0 !important; border-color: var(--line) !important; background: var(--paper) !important; min-height: 44px !important; font-family: var(--sans) !important; color: var(--navy) !important; } .paysera-payment-country-select__hint, .paysera-information-hint__trigger { font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone) !important; } .paysera-information-hint__icon { color: var(--gold) !important; } /* Method rows. The radio input itself is display:none in the plugin, so the selected state has to hang off :has(input:checked) on the label. */ .paysera-radio-control .radio-control__option { background: var(--paper) !important; border: 1px solid var(--line-2) !important; border-radius: 0 !important; padding: 12px 14px !important; margin: 0 0 8px !important; transition: border-color 0.18s ease, background-color 0.18s ease; } .paysera-radio-control .radio-control__option:hover { border-color: var(--gold-soft) !important; background: #fff !important; } /* !important on the shadow: the plugin paints its own blue ring (#3047E5) on the selected/focused row, which beats an unflagged declaration and is off-brand. */ .paysera-radio-control .radio-control__option:has(input:checked) { border-color: var(--navy) !important; background: #fff !important; box-shadow: inset 3px 0 0 var(--gold) !important; } .paysera-radio-control .radio-control__option:focus-within { box-shadow: inset 3px 0 0 var(--gold) !important; outline: none !important; } .paysera-radio-control .radio-control__option-group { display: flex !important; align-items: center !important; gap: 14px !important; } /* Logo badge: square to match the brand's zero-radius geometry. */ .paysera-radio-control .radio-control__icon { width: 34px !important; height: 34px !important; border-radius: 0 !important; border: 1px solid var(--line-2) !important; background: #fff !important; display: flex !important; align-items: center; justify-content: center; flex: 0 0 auto; } .paysera-radio-control .radio-control__icon img { max-width: 22px !important; max-height: 22px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } .paysera-radio-control .radio-control__label { font-family: var(--sans) !important; font-weight: 400 !important; font-size: 15px !important; color: var(--navy) !important; } /* Paysera's PIS/AIS consent small print under the list — footnote register. */ .paysera-customer-consent__text { font-size: 13px !important; line-height: 1.6 !important; color: var(--stone) !important; } .paysera-customer-consent__text a { color: var(--charcoal) !important; text-decoration: underline; text-underline-offset: 2px; } /* ========================================================================== Shop / collections (archive) ========================================================================== */ .page-hero { display: flex; flex-direction: column; gap: 20px; max-width: 640px; padding-top: clamp(48px, 6vw, 88px); } .page-hero h1 { font-size: clamp(44px, 6vw, 72px); line-height: 1.02; } .shop-brandhead { display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: clamp(28px, 4vw, 44px); } .shop-brandhead h2 { font-size: clamp(32px, 4.5vw, 52px); } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: clamp(20px, 3vw, 40px); } .product-card { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--line); background: var(--paper); transition: border-color .2s; } .product-card:hover { border-color: var(--navy); } .product-card__media { aspect-ratio: 4/5; background: var(--cream); display: flex; align-items: center; justify-content: center; padding: clamp(24px, 3vw, 40px); } .product-card__media img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(16,27,51,0.15)); } .product-card__body { padding: clamp(20px, 2vw, 26px); display: flex; flex-direction: column; gap: 10px; } .product-card__name { font-family: var(--serif); font-size: 26px; font-weight: 300; color: var(--navy); line-height: 1.1; } .product-card__price { font-family: var(--serif); font-size: 18px; color: var(--charcoal); } .product-card .link-underline { margin-top: 6px; } /* min() so the 280px floor can't outgrow the column on a narrow phone — a bare minmax(280px,1fr) overflowed the shop page below ~350px. */ .shop-coming .brand-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: clamp(16px, 2.4vw, 24px); } .brand-tile { border: 1px dashed #cfc7b6; background: transparent; display: flex; flex-direction: column; opacity: 0.72; } .brand-tile__media { height: 160px; background: repeating-linear-gradient(128deg, rgba(42,50,69,0.06) 0 2px, transparent 2px 12px); } .brand-tile__body { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; } .brand-tile__name { font-family: var(--serif); font-size: 24px; font-weight: 300; color: var(--navy); } /* ========================================================================== Motion — scroll reveals + hero entrance (spec: fade-up 24px, cubic-bezier(.2,.7,.2,1), no bounce) ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .pz-js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } .pz-js .reveal.is-in { opacity: 1; transform: none; } /* Stagger within grids/rows */ .product-grid .reveal:nth-child(2) { transition-delay: .09s; } .product-grid .reveal:nth-child(3) { transition-delay: .18s; } .shop-coming .brand-tiles .reveal:nth-child(2) { transition-delay: .09s; } .commitments .commitment.reveal:nth-child(3) { transition-delay: .07s; } .commitments .commitment.reveal:nth-child(4) { transition-delay: .14s; } .commitments .commitment.reveal:nth-child(5) { transition-delay: .21s; } /* Hero entrance (pure CSS, works without JS) */ .hero__copy > * { opacity: 0; animation: pz-up .75s cubic-bezier(.2,.7,.2,1) forwards; } .hero__copy > *:nth-child(1) { animation-delay: .12s; } .hero__copy > *:nth-child(2) { animation-delay: .22s; } .hero__copy > *:nth-child(3) { animation-delay: .34s; } .hero__media { opacity: 0; animation: pz-up .9s cubic-bezier(.2,.7,.2,1) .28s forwards; } .hero__media img { animation: pz-float 6.5s ease-in-out infinite; } @keyframes pz-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes pz-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } } /* ========================================================================== Homepage conversion — hero sub, product showcase, closing CTA ========================================================================== */ .btn--gold { background: var(--gold); color: var(--navy); } .btn--gold:hover { background: var(--gold-soft); color: var(--navy); } .self-start { align-self: flex-start; } .hero__sub { color: rgba(247,243,234,0.62); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; max-width: 34ch; margin: 0; font-weight: 300; } /* Product showcase (buy now) */ .showcase { background: var(--paper); } .showcase__grid { max-width: var(--content); margin-inline: auto; padding: clamp(64px, 8vw, 120px) var(--gutter); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: center; } .showcase__media { aspect-ratio: 4/5; background: var(--navy); background-image: linear-gradient(rgba(16,27,51,0.26), rgba(16,27,51,0.34)), url("https://pagarbazmogui.lt/wp-content/uploads/2026/08/marlik-saffron-7kJBr16M48s-unsplash-scaled.jpg"); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 56px); } .showcase__media img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 30px 46px rgba(0,0,0,0.55)); } .showcase__buy { display: flex; flex-direction: column; gap: 22px; } .showcase__buy h2 { font-size: clamp(36px, 4.5vw, 56px); line-height: 1.04; } .showcase__lead { max-width: 42ch; color: var(--charcoal); font-weight: 300; margin: 0; } .showcase__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .showcase__card { position: relative; border: 1px solid var(--line); background: var(--cream); padding: 24px 18px 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; text-align: left; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color .2s, transform .2s, box-shadow .2s, background .2s; } .showcase__card:hover { border-color: var(--navy); transform: translateY(-2px); } .showcase__card--feature { border-color: var(--navy); } .showcase__card.is-active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: #fff; } .showcase__order { align-self: flex-start; margin-top: 4px; } .showcase__card--feature::before { content: "Populiariausia"; position: absolute; top: 0; right: 0; background: var(--gold); color: var(--navy); font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 9px; } .showcase__g { font-family: var(--serif); font-size: 32px; font-weight: 300; color: var(--navy); line-height: 1; } .showcase__price { font-family: var(--serif); font-size: 16px; color: var(--charcoal); } .showcase__cta { margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); border-top: 1px solid var(--line-2); padding-top: 12px; } .showcase__card:hover .showcase__cta { color: var(--gold-soft); } .showcase__foot { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } .showcase__trust { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); } /* Closing CTA band */ .cta-band { background: var(--navy); position: relative; overflow: hidden; } .cta-band__inner { max-width: var(--content); margin-inline: auto; padding: clamp(72px, 9vw, 130px) var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; position: relative; z-index: 2; } .cta-band h2 { color: var(--cream); font-size: clamp(38px, 5vw, 60px); max-width: 18ch; line-height: 1.04; text-shadow: 0 2px 26px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4); } .cta-band p { color: rgba(247,243,234,0.82); max-width: 42ch; margin: 0; font-weight: 300; text-shadow: 0 1px 14px rgba(0,0,0,0.5); } .cta-band .btn { margin-top: 10px; } @media (max-width: 820px) { .showcase__grid { grid-template-columns: 1fr; gap: 22px; padding-block: clamp(40px, 9vw, 64px); align-items: start; } /* Shorter, pinned photo so it stays visible while picking the format below (was a tall 4:5 box that scrolled off-screen on phones). */ .showcase__media { position: sticky; top: 72px; z-index: 1; width: 100%; aspect-ratio: auto; height: 34vh; min-height: 210px; padding: 16px; } } /* ============================================================= * * Photography & cinematic motion * ============================================================= */ .eyebrow--light { color: var(--gold-soft, #E0BC7C); } /* Shared parallax background layer (translated by JS on scroll) */ .parallax__bg { position: absolute; inset: -14% 0; z-index: 0; background-size: cover; background-position: center; will-change: transform; } /* Story photo — subtle ken-burns drift */ .story__photo > img { transform: scale(1.02); } @media (prefers-reduced-motion: no-preference) { .story__photo > img { animation: pz-kenburns 20s ease-in-out infinite alternate; } } @keyframes pz-kenburns { from { transform: scale(1.03) translate3d(0, 0, 0); } to { transform: scale(1.13) translate3d(-1.6%, -1.2%, 0); } } /* Full-bleed cinematic parallax band */ .media-band { position: relative; overflow: hidden; min-height: clamp(360px, 60vh, 620px); display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(48px, 8vw, 120px) clamp(24px, 6vw, 80px); } .media-band::after { content: ""; position: absolute; inset: 0; z-index: 1; /* Lighter than before so the vivid red threads read through, but still enough (with the quote text-shadow) to keep the line legible. */ background: linear-gradient(rgba(16,27,51,0.44), rgba(16,27,51,0.60)); } .media-band__inner { position: relative; z-index: 2; max-width: 760px; display: flex; flex-direction: column; gap: 18px; align-items: center; } .media-band__quote { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 3.4vw, 44px); line-height: 1.22; color: var(--cream); margin: 0; max-width: 22ch; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4); } /* Closing CTA — flower backdrop */ .cta-band::after { content: ""; position: absolute; inset: 0; z-index: 1; /* Lighter so the vivid red threads read through as a rich backdrop. */ background: linear-gradient(rgba(16,27,51,0.62), rgba(16,27,51,0.78)); } /* Lightbox */ .pz-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(11,16,28,0.93); display: flex; align-items: center; justify-content: center; padding: 4vw; animation: pz-fade .25s ease; } .pz-lightbox[hidden] { display: none; } .pz-lightbox__img { max-width: 94vw; max-height: 90vh; object-fit: contain; box-shadow: 0 30px 90px rgba(0,0,0,0.55); } .pz-lightbox__close { position: absolute; top: 14px; right: 20px; width: 46px; height: 46px; background: none; border: 0; color: var(--cream); font-size: 34px; line-height: 1; cursor: pointer; opacity: 0.8; transition: opacity .2s; } .pz-lightbox__close:hover { opacity: 1; } [data-lightbox] { cursor: zoom-in; } @keyframes pz-fade { from { opacity: 0; } to { opacity: 1; } } /* ============================================================= * * Cinematic full-screen hero * ============================================================= */ .hero--cinematic { position: relative; overflow: hidden; min-height: 100dvh; display: flex; align-items: center; padding: clamp(120px, 18vh, 200px) var(--gutter) clamp(70px, 12vh, 120px); } .hero--cinematic .hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 82%; transform: scale(1.06); } .hero--cinematic .hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #2a0a0a; } @media (prefers-reduced-motion: no-preference) { .hero--cinematic .hero__bg { animation: hero-kenburns 22s ease-in-out infinite alternate; } } @keyframes hero-kenburns { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.18) translate3d(-2%, -1.6%, 0); } } .hero--cinematic::after { content: ""; position: absolute; inset: 0; z-index: 1; /* Light, neutral (not navy) scrim only at the edges — lets the true red show. */ background: linear-gradient(180deg, rgba(10,12,18,0.62) 0%, rgba(10,12,18,0) 20%, rgba(10,12,18,0) 54%, rgba(10,12,18,0.28) 76%, rgba(10,12,18,0.66) 100%), linear-gradient(90deg, rgba(10,12,18,0.52) 0%, rgba(10,12,18,0) 48%); } .hero--cinematic .hero__inner { position: relative; z-index: 2; max-width: var(--content); margin-inline: auto; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 3vw, 30px); } .hero--cinematic .brand-full { height: clamp(74px, 8vw, 110px); width: auto; margin-bottom: 6px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 22px rgba(0,0,0,0.55)); } .hero--cinematic .eyebrow { text-shadow: 0 1px 14px rgba(0,0,0,0.6); } .hero--cinematic .hero__title { font-family: var(--serif); font-weight: 300; color: var(--cream); font-size: clamp(46px, 7.2vw, 96px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; max-width: 20ch; text-shadow: 0 2px 30px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.4); } .hero--cinematic .hero__sub { color: rgba(247,243,234,0.92); max-width: 42ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.75; font-weight: 300; margin: 0; text-shadow: 0 1px 16px rgba(0,0,0,0.6); } .hero--cinematic .hero__actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .hero--cinematic .hero__from { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: rgba(247,243,234,0.75); text-shadow: 0 1px 12px rgba(0,0,0,0.6); } /* Scroll hint */ .hero__scroll { position: absolute; left: 50%; bottom: 26px; z-index: 2; width: 1px; height: 46px; transform: translateX(-50%); background: linear-gradient(rgba(247,243,234,0), rgba(247,243,234,0.75)); } @media (prefers-reduced-motion: no-preference) { .hero__scroll { animation: hero-scrollpulse 2.4s ease-in-out infinite; transform-origin: bottom; } } @keyframes hero-scrollpulse { 0%, 100% { opacity: 0.35; transform: translateX(-50%) scaleY(0.6); } 50% { opacity: 1; transform: translateX(-50%) scaleY(1); } } /* Staggered hero copy rise */ @media (prefers-reduced-motion: no-preference) { .hero--cinematic .hero__inner > * { opacity: 0; animation: pz-up .85s cubic-bezier(.2,.7,.2,1) forwards; } .hero--cinematic .hero__inner > *:nth-child(1) { animation-delay: .25s; } .hero--cinematic .hero__inner > *:nth-child(2) { animation-delay: .38s; } .hero--cinematic .hero__inner > *:nth-child(3) { animation-delay: .52s; } .hero--cinematic .hero__inner > *:nth-child(4) { animation-delay: .66s; } } /* Transparent header over the hero, solid on scroll */ .has-cinematic-hero .site-header { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent; transition: background .35s ease, border-color .35s ease; } .has-cinematic-hero .site-header a, .has-cinematic-hero .site-header .nav-toggle { text-shadow: 0 1px 16px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.5); } .has-cinematic-hero .site-header.is-solid { background: var(--navy); border-bottom-color: rgba(176,141,79,0.2); } .has-cinematic-hero .site-header.is-solid a, .has-cinematic-hero .site-header.is-solid .nav-toggle { text-shadow: none; } /* No gap above the hero — photo reaches the very top under the fixed header */ .has-cinematic-hero .wp-site-blocks > main { margin-block-start: 0; } /* ========================================================================== Žurnalas — blog index (home.html / archive.html) ========================================================================== */ .journal-hero { padding-top: clamp(120px, 16vw, 200px); padding-bottom: clamp(40px, 6vw, 72px); text-align: center; border-bottom: 1px solid var(--line); } .journal-hero .eyebrow { display: block; margin-bottom: 20px; } .journal-hero__title { font-size: clamp(52px, 9vw, 96px); color: var(--navy); margin: 0 auto 22px; } .journal-hero__lead { max-width: 60ch; margin: 0 auto; color: var(--stone); } /* Listing grid — the