/* ================================================== live offers ========== The engine's own deals: the /pasiulymai/ grid and the announcement bar. These are a different object from the five editorial offers in pp-booking.css (.dl-offer), and they look different on purpose. An editorial offer is a standing arrangement — early booking, families, longer stays — and reads as a quiet card with the saving sealed onto the photograph. A live deal is a thing that STOPS: it has a deadline, and the deadline is most of its argument. So everything sits on the photograph, the clock included, and the card is darker and more insistent than its neighbours. The dialog behind „Plačiau" is the editorial one (.dl-modal) unchanged — one popup language for both kinds of offer. Only the two rows that are peculiar to a live deal are added at the foot of this file. Ink on a photograph: light, one accent, and the veil. Nothing else. */ /* The grid is sized by the CARD, not by a column count. Two columns looked right at 1440 and wrong at 1990 — the client's own screen — where the same rule made each card 880px wide and one of them „takes almost full page". A fixed column count hands the card whatever width the container happens to have, which on a 1800px container is always going to be too much. So the track has a ceiling. `auto-fit` then decides how many fit and drops the empty ones, and `justify-content: center` keeps a lone offer in the middle of the band rather than marooned in the left third. One offer, two, or five all lay out from the same rule — which is what „ribotos trukmes pasiulymai often will be one at a time" needs. The full-width span for an odd card out is gone with it: that was the biggest slab on the page and it is what the client was looking at. */ .of-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 560px)); justify-content: center; gap: 22px; } .of-card { display: block; position: relative; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; } .of-frame { position: relative; display: block; overflow: hidden; aspect-ratio: 8 / 5; border-radius: var(--spacing-radius-main, 16px); /* The ground the curtain wipes off on the standing offers. Warm, so the half-second before the photograph arrives is a card and not a hole. */ background-color: var(--colors-color-bg-3); /* A PLAIN BORDER, because there is no longer a shape for it to fail to follow. „lets remove the stub at the end, add the info some other way." With the tear-off gone the card is a rectangle again, so the outline can be what it was asked to be in the first place — „id att a light border around the edges, now it blends w bg" — instead of four `drop-shadow`s tracing the alpha silhouette of a masked element. That technique existed only to get a line to run into the two punched notches and back out („the border around the card doesnt go around the cut out of the stub it looks weird"). No notches, no problem, and one filter per card less. */ border: 1px solid var(--of-edge); } :root, body { --of-edge: color-mix(in srgb, var(--of-chip-ink, #081c2b) 22%, transparent); } /* The curtain layer on the standing offers: it holds ONLY the photograph, so the clip-path wipe in pp-booking.css cannot take the title and the saving with it. On the live cards this element is not emitted at all and the image is positioned directly. */ .of-shot { position: absolute; inset: 0; display: block; overflow: hidden; } .of-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); } .of-card:hover .of-img { transform: scale(1.04); } /* Two gradients in one layer. The top one carries the saving, the bottom one the title — a photograph of a bright room is white exactly where the type goes. Neither reaches the middle, so the picture is still a picture. */ .of-veil { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(180deg, rgb(8 28 43 / 26%) 0%, rgb(8 28 43 / 0%) 22%), linear-gradient(0deg, rgb(8 28 43 / 72%) 0%, rgb(8 28 43 / 30%) 26%, rgb(8 28 43 / 0%) 54%); } /* ---- the tear-off stub -------------------------------------------------- Chosen from five treatments. „Nuplėšiama šaknelė" — the saving set vertically on a strip down the left, a perforation beside it, and a punched hole at each end of the perforation. Two decisions worth keeping: · The holes are FULL circles positioned half outside the frame. The frame's `overflow: hidden` clips each to a semicircle, so the notch is bitten out of the card edge without masking the photograph or drawing the shape twice. They are painted in the SECTION's ground colour (--of-ground), which is why that variable exists. · Vertical type reads bottom-to-top (`vertical-rl` + a 180° turn), the way a ticket stub does. Top-to-bottom would be a book spine. Only the saving lives here. A struck compare-at set vertically underneath „169 €" is two columns of rotated type, which is a puzzle rather than a device — it sits in the meta line under the title instead. THE WIDTH IS THE FIGURE'S EM BOX, and only that. Both children are rotated, so in here a line-height is a COLUMN WIDTH — but they are stacked by a COLUMN flex, one above the other, so the strip has to hold the WIDER of the two and never their sum. The figure is now .text-h4 (see the three-styles note below), whose widest value is a flat 36px between 768 and 991 — the band where the template's own scale has taken over from the fluid one — so 52 is still the floor it always was, with 8px clear on each side at the tightest width. Measured, because the first attempt at this comment added 12px to the floor for a sum that a column flex never computes. */ /* NO COUNTERFOIL. 2026-08-30, savininkas: „lets remove the stub at the end, add the info some other way." It was a 168px opaque strip down the right of every card carrying four label/value pairs — the hotel's name in caps, the clock, the deadline, the stay window and the minimum stay. Two things were wrong with it. It cost a fifth of the card's width, so the photograph the owner had already chosen („i prefer the card that is full image") was never full-bleed; and four sets of terms is a page of small print standing where a picture should be, which is a thing a person skips rather than reads. WHERE THE INFORMATION WENT, all of it, none dropped: · the clock -> the foot of the card, on one line with the struck price. It is the only fact on that strip with a reason to be seen before the click: it changes. · Galioja iki -> the popup. · Viešnagėms -> the popup. · Trukmė -> the popup. · „Viešbutis Prie Parko" -> nowhere, and it is not missing. It is the hotel's own site; every card on it is the hotel's. */ /* ===================================================== THE STICKER ======= The saving, glued on. It went through three homes before this — rotated down the stub in a 36px serif, then a cream pill on the line above the title — and both treated a discount as typography that had to behave. On a real coupon the saving is a thing somebody stuck on top, and it works precisely because it does not belong to the layout. RED, ANGLED, WITH A SHADOW UNDER IT, and each is doing a job. Red is the only warm-hot colour near this palette of navy, sand and brass, so it carries the loudest thing on the page without competing with the brand; #a8321f is desaturated far enough to sit beside the brass rather than vibrate against it. The angle is what reads as applied rather than placed. The shadow lifts it off the photograph — without one an angled rectangle is just a rotated box. Three treatments were built and shown on the live cards (a hangtag, a die-cut seal, a corner banner) and all three were rejected: „revert the red labels to initial one". The caps line above the figure is the one thing kept from that round. NO HOVER. „the effect how they move on hover is weird" — a thing that reads as glued on does not wobble when you look at it. The card still lifts its photograph; the sticker stays where it was put. No new type: the figure is the card's own `.text-h4`, which is the title's tuple, and the label and unit are the card's caps. */ /* THE TAB. 2026-08-30, savininkas picked it out of ten: „10 / Kraštinė kortelė / Ąselė, prisegta prie kairio krašto ir kyšanti už kortelės. Skirtukas knygoje." It replaces the tilted sticker that had been there since the badges were first drawn. The sticker's problem was never the colour — it was that a thing stuck on at an angle has to look casually placed to work, and a CSS rotation is the same 4.5 degrees on every card in the row, which reads as a template rather than as a hand. A tab is registered to the card's edge instead, so repetition is the point: nine cards with a tab in the same place look like a filing system, and nine stickers at the same angle look like a mistake. IT IS A CHILD OF .of-card, NOT .of-frame, and that is what lets it hang. `.of-frame` carries `overflow: hidden` for the photograph's rounded corners, so anything inside it is clipped at the card edge and the overhang — the part that makes it a tab rather than a label — would be cut off. `.of-card` has no clip, so the 14px that sticks out survives. */ .of-sticker { position: absolute; z-index: 5; /* Same 20px from the top as the counter opposite it, so the two things pinned to this card sit on one line rather than nearly on one. */ top: 20px; left: -14px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 32px 12px 22px; background-color: #a8321f; color: #fff; /* The swallowtail. The extra right padding above is what the notch eats. */ clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%); /* NO SHADOW. „dont use box shadow anywhere pls, the red labels dont need box shadwo." */ } /* ============================================== THE COUNTER, TOP RIGHT === 2026-08-30, savininkas: „Liko 182:14:36:24 this should be like a counter card that actually works in top right of the offer card... like shopify plugins you know back in the day?" So it is the four-box device, and it is deliberately the plain version of it: flat cream tiles, one figure each, the unit under it. What made those plugins look cheap was never the four boxes — it was the gradient, the bevel, the drop shadow and the flip animation on every digit. Take those away and what is left is a departures board, which is a hotel object. CREAM, NOT GLASS. The cover photograph comes from the engine and we do not choose it, so a translucent tile is a different component on every offer. The same argument that took the frost off the coupon tiles („they are not visible on all bgs") applies here with more force, because these are NUMBERS: a countdown you have to squint at is worse than no countdown. THE TYPE IS THE CARD'S OWN, both of it. The figures take the title's serif at the title's size, and the units take the label style the tab already uses — so four boxes of new information cost the card ZERO new type styles. */ .of-cd { position: absolute; z-index: 3; top: 20px; right: 20px; display: flex; gap: 5px; } .of-cu { min-width: 54px; padding: 7px 7px 8px; /* Rounded, like every other soft-edged thing on this site — the card is 16px, the buttons are pills. Square tiles were the departures-board reference taken too literally. */ border-radius: 8px; background-color: #f4f1ea; color: #081c2b; display: flex; flex-direction: column; align-items: center; gap: 2px; } .of-cu-n { font-family: var(--font--secondary); font-size: var(--text-h4-font-size, 27px); font-weight: 400; letter-spacing: -1px; line-height: 1; /* Without these the row shuffles sideways once a second as 1s and 2s trade places. Same requirement the counterfoil had; the counterfoil is gone. */ font-variant-numeric: tabular-nums; } .of-cu-l { /* NOT CAPS AND NOT BOLD. „why caps, why bold?" — because they were the site's label token, which kept the card at three type styles. But a caps-bold word under a figure reads as a second heading, and there are four of them in a row. They are units, not headings. Still three styles: this is the BODY tuple the blurb already uses, dropped in colour rather than in size — the house rule's own remedy. Lowercase, because „val." and „min." are lowercase in Lithuanian. */ font-family: var(--text-text-body-font-family); font-size: var(--text-text-body-font-size, 16px); font-weight: 400; letter-spacing: var(--text-text-body-letter-spacing, -0.2px); line-height: 1.1; opacity: .5; } @media (max-width: 767px) { /* Four tiles at 54px plus gaps is 231px, which is most of a 390px card. The seconds are the least useful unit on a deadline measured in days. */ .of-cd { top: 14px; right: 14px; gap: 4px; } .of-cu { min-width: 46px; padding: 6px 5px 7px; } .of-cu:last-child { display: none; } } /* The two runs of caps on the sticker: the word for what the figure is („NUOLAIDA", „FIKSUOTA KAINA") and the unit after a ratio („NAKTYS"). Both take the card's caps token WHOLE. `.of-st-l` was a 10px/0.2em approximation of it and `.of-note` had lost its rule entirely and was inheriting 16px at the browser's default tracking — so the sticker was carrying a caps style two pixels off the card's, and a body style that differed from the real body only in letter-spacing. Both are the exact near-duplicate the house rule exists to catch, measured on the rendered page. */ .of-st-l, .of-note { font-family: var(--text-label-font-family); font-size: var(--text-label-font-size, 12px); line-height: var(--text-label-line-height); font-weight: var(--text-label-font-weight); letter-spacing: var(--text-label-letter-spacing); text-transform: uppercase; opacity: .72; white-space: nowrap; } /* The figure, its unit and the old price on ONE line: „id always put compare at price next to regular price, not under it". Stacked, a struck number is just a second number with a line through it. */ .of-st-row { display: flex; align-items: baseline; gap: 9px; } .of-sticker .of-figure { color: inherit; white-space: nowrap; } .of-sticker .of-note { color: inherit; opacity: .78; } .of-sticker .of-was { color: inherit; opacity: .62; text-decoration-color: rgb(255 255 255 / 55%); } /* The compare-at, in the meta line rather than a fourth type style of its own — it takes the same size and colour as the date beside it and is distinguished by the strike alone. */ .of-was { opacity: .68; } /* ---- the bottom ---------------------------------------------------------- */ /* The name and one or two sentences of the offer's own copy. „Plačiau" is gone: the whole card has always been the button, so the pill was a label on a target the size of a photograph — and it was occupying the place a sentence should have had. */ .of-bottom { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; color: var(--colors-color-light); } .of-blurb { max-width: 52ch; letter-spacing: var(--text-text-body-letter-spacing, -0.2px); opacity: .8; text-wrap: pretty; } /* A scrim that is the size of THE TEXT, not a fixed share of the frame. `.of-veil` above is a wash tuned to the 8:5 card it was written for. The block it protects is now four rows deep — the saving, the title, the dates and the button — and how much of the frame that occupies depends on the ratio: 41 % of a 21:9 card at 1440, 62 % of an 8:5 card at 390. A percentage stop cannot be right for both, and on the phone the first line of every card was sitting on open sky. So the wash got lighter and the work moved here, where the box grows with the words inside it. It starts at the perforation rather than at the frame edge, so the stub keeps its own colour. */ .of-bottom::before { content: ""; position: absolute; z-index: -1; top: -150px; right: -22px; bottom: -18px; left: -22px; pointer-events: none; /* From the corner the copy is in, not across the whole foot — see the note on `.gf-bottom::before` in pp-gifts.css. A band the width of the card darkens the half of the photograph that has nothing written on it. */ background-image: radial-gradient( 120% 128% at 0% 100%, rgb(8 28 43 / 92%) 0%, rgb(8 28 43 / 78%) 36%, rgb(8 28 43 / 28%) 64%, rgb(8 28 43 / 0%) 84% ); } .of-title { display: block; color: var(--colors-color-light); text-wrap: balance; } /* One thin row under the title: how long is left, and the way in. The clock is small here on purpose — it is a fact about the offer, not the offer. */ /* The row is now allowed to break, and it has to be. It used to hold „iki 2027 m. kovo 31 d." — 132px — where it now holds „Viešnagėms 2026.11.01–2027.03.31" at 248, because the date had to say WHICH dates it means (see widgets/live-deals.js, stayLabel). Measured in the 1fr/2fr band at 1440: the meta box is 331px and its content 376, or 429 with a struck price beside it, so „Plačiau" was hanging 25px past the card's own edge and being clipped by the frame's overflow. Wrap rather than truncate. The dates are the thing a guest is checking the card FOR; „Plačiau" is a constant affordance and can perfectly well sit on a line of its own. `margin-left: auto` keeps it against the right edge whether it wrapped or not — `space-between` alone puts a lone item on the left. */ .of-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .of-meta > .of-more { margin-left: auto; } /* The tracking is the body's, not the browser's default. Measured on the live page: the small text on these cards was Instrument Sans 16 / 400 / normal while the paragraph beside it was Instrument Sans 16 / 400 / −0.2px — the same face at the same size differing only in letter-spacing, which is the textbook near-duplicate the house rule is about. One tuple, not two. */ .of-clock, .of-when, .of-was { letter-spacing: var(--text-text-body-letter-spacing, -0.2px); } /* The clock's digits are the one thing on the card that rewrites itself once a second, so they get tabular figures and neutral tracking — otherwise the whole meta line shuffles sideways on every tick. Same reason the counterfoil needed it; the counterfoil is gone and the requirement is not. */ .of-clock time { letter-spacing: 0; font-variant-numeric: tabular-nums; } /* De-emphasised by COLOUR, at the body's own size — the house rule. A smaller size here would be a fourth type style on a card that already carries a caps sticker label, a serif title and body copy. */ .of-clock { opacity: .72; } /* The terms in the popup — label left, value right, one row each. */ .of-terms-list { display: flex; flex-direction: column; gap: 6px; } .of-term { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .of-term-l { opacity: .58; } .of-term-v { font-variant-numeric: tabular-nums; text-align: right; } .of-clock, .of-when { display: inline-flex; align-items: center; gap: 6px; opacity: .82; white-space: nowrap; } .of-clock svg { flex: 0 0 auto; opacity: .75; } .of-clock-label { opacity: .7; } /* Without this the row twitches once a second as the digits change width. */ .of-clock time, .of-bn-clock time { font-variant-numeric: tabular-nums; } /* The pill carried `label-small` in the markup — 10px / 700 / 2px — which is the caps style the figure's unit was already almost using. Both now name the card's one caps style, and widgets/live-deals.js and widgets/packages.js drop the class rather than fight it from a stylesheet. The gift coupon's „Plačiau" is the same tuple, set in public/css/pp-gifts.css. */ .of-more { flex: 0 0 auto; font-family: var(--text-label-font-family); font-size: var(--text-label-font-size, 12px); line-height: var(--text-label-line-height); font-weight: var(--text-label-font-weight); letter-spacing: var(--text-label-letter-spacing); text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; /* FILLED AND FROSTED. „button is ugly with no fill and no frosted glass". It was an outline over a photograph, which on a busy frame reads as a hairline nobody is sure is a control. Now it has a real ground of its own and blurs what is behind it. `will-change: filter` is NOT a performance hint here, it is the fix from the /kambariai/ white bar: an element with `backdrop-filter` holds a render surface the size of its backdrop ROOT, and without a stacking context of its own that root is the whole scrolling section — twenty-two of those is how one page reached 1061 MB of compositor surface. Measured again after this change; see the note at the foot of this file. */ border: 1px solid rgb(255 255 255 / 30%); background-color: rgb(255 255 255 / 15%); backdrop-filter: blur(9px) saturate(1.25); -webkit-backdrop-filter: blur(9px) saturate(1.25); will-change: filter; color: var(--colors-color-light); white-space: nowrap; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .of-more::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(-45deg); transition: transform .25s ease; } .of-card:hover .of-more { background-color: var(--colors-color-light); color: var(--colors-color-dark); border-color: transparent; } .of-card:hover .of-more::after { transform: translate(3px, -1px) rotate(-45deg); } .of-card:focus-visible { outline: 2px solid var(--colors-color-accent-1); outline-offset: 4px; border-radius: var(--spacing-radius-main, 16px); } /* How many are running changes the shape, not just the column count. One offer is a banner; two are halves; three or more are the row of squares the card was drawn for. */ @media screen and (max-width: 991px) { .of-grid { gap: 16px; } /* The `.of-figure { font-size: clamp(24px, 3.4vw, 30px) }` that lived here is gone with the collapse to three styles: it was the mobile half of the two-sizes-of-one-serif problem, and re-stating a size for the figure at any breakpoint puts a fourth style on the card at that breakpoint only — which is precisely how the mish-mash got in the first time. The figure follows .text-h4, which already has its own responsive scale. */ } @media screen and (max-width: 767px) { .of-grid { grid-template-columns: minmax(0, 1fr); } /* Landscape is right in a row and wrong as a single column on a phone, where 8/5 across the full width is a letterbox. */ .of-frame { aspect-ratio: 4 / 3; } /* The text still has to clear the stub. A leftover `left: 16px` from the old chip layout lived here and won on source order, so on a phone the title started UNDERNEATH the stub and the stub — being the higher layer — painted over its first three characters. Measured, not spotted: „Trys naktys" rendered as „s naktys". */ .of-bottom { left: 14px; right: 14px; bottom: 14px; } } /* ================================================ the announcement bar == 56px tall, light on a moving background, and it is the first thing above the hero on every page. So the deal state has to say four things in one line — what, how much off, how long left, where to go — without becoming a second navbar. It is one link; the whole strip is the target. */ /* ONE TYPE STYLE, AND GAPS DO THE SEPARATING. 2026-08-30, savininkas: „the top bar now has too many different fonts. separate info with gaps, not with font differences." Measured on the live homepage before the fix — TWO tuples in a 56px strip: Instrument Sans / 10px / 500 / uppercase / 2px „−10 %", the offer's name Instrument Sans / 10px / 700 / uppercase / 2px „liko", the clock, the link Same face, same size, same tracking, differing only by one notch of weight. That is the exact near-duplicate the house rule is written about: it does not read as a hierarchy, it reads as a mistake. On top of it the figure sat in a white pill and the last phrase was underlined, so a strip carrying four short facts was using FOUR different devices to tell them apart. Now: one tuple for all four (the bar's own caps style, inherited — the two `font-weight: 500` overrides are gone), no pill, and the column gap goes from 10px to 26px. Space is what separates them, which is what was asked for and is also the quieter answer. The underline on „Žiūrėti pasiūlymus" STAYS, and it is not a font difference: the whole strip is one `` and that underline is the only thing on it that says so. Take it away and the bar is a notice rather than a way in. */ .of-bn { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 26px; color: inherit; text-decoration: none; } /* The figure used to be a white pill in accent ink — a fifth colour and a shape in a strip 56px tall. It is first in reading order, which is the emphasis a saving needs here. */ .of-bn-clock { white-space: nowrap; } .of-bn-go { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / 45%); transition: text-decoration-color .25s ease; } .of-bn:hover .of-bn-go { text-decoration-color: currentColor; } @media screen and (max-width: 767px) { /* The name and the clock are the offer; „Žiūrėti pasiūlymus" is where a tapped strip already goes. Two lines in a 56px bar is a broken bar. */ .of-bn-go { display: none; } } /* ------------------------------------------- live rows in the dialog ---- */ .of-modal-figure { margin: 6px 0 0; font-family: var(--font--secondary); font-size: var(--text-h4-font-size, 34px); line-height: 1.1; color: var(--colors-color-accent-2); } /* The price the card shows, shown again where the decision is actually made. The first build put it only on the card, so opening the popup to read what was included LOST the figure — the one number the guest came for. */ .of-modal-price { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 0; } .of-modal-now { font-family: var(--font--secondary); font-size: var(--text-h4-font-size, 36px); line-height: 1.1; /* The letter-spacing is not decoration, it is what stops this being a SECOND serif style. Without it the price inherits −0.4px while the title two lines above it is the h4's −1px — same face, same 28.8px, different tracking, which is not a hierarchy, it is the „font mish mash" the client named on 2026-08-29 and it is invisible in the source because the two live in different rules. Measured on the packages dialog, which is the first thing to render this row (every priced live deal so far is `fixed_price`, where the price IS the big figure and this element is never emitted). Taking the token makes the number wear the heading's own style, which is what .gf-now already does next door. */ letter-spacing: var(--text-h4-letter-spacing); } .of-modal-price .of-was { font-size: var(--text-h6-font-size, 24px); } .of-modal-note { font-size: var(--text-text-small-font-size, 12px); opacity: .6; } .of-sub { opacity: .64; } /* ============================================== the live section itself == It was navy, and the rule that made it so lived HERE while the rule that makes it paper lives thirty lines down — same selector, same specificity, later one wins the background. But this one also set `color: var(--colors-color-light)` and the later one does not, so the band came out white ink on white paper and the heading vanished. Both halves are stated together now, once, below. */ /* ONE GROUND FOR THE WHOLE PAGE, and the head band is a card on it. 2026-08-29, savininkas: „why do you alternate backgrounds that so oldschool" and „Pasiūlymai ir dovanos / Kas šiuo metu galioja … should be rounded like a card, we do this accross the website". The page had been navy / paper / cream / paper / cream, one band per product, on the theory that colour sorts the three offers before a heading is read. It does — and it also dates the page: alternating full-bleed bands is a 2014 marketing site. The sorting is already being done by the thing that should do it, the pinned heading beside each group. So: one paper ground the whole way down, and the only block that keeps a colour is the head, which now carries it as a rounded card rather than as a full-bleed field. The radius is the site's own `--spacing-radius-24`, the same one the section seams use everywhere else. THE HEAD BAND STANDS ALONE. 2026-08-29, savininkas: „i would put ribotos trukmes in light bg already, just give pasiulymai ir dovanos enough padding to not be weird on its own." It used to be one continuous navy field — head band and deals band sharing a ground with no gap — which was itself a fix for „Verta užsukti tiesiogiai being alone in diff bg is weird". That earlier complaint was about a hero holding ONE LINE and nothing else; this one holds a title, a lede and the room to breathe below them, so it carries its own field perfectly well. The page now reads as one navy header over four light bands rather than as navy-then-everything, and the first thing on paper is the thing that is ending. */ .section.of-hero.of-hero { background-color: var(--colors-color-dark); color: var(--colors-color-light); border-radius: var(--spacing-radius-24); padding-bottom: clamp(90px, 9vw, 150px); } .of-hero .headline-gallery-a .label-small { color: var(--colors-color-bg-3); } .of-hero h1 { color: var(--colors-color-light); } /* Three bands, one ground. What separates them is the pinned heading and the space around it, which is what separates the groups on /galerija/ too. */ .section.of-live-section.of-live-section, .section.of-packages-section.of-packages-section, .section.of-gifts-section.of-gifts-section { background-color: var(--colors-color-bg-1); padding-top: var(--pp-section-gap-lg, 160px); padding-bottom: 0; } .section.of-gifts-section.of-gifts-section { padding-bottom: var(--pp-section-gap-lg, 160px); } .of-live-section[hidden] { display: none; } /* Dark ink on paper — the same set the packages band uses, so the stub, the perforation holes and the card border all take the band's own ground. */ .of-live-section { --of-chip-ink: var(--colors-color-dark); --of-ground: var(--colors-color-bg-1); } .of-gifts-section[hidden] { display: none; } /* ================================================= the packages band ==== The dated, fixed-price stays out of /api/packages — everything on that endpoint the „Dovanų kuponai" band below cannot show, because the hotel has said it will not issue a coupon for them (`giftable: false`). No new card and no new type: the cards are the LIVE DEAL's, `.of-card` and everything under it exactly as defined at the top of this file, with the price in the tear-off stub where a deal puts its saving and nothing at all where a deal puts its clock. What separates the band is the ground and the ink it implies — cream between the navy above and the near-white below — so three bands read as three products at arm's length, out of focus, before a heading is read. The gift ribbon is emphatically NOT borrowed: `.gf-ribbon` and `.gf-bow` mean „this is a present", and these are not. Dark ink and cream ground, the inverse of the navy band, so the stub is a stub on both and the two sections still answer each other. */ .of-packages-section { --of-chip-ink: var(--colors-color-dark); --of-ground: var(--colors-color-bg-1); } .of-packages-section[hidden] { display: none; } /* `.of-meta` is `space-between`, which is right on a deal card — the clock on the left, the way in on the right. A package has no clock, and a package whose engine record carries no `compare_at` has nothing on the left either, so „Plačiau" would slide over and sit under the title's first word. Scoped to this band rather than fixed on `.of-more`: the same latent case exists on a deal with neither a deadline nor a struck price, and changing how THAT renders is not this band's business. */ .of-packages-section .of-more { margin-left: auto; } /* The struck compare-at in the packages popup is small print, not a size of its own. `.of-modal-price .of-was` above lifts it to the h6 token — a fourth size in a box that already carries a caps line, a serif figure and body copy — and the house rule is to de-emphasise with COLOUR: `.of-was` is already at 68% opacity, which says „this is the old number" without inventing type to say it. So it takes the body style it is sitting next to. Scoped, because the live deals' popup has shipped with the larger figure and re-cutting a section nobody asked about is not this band's business. The tokens rather than `inherit`: the popup's own body copy is .text-body, and `inherit` picks up whatever .dl-modal-body happens to set (measured: 17px / −0.4px), which is a near-duplicate of the 16px / −0.2px right beside it and therefore the same fault one notch quieter. */ .dl-modal[data-package-dialog] .of-modal-price .of-was { font-size: var(--text-text-body-font-size, 16px); letter-spacing: var(--text-text-body-letter-spacing, -0.2px); } /* Navy tag on the cream band — the inverse, so the chip is a chip on both and the two sections still answer each other. */ .of-standing-section { --of-chip-ink: var(--colors-color-dark); --of-ground: var(--colors-color-bg-2); } .section.of-standing-section.of-standing-section { background-color: var(--colors-color-bg-2); padding-top: var(--pp-section-gap-lg, 160px); padding-bottom: var(--pp-section-gap-lg, 160px); } .of-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: min(720px, 100%); margin-bottom: 40px; } .of-live-section .of-head .label { color: var(--colors-color-bg-3); } .of-live-section .of-head h2 { color: var(--colors-color-light); } .of-lede { margin: 0; opacity: .78; } /* ================================================== the hand-off band === /rezervacija/ used to carry five offer cards. It carries one line now: the page is for booking, and an offer is one click away. Wide, quiet, and a single link — not a card that competes with the room cards above it. */ .bk-offers-link .of-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: var(--spacing-radius-main, 16px); border: 1px solid color-mix(in srgb, var(--colors-color-dark) 12%, transparent); background-color: var(--colors-color-bg-2); color: inherit; text-decoration: none; transition: border-color .3s ease, background-color .3s ease; } .bk-offers-link .of-band:hover { border-color: color-mix(in srgb, var(--colors-color-accent-1) 55%, transparent); background-color: var(--colors-color-bg-3); } .of-band-text { display: flex; flex-direction: column; gap: 4px; } .of-band-title { display: block; } .of-band-note { opacity: .7; } .of-band-go { flex: 0 0 auto; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--colors-color-dark) 30%, transparent); transition: text-decoration-color .25s ease; } .bk-offers-link .of-band:hover .of-band-go { text-decoration-color: currentColor; } @media screen and (max-width: 767px) { .bk-offers-link .of-band { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px; } .of-head { margin-bottom: 28px; } } /* ======================================================= puslapio struktūra 2026-08-29, savininkas: „but then you will have double title with the page title THINK PROPOSE A WHOLE NICE STUCTURE OF THE PAGE" ir „MAKE THE OPAGE LOOK GOOD". Puslapyje buvo KETURIOS antraštės ir TRYS akutės anksčiau už pirmą pasiūlymą. Dabar: viena h1 antraštės juostoje, po ja — peršokimo nuorodos, kurios ir yra sekcijų pavadinimai (pasakyti vieną kartą, ten kur jie ir nuveda), o kiekviena grupė pažymėta plona juostele vietoj 36 px serifo antraštės. */ .of-head-band .of-head-inner { max-width: 62ch; } .of-head-band .of-head-lede { margin-top: 18px; color: color-mix(in srgb, var(--colors-color-light) 74%, transparent); } /* ==================================== juostos: „galerijos" išdėstymas ==== 2026-08-29, savininkas: „thio sis the most ai-ish divider i have ever seen" (apie plonos linijos juostelę su etikete, skaičiumi ir pastaba) ir „these are also bad" (apie peršokimo burbulus su skaičiais po h1). Vietoj jų — tas pats išdėstymas kaip /galerija/ puslapyje: „how about we show the cupons like the gallery images - with the sticky title on the left?" Tinklelį, prilipimą ties 18vh ir 1fr / 2fr santykį duoda styles.css ir prie-parko.css `.gallery-b-halves > .left-gallery-b` taisyklės. Čia tik tai, ko šablonas nenumato dviem atvejais. */ /* Bazinis `.left-gallery-b` vis dar turi `transform: translate(0, -100%)` iš šablono „prilipdyti prie apačios" varianto. Prilipimo taisyklė ties 992 px perrašo position ir top, bet NE transform — palikta ji nustumia stulpelį už ekrano. pp-pages.css tą patį daro `.gal-all`; čia tas pats gydymas. */ .of-halves > .left-gallery-b { max-width: none; padding-bottom: 0; transform: none; } /* Kortelių stulpelis: `.right-gallery-b` yra 48 px tarpo flex kolonėlė, todėl po tinklelio einantis mygtukas jau turi savo tarpą. */ .of-halves > .right-gallery-b { min-width: 0; } /* Skaičius toje pačioje vietoje, kur galerijoje yra „15 nuotraukų“. Rašo pasiulymai.astro iš to, kas iš tikrųjų nupiešta. Aukštis rezervuotas, kad antraštė nešoktų, kai skaičius atsiranda. */ .of-live-section .left-gallery-b p, .of-packages-section .left-gallery-b p, .of-gifts-section .left-gallery-b p { opacity: .74; } /* Prilipęs stulpelis turi kur lipti tik tada, kai šalia jo yra aukštesnis turinys. Vienos kortelės juostoje jo nėra — ir tai gerai: tada jis tiesiog stovi vietoje. */ @media screen and (max-width: 991px) { .of-halves > .left-gallery-b { margin-bottom: 8px; } } /* ------------------------------------------------- krovimosi būsena ---- 2026-08-29, savininkas: „info is coming from api very slowsly and while it loads the layout is fucked up, handle these states." Anksčiau visos trys juostos buvo `hidden`, tad puslapis pirmame kadre buvo antraštė → „Kodėl tiesiogiai" → poraštė, o paskui į vidurį įsiterpdavo trys sekcijos. Dabar juostos yra iš karto, o vietoj kortelių — vietos laikikliai to paties 8:5 kadro. Jie nieko neteigia: nei kainos, nei nuolaidos, nei datos. Todėl juos saugu siųsti HTML'e, kai tikro pasiūlymo — nesaugu. */ .of-sk { display: block; pointer-events: none; } .of-sk-frame { display: block; aspect-ratio: 8 / 5; border-radius: var(--spacing-radius-main, 16px); background-color: color-mix(in srgb, currentColor 9%, transparent); } .of-sk-line { display: block; width: 58%; height: 11px; margin-top: 16px; border-radius: 999px; background-color: color-mix(in srgb, currentColor 9%, transparent); } /* Vienas lėtas pulsas per abu laikiklius, ne blizgesys per kiekvieną: 56 px juostoje judantis atspindys yra animacija dėl animacijos. */ @media (prefers-reduced-motion: no-preference) { .of-sk-frame, .of-sk-line { animation: of-sk-pulse 1.6s ease-in-out infinite; } .of-sk:nth-child(2) .of-sk-frame, .of-sk:nth-child(2) .of-sk-line { animation-delay: .2s; } } @keyframes of-sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* Juosta, kuri jau atsakė, laikiklių nebeturi — skriptas perrašo tinklelį. Kai skripto nėra visai, `data-loading` niekada nenukrenta ir liktų trys juostos pilkų stačiakampių: tą atvejį uždaro