/* * riven-interactions.css * Vanilla CSS motion for the frozen (de-hydrated) Brikk clone. * Re-creates the Framer template's hover, button and scroll-reveal feel * WITHOUT any framework. Pairs with riven-interactions.js. * * Graceful degradation: reveal "hidden" start states are gated behind the * .js-enabled class on (set by an inline script before paint). If JS is * off, that class is never added, so nothing is ever hidden and the settled * static DOM (with baked counters + inlined SVGs) shows as-is. */ /* ---------- 1. Image hover ---------- * The live Brikk site does NOT zoom ANY image on hover (verified against * ready-channels-954676.framer.app: hero, project, team, service, contact - none * scale). The prior pass added a fabricated zoom that cropped the hero; it is * removed entirely. No image-hover rule here on purpose. */ /* ---------- 2. Button interactions ---------- * The live CTA buttons do NOT zoom/lift/recolour. On hover the two stacked text * copies roll UP by the clip-window height and the two stacked arrow copies roll * RIGHT by the clip-window width, swapping which copy is visible - a verbatim * copy of the live Brikk button. The motion (base transform + roll delta, exact * distances, timing) is composed in riven-interactions.js initButtons(), because * the roll must be ADDED on top of each copy's authored inline base transform * (X-centering on the text, Y offset on the arrow) which a static CSS class could * not do without clobbering it. * * The one thing that DOES belong here is the height of the button's two halves. * Framer sizes the yellow "Content" half from its content (height:min-content, * 7px padding + a 25.6px line box = 39.6px) but pins the "Icon" half to an * explicit 40px. The 0.4px shortfall left the label half floating inside the * 40px link, so the two yellow blocks did not meet flush - visible as a hairline * of background at the top on one instance and at the bottom on another, * depending on which side the browser rounded the half-pixel to. Stretching the * Content half to the link's own height removes the slack at the source, which * also keeps the measured roll gap in initButtons() a clean integer. */ a[data-cta] > [data-framer-name="Content"] { height: auto; align-self: stretch; } /* ---------- 3. Section entrance reveals ---------- * Enhancement only: elements are visible by default. When JS is on we set the * pre-reveal hidden state, then .is-revealed animates them in once. */ .js-enabled .riven-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .js-enabled .riven-reveal.is-revealed { opacity: 1; transform: none; } /* Respect reduced-motion: show immediately, no movement. */ @media (prefers-reduced-motion: reduce) { .js-enabled .riven-reveal, [data-framer-background-image-wrapper] > img[alt="Image"], .riven-btn, .riven-btn [data-framer-name="Arrow"] { transition: none !important; } .js-enabled .riven-reveal { opacity: 1 !important; transform: none !important; } } /* ---------- 5. (removed) Marquee tickers ---------- * The logo marquee strips were removed from the page (see freeze.py), so their * animation rules are gone. Testimonials use the prev/next controls below. */ /* ---------- 5b. Testimonial prev/next controls ---------- * Two arrow buttons pinned to the bottom-right of the testimonial card area. * JS injects the container + buttons into EACH of the three responsive track * copies; only the live breakpoint's copy is laid out, the other two sit inside * a display:none ancestor. The hero carousel reuses .riven-testi-btn (see * .riven-hero-btn in section 9) so the two carousels read as siblings. */ .riven-testi-nav { position: absolute; right: 0; bottom: 0; display: flex; flex-direction: row; gap: 10px; z-index: 5; } /* The phone card fills the viewport width, so the arrows go centred just below * it instead of overlapping the quote - same placement the SSR controls use. */ .riven-testi-nav-phone { right: 0; left: 0; bottom: -44px; justify-content: center; } /* Rounded SQUARES, not circles. arrow-prev-40.svg / arrow-next-40.svg each draw * TWO paths: a rounded-square frame AND the chevron inside it. The old styling * put a white CIRCLE behind that, so every arrow rendered as a square inside a * circle - two competing shapes, which is exactly the "mediocre" look. There is * no second shape to add here: the asset already IS a rounded square, so we let * it be the button and only supply the fill it is missing. * * The fill is a ::before tile parked exactly under the frame's stroke. Measured * off the asset: the frame path runs at 4.167/40 = 10.4% of the box with a * 2.5/40 = 6.25% stroke, so its outer edge is at 7.3% and its inner edge at * 13.5%. Insetting the tile to that 10.4% centerline hides the tile's own edge * under the stroke with ~3% of slack on either side, and the two shapes read as * one object with the SVG stroke acting as the border. Percent insets mean this * holds at any button size, which is how the smaller hero variant below needs * no geometry of its own. * * Palette is the site's own: pale blue #E7E9F9 at rest under the brand-blue * #3A46C9 stroke, flipping to solid #3A46C9 on hover with the stroke inverted * to white by a filter (no second asset), and a #FBC345 focus ring. */ .riven-testi-btn { position: relative; width: 44px; height: 44px; padding: 0; border: none; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } .riven-testi-btn::before { content: ""; position: absolute; inset: 10.4%; /* The frame's own corner radius is ~11.7/40 of the box; measured against the * inset tile that lands at ~30%. */ border-radius: 30%; background: #e7e9f9; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); transition: background-color 0.2s ease, transform 0.15s ease; } .riven-testi-btn:hover::before { background: #3a46c9; } /* The SVG paints a fixed #3A46C9 stroke, so the white-on-blue hover state is a * filter rather than a second file. */ .riven-testi-btn:hover img { filter: brightness(0) invert(1); } .riven-testi-btn:active::before { transform: scale(0.94); } /* The ring goes on the tile, not the button box, so it hugs the shape the * visitor actually sees instead of the larger transparent hit area. */ .riven-testi-btn:focus-visible { outline: none; } .riven-testi-btn:focus-visible::before { box-shadow: 0 0 0 3px #fbc345, 0 2px 8px rgba(0, 0, 0, 0.12); } .riven-testi-btn img { position: relative; width: 100%; height: 100%; display: block; transition: filter 0.2s ease; } @media (prefers-reduced-motion: reduce) { .riven-testi-btn::before, .riven-testi-btn img { transition: none !important; } .riven-testi-btn:active::before { transform: none; } } /* ---------- 6. FAQ accordion + mobile nav ---------- * Smooth height/opacity for the swapped answer content. */ .riven-faq-answer { transition: opacity 0.3s ease; } .riven-faq-answer.riven-fade { opacity: 0; } /* Selected FAQ question STICKS highlighted: the active row paints its own yellow * background (template accent) directly, so it works on every breakpoint and * auto-fits multi-line questions (the row is height:min-content). A smooth * colour fade keeps it feeling like the template's moving highlight. Inactive * rows have a transparent background (the blue container shows through). */ [data-framer-name="Questions"] > [tabindex] { transition: background-color 0.28s ease; } [data-framer-name="Questions"] > [tabindex].riven-faq-active { background-color: var(--token-5da14d3a-a0d3-435c-988b-88f778a2a474, rgb(251, 195, 69)) !important; } /* Selected question label: dark + bold over the yellow for a clear active state. */ .riven-faq-active h4 { color: var(--token-c94b9048-68bd-49b9-93c9-ab60e6418c44, rgb(0, 0, 0)) !important; font-weight: 700; } /* ---------- 7. Layout fixes (localized page) ---------- * Uniform service cards: the template sizes each service card to its own content * (height:min-content + place-self:start), so a card with a longer label/desc is * taller than its neighbours and the 3x2 grid looks uneven. Force every card in * the services grid to fill its grid row so all six are the same height at every * breakpoint. Scoped to the services section only (About also uses "Cards"). */ [data-section="services"] [data-framer-name="Cards"] { align-items: stretch; /* Equalize ALL rows (not just cards within a row): make every grid row the * same height so cards in row 1 and row 2 match, then stretch cards to fill. */ grid-template-rows: repeat(2, 1fr) !important; grid-auto-rows: 1fr !important; } [data-section="services"] [data-framer-name="Cards"] > [data-framer-name] { height: 100%; place-self: stretch; } /* Project titles (the clickable list 01..07 in the "Наші роботи" section) ship * with white-space:pre, so a long title (e.g. the first one) never wraps and * overflows/clips inside its fixed-width row. Let every project title WRAP to a * second line cleanly instead of clipping. Scoped to the projects section. */ #project [data-project] h3, #project [data-project] [data-framer-component-type="RichTextContainer"] { white-space: normal !important; overflow-wrap: anywhere; word-break: normal; } #project [data-project] { height: auto !important; overflow: visible !important; } /* Vertically center the featured project image + caption within its column for * EVERY project (consistent regardless of caption length). The "Right" feature * column is a column flex; centering its content keeps the image+caption block * visually centered ("floating") the same way for all 7 items, so cycling never * shifts it up/down when a caption wraps to a different number of lines. */ #project [data-framer-name="Right"] { justify-content: center !important; align-items: center !important; } /* ---------- 7b. Hero layout: full-width heading, big photo, numbers beside it * * The template shipped the hero as ONE row of three equal flex columns - * heading | photo | the 93/4.9/97 counters - which squeezed the photo into the * narrow middle third and forced a near-portrait crop on a landscape photo. * The requested shape is: heading and subhead across the top, then the * before/after photo BELOW them running wide, with the three numbers stacked * down its right-hand side. * * That is two rows with a different column split per row, so the desktop * breakpoint switches .framer-vaaj15 from flex to grid. The .ssr-variant * wrappers are display:contents, so the real blocks (.framer-njztm heading, * .framer-ip0988 photo, .framer-npu854 counters) are the grid items directly; * the two out-of-breakpoint copies are display:none and never join the grid. * Each block ships flex sizing (flex:1 0 0 on a width:1px basis) that means * nothing to grid and would collapse the item, so each one is reset to auto. * * Below 1200px the template already stacks .framer-vaaj15 into a single column * in DOM order - heading, photo, counters - which is the same reading order, * so tablet and phone keep it and only re-shape the counters (see below). * * Photo aspect: the sources are 1600x893, i.e. 1.79:1. Matching that exactly on * desktop/tablet means object-fit:cover crops NOTHING, which matters more here * than anywhere else on the page because the before/after slider only reads if * both halves show the whole room. Phone keeps a slightly tighter 1.45 so a * full-bleed photo does not shrink to a letterbox strip on a 390px screen. * We keep Framer's own pairing of aspect-ratio with * height:var(--framer-aspect-ratio-supported, Npx) - that height is the * fallback for browsers without aspect-ratio support, not a second opinion. * !important guards against the baked per-breakpoint `height` overrides in the * generated stylesheet. */ #hero .framer-ip0988 { aspect-ratio: 1.792 !important; /* 1600 / 893, the native ratio */ height: var(--framer-aspect-ratio-supported, 532px) !important; } @media (min-width: 1200px) { #hero .framer-vaaj15 { display: grid; /* The numbers column is fixed so the photo absorbs every spare pixel as the * viewport grows, which is the point of the whole re-layout. */ grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "title title" "photo counters"; gap: 44px 48px; /* start, not stretch: a grid item with an aspect-ratio and an auto height * gets STRETCHED by a taller row sibling, which would silently re-crop the * photo. Only the counters column opts into stretching (below), so the row * is always as tall as the photo and the photo always keeps 1600x893. */ align-items: start; align-content: start; } #hero .framer-njztm { grid-area: title; /* Was a 350px-capped column in the old three-across row; it now owns the * full width of the hero. The 263px gap that used to push the CTA to the * bottom of that tall column would be a hole in a two-line header. */ max-width: none; width: auto; flex: none; gap: 28px; } /* The heading may run the full 1300px, but a 1300px-wide paragraph does not * read, so the subhead keeps a comfortable measure. */ #hero .framer-njztm .framer-x40kc { max-width: 720px; } #hero .framer-ip0988 { grid-area: photo; width: auto; flex: none; } #hero .framer-npu854 { grid-area: counters; max-width: none; width: auto; flex: none; /* The one item that DOES stretch: matching the photo's height lets the three * numbers space themselves against its top and bottom edges rather than * clumping at the top. `height: auto` is required, not decoration - the * template sets height:min-content, and align-self:stretch is ignored on an * item whose cross size is anything other than auto, so without this the * column stays min-content tall and space-between has nothing to space. */ align-self: stretch; height: auto; justify-content: space-between; /* The floor for when the photo is not tall enough to space them out. */ gap: 24px; } } /* TABLET (810-1199.98px). The template already turns the hero into a single * column here, and it already lays the counters out as a ROW of three beneath * the photo - which is exactly the fallback this layout wants, so the shape is * left alone. The one thing it does not do is stop the three columns from * drifting apart on a wide tablet, so they are capped and centred under the * photo. Each counter keeps its authored stacked form (figure above caption), * which reads correctly in a narrow third-of-the-width column. */ @media (min-width: 810px) and (max-width: 1199.98px) { #hero .framer-npu854 { /* The parent is a centred column flex, so the cap alone centres this block; * align-self makes that explicit rather than relying on the parent's * align-items:center staying put. */ max-width: 900px; align-self: center; gap: 32px; } } /* PHONE (<=809.98px). One column throughout, numbers still directly beneath the * photo, but each counter is turned on its SIDE: the big figure on the left, * its sentence beside it. Stacked as authored (figure over a full-width * sentence) the three blocks ran far taller and pushed the rest of the page * down. Every counter is exactly two children - the figure, then the caption - * so one pair of rules covers all three, including the 4.9 one whose figure is * itself a wrapper holding the number and its "/5". */ @media (max-width: 809.98px) { #hero .framer-ip0988 { aspect-ratio: 1.45 !important; height: var(--framer-aspect-ratio-supported, 260px) !important; } #hero .framer-npu854 { gap: 18px; } #hero .framer-npu854 > [data-framer-name="Counter"] { flex-direction: row; align-items: center; gap: 16px; width: 100%; } /* min-width, not a fixed flex-basis: a shared minimum lines the three * sentences up on one left edge, but a figure that needs more room (the * "4.9/5" one is the widest) can still take it instead of overflowing its * own clipped box. */ #hero .framer-npu854 > [data-framer-name="Counter"] > :first-child { flex: 0 0 auto; min-width: 92px; justify-content: center; } #hero .framer-npu854 > [data-framer-name="Counter"] > :last-child { flex: 1 1 auto; width: auto; min-width: 0; } } /* Mobile nav overlay toggled by the hamburger. * display is owned here (not inline) so [hidden] can fully remove it from layout; * otherwise the fixed full-viewport overlay would swallow all page hovers. */ .riven-nav-overlay { display: flex; transition: opacity 0.3s ease, visibility 0.3s ease; } .riven-nav-overlay[hidden] { display: none !important; } /* ---------- 8. Contact block buttons + phone reveal popup ---------- * Shared look for the three contact actions (phone / Viber / Telegram), used by * the markup in the contact section and by the popup that riven-interactions.js * builds, so both render identically from one rule set. */ .riven-cbtn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; border: none; border-radius: 10px; color: #fff; font-family: Tektur, 'Tektur Placeholder', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: filter 0.2s ease; } .riven-cbtn:hover { filter: brightness(1.08); } .riven-cbtn-phone { background: #3a46c9; padding: 18px 24px; font-size: 18px; } .riven-cbtn-viber { background: #7360f2; } .riven-cbtn-tg { background: #28a8e9; } /* The reveal trigger only exists as an affordance for the popup, so it is shown * exclusively under .js-enabled. With JS off it stays out of the layout and the *