/* ========================================================= KAPCORE — stylesheet This file intentionally does NOT define a design system, a type scale, a spacing scale, or any layout grid of its own. The page is a literal 1:1 transcription of the Figma frame "Desktop / Hero v0.1" (node 1836:15665, 1440x3563) — every element's position/size/color/typography is set inline on the element itself in index.html, copied directly from the Figma-exported values. This file only holds: 1) self-hosted @font-face rules, 2) a base reset, 3) the few genuinely interactive states (hover/focus, mobile nav open/close, FAQ accordion, testimonial slide swap, language switch) needed for main.js. ========================================================= */ @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/unbounded-latin-400.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/unbounded-latin-ext-400.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/unbounded-cyrillic-400.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/unbounded-latin-500.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/unbounded-latin-ext-500.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/unbounded-cyrillic-500.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/unbounded-latin-600.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/unbounded-latin-ext-600.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/unbounded-cyrillic-600.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/unbounded-latin-700.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/unbounded-latin-ext-700.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Caveat was already shipped in /assets/fonts (used nowhere until now) - the hero's "social proof" annotation was a baked-text PNG (img71.png) instead of live type, which is why its copy couldn't be edited. Wiring up the already-present font lets that annotation become real, editable text. */ @font-face{ font-family:'Caveat'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/caveat-latin-600.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Caveat'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/caveat-latin-ext-600.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Caveat'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/caveat-cyrillic-600.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Unbounded'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/unbounded-cyrillic-700.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/manrope-latin-400.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/manrope-latin-ext-400.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/manrope-cyrillic-400.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/manrope-latin-500.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/manrope-latin-ext-500.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/manrope-cyrillic-500.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/manrope-latin-600.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/manrope-latin-ext-600.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/manrope-cyrillic-600.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/manrope-latin-700.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/manrope-latin-ext-700.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/manrope-cyrillic-700.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/manrope-latin-800.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/manrope-latin-ext-800.woff2') format('woff2'); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/manrope-cyrillic-800.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{ margin:0; } ul,ol{ list-style:none; padding:0; margin:0; } img{ display:block; } a{ color:inherit; text-decoration:none; } button,input,textarea,select{ font:inherit; color:inherit; } button{ cursor:pointer; background:none; border:none; padding:0; } :focus-visible{ outline:2px solid #f00b0f; outline-offset:2px; } a,button{ cursor:pointer; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } body{ font-family:'Manrope', sans-serif; background:#fff; -webkit-font-smoothing:antialiased; } /* The Figma frame itself: fixed 1440x3563 canvas, everything inside is positioned absolutely with the frame's own coordinates. Centered on wider viewports; see the bottom of this file for the (non-Figma, functionally necessary) small-viewport fallback. */ .figma-canvas{ position:relative; width:1440px; height:3563px; margin:0; background:#fff; overflow:hidden; } .abs{ position:absolute; } /* Many decorative text/image blocks are wider than their visible content (Figma text boxes are often set to a generous fixed width the actual line never fills). In a real DOM that invisible remainder still hit-tests and was intercepting clicks on interactive elements sitting underneath it (e.g. the final-CTA headline sat over the whole audit form). Decorative .abs blocks don't need to receive pointer events at all; only real interactive elements do, so those get it back explicitly. */ .figma-canvas .abs{ pointer-events:none; } .figma-canvas a, .figma-canvas button, .figma-canvas input, .figma-canvas select, .figma-canvas textarea, .figma-canvas summary{ pointer-events:auto !important; } /* ---------- Hero stat cards (дохід / вартість ліда / ROAS): rounded, semi-transparent glass panels over the hero art, per Figma. ---------- */ .stat-card-glass{ border-radius:18px; background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border:1px solid rgba(255,255,255,.6); box-shadow:inset 0 4px 8.4px rgba(0,0,0,.06), 0 12px 28px -10px rgba(0,0,0,.14); } /* ---------- Scroll-reveal animations ---------- `[data-reveal]` marks a piece of content that animates in once, the first time it scrolls into view (JS in main.js adds `.is-in` via IntersectionObserver, then stops watching it - it never re-hides on scroll back up, this is a one-time entrance, not a repeating effect). Several distinct motions (up/down/left/right/zoom/pop) are used across the page on purpose instead of one fade everywhere, so different sections feel like their own moment rather than a repeated tic. Progressive enhancement: the hidden (opacity:0) state only applies once `main.js` has confirmed it's running (it adds `.js-reveal-ready` to immediately) and scopes every rule under that class - with JS disabled or failing, nothing here ever hides, content is visible from first paint. */ .js-reveal-ready [data-reveal]{ opacity:0; transition-property:opacity, transform; transition-timing-function:cubic-bezier(.16,.84,.32,1); transition-duration:.85s; transition-delay:var(--reveal-delay, 0ms); } .js-reveal-ready [data-reveal="up"]{ transform:translateY(34px); } .js-reveal-ready [data-reveal="down"]{ transform:translateY(-26px); } .js-reveal-ready [data-reveal="left"]{ transform:translateX(-46px); } .js-reveal-ready [data-reveal="right"]{ transform:translateX(46px); } .js-reveal-ready [data-reveal="zoom"]{ transform:scale(.92); } .js-reveal-ready [data-reveal="pop"]{ transform:scale(.8) translateY(16px); transition-duration:.6s; transition-timing-function:cubic-bezier(.34,1.56,.64,1); } /* "snap" = a sharp, abrupt scale-up from a point, no sliding/travel and barely any overshoot - short and punchy, unlike "pop"'s softer bouncy spring. Used for the trust-bar logos so each one snaps up on the spot instead of the whole row sliding in as one block. */ .js-reveal-ready [data-reveal="snap"]{ transform:scale(.35); transition-duration:.22s; transition-timing-function:cubic-bezier(.18,.86,.32,1.24); } .js-reveal-ready [data-reveal="fade"]{ transform:none; } .js-reveal-ready [data-reveal].is-in{ opacity:1; transform:none; } /* "type" = the headline: JS (main.js) splits its text into one per character and reveals them in sequence like a typewriter/printer, instead of the whole block sliding in as one piece. The container itself skips the generic hide/slide (it's visible immediately - only its individual characters start hidden); this rule shares specificity with the generic `[data-reveal]` one above and must stay after it in the file to win the tie. */ .js-reveal-ready [data-reveal="type"]{ opacity:1; transform:none; transition:none; } .js-reveal-ready [data-reveal="type"] .type-char{ opacity:0; } .js-reveal-ready [data-reveal="type"] .type-char.is-in{ opacity:1; } .type-cursor{ display:inline-block; width:.09em; height:.85em; background:currentColor; margin-left:.05em; vertical-align:-0.08em; animation:type-cursor-blink .8s steps(1) infinite; } @keyframes type-cursor-blink{ 50%{ opacity:0; } } /* "glitch" = the hero portrait: a quick, jerky burst of clip-path slice jumps, small position jitter and color-channel shifts before settling, instead of a plain fade/slide. `steps(1,end)` on the overall animation makes it jump between keyframe states rather than smoothly tween between them, which is what makes it read as a glitch instead of a morph. */ .js-reveal-ready [data-reveal="glitch"]{ opacity:0; } .js-reveal-ready [data-reveal="glitch"].is-in{ animation:hero-glitch-in .9s steps(1,end) both; } @keyframes hero-glitch-in{ 0% { opacity:0; clip-path:inset(0 0 100% 0); transform:translate(0,0); filter:none; } 8% { opacity:1; clip-path:inset(12% 0 55% 0); transform:translate(-10px,0); filter:hue-rotate(90deg) saturate(3); } 16% { opacity:.85; clip-path:inset(38% 0 18% 0); transform:translate(8px,2px); filter:hue-rotate(-70deg) saturate(2.4); } 24% { opacity:1; clip-path:inset(0 0 65% 0); transform:translate(-6px,0); filter:none; } 33% { opacity:.9; clip-path:inset(58% 0 4% 0); transform:translate(7px,-2px); filter:hue-rotate(50deg); } 42% { opacity:1; clip-path:inset(0); transform:translate(-3px,0); filter:contrast(1.5); } 50% { transform:translate(4px,0); filter:none; } 60% { opacity:.88; clip-path:inset(22% 0 0 0); transform:translate(-8px,1px); filter:hue-rotate(-90deg) saturate(2.5); } 70% { opacity:1; clip-path:inset(0); transform:translate(3px,0); filter:none; } 100% { opacity:1; clip-path:inset(0); transform:translate(0,0); filter:none; } } /* ---------- Header nav interactions (behavior only, not visual) ---------- */ .lang-switch{ position:relative; } .lang-menu{ position:absolute; top:calc(100% + 6px); left:0; background:#fff; border:1px solid rgba(6,6,8,.12); border-radius:8px; min-width:120px; padding:4px; box-shadow:0 12px 28px -10px rgba(0,0,0,.25); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:50; } .lang-switch.open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); } .lang-menu a{ display:block; padding:8px 10px; border-radius:6px; font-size:11px; color:#060608; } .lang-menu a:hover{ background:#f4f3f1; } .lang-menu a[aria-current="true"]{ color:#f00b0f; } .nav-toggle{ display:none; } /* ---------- Testimonial slide swap, with a crossfade + gentle rise ---------- Slides stay in the DOM together (no display:none/block swap - that can't be transitioned) and only their content blocks fade+lift via opacity/ transform. Nothing here touches `.testimonial-slide` itself: several of its direct children are the actual position:absolute elements carrying the real canvas coordinates (left:630px etc.), and giving the wrapper a `transform` would turn it into a new positioning context and silently shift all of them - so only those already-absolute children animate. */ .testimonial-track{ position:relative; } .testimonial-slide{ z-index:1; } .testimonial-slide.is-active{ z-index:2; } .testimonial-slide > .abs{ opacity:0; transform:translateY(16px); transition:opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1); } .testimonial-slide.is-active > .abs{ opacity:1; transform:translateY(0); transition-delay:.08s; } /* Invisible hit-targets over the arrows already drawn into the background image - no visual treatment of their own, just a focus ring and a subtle hover cue so it reads as clickable. */ .testimonial-prev, .testimonial-next{ background:transparent; } .testimonial-prev:hover, .testimonial-next:hover{ background:rgba(255,255,255,.12); } /* ---------- Offer cards (Що ви отримаєте): glow-on-hover ---------- `.offer-hover-zone` is a transparent, real hit-target (pointer-events re-enabled, unlike the blanket-none `.abs` rule above) sized to match its card. It has no visual of its own - hovering it just reveals its adjacent-sibling `.offer-glow` via CSS, so the glow only shows on hover instead of being permanently on. */ .offer-card{ background:#fbfbfb; box-shadow:0 4px 10px rgba(0,0,0,.05); } .offer-icon{ pointer-events:none; } /* Bullet list: a real flex column instead of each bullet+line pinned to a hardcoded top offset sized for exactly one line. Previously several cards' text width (up to 341px) was wider than the 295px card itself, so lines ran off the card edge; now width is clamped to fit the card and a line that wraps just pushes the next bullet down via the column gap instead of overlapping it. */ .offer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; } .offer-list li{ display:flex; align-items:flex-start; gap:9px; font-family:'Manrope',sans-serif; font-size:11px; line-height:1.4; color:#060608; } .offer-list li img{ flex:none; width:5px; height:5px; margin-top:7px; } /* Specificity fix: the blanket `.figma-canvas .abs{ pointer-events:none; }` rule above is two classes (specificity 0,2,0), which was silently beating the single-class `.offer-hover-zone{ pointer-events:auto; }` (0,1,0) regardless of source order - the zone never actually received mouse hover, so the neon reveal only ever worked when forced on for a screenshot check, never from a real hover. Matching `.abs` explicitly here makes this rule 0,3,0 so it wins for real. */ .figma-canvas .abs.offer-hover-zone{ pointer-events:auto; } /* Same bright red glow on all 4 cards (was: a hard blurred border outline on card 3 only, dim box-shadow on the other 3). A box-shadow with no spread of its own shape sits BEHIND the card like a soft round light source, not traced along the card's rectangular edge - closer to a shadow than an outline - and the color is fully opaque red at the core so it actually reads as neon instead of a faint tint. */ .offer-glow{ opacity:0; transition:opacity .4s ease; box-shadow: 0 0 12px 2px rgba(240,11,15,.9), 0 0 28px 7px rgba(240,11,15,.6), 0 0 50px 13px rgba(240,11,15,.32); } .offer-hover-zone:hover + .offer-glow{ opacity:1; } /* ---------- FAQ accordion (behavior only) ---------- */ .faq-item summary{ list-style:none; cursor:pointer; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item .faq-plus-icon{ transition:transform .2s ease, border-color .2s ease; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1px solid #61636b; } /* All 5 questions: text sits flush left with a fixed 10px inset from the card edge, and a fixed 30px gap to the "+" icon - instead of the old space-between/flex-end tricks that made icon spacing depend on how much slack a given question left in a shared fixed-width card (some ended up reading centered, some flush right). Each card's own width is sized to its own text (measured), so the frame follows the content instead of the content being squeezed to fit a preset frame. */ .faq-summary--left{ justify-content:flex-start !important; padding:0 10px !important; gap:30px !important; } .faq-summary--left .faq-question{ flex:none !important; white-space:nowrap; } .faq-item[open] .faq-plus-icon{ transform:rotate(45deg); } /* Audit form fields use native placeholders (not floating labels) since the Figma mock shows a single centered line of text, not a two-line label + input-space state. */ .figma-canvas input::placeholder, .figma-canvas textarea::placeholder{ color:#fff; opacity:1; } .figma-canvas select option{ color:#000; } /* ---------- Case cards (Кейси/результати - the 2 featured cases) ---------- The Figma card is not an axis-aligned rounded rectangle - it's a warped quadrilateral (irregular "stretched corner" shape: top-right and bottom-left corners are square, top-left and bottom-right are pulled inward) with rounded corners, exported from Figma as a shaped image. Reproduced here with a real `clip-path: path()` cut from the exact corner coordinates measured off the Figma export (not a 3D transform - the edges are straight, just non-parallel, so the whole card + its text/photo content is clipped to that path, matching the source shape pixel-for-pixel instead of approximating it). Each card's path is sized to its own on-page pixel box, so `--shape-a`/`--shape-b` are one-off, not a generic reusable shape. */ .case-card__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* Flat 15% darken over the whole photo, on top of the media and below the directional gradient scrim - the gradient alone left the right/top edge of each photo at full brightness, which is exactly where the stat row and parts of the description sat, so the text blended into the image there. This darkens the photo uniformly first, then the gradient adds its extra fade on top. */ /* pointer-events:none on both: they're purely decorative tint/gradient layers sitting visually on top of case-card__media - without this they'd silently intercept clicks meant for the photo underneath (e.g. the admin editor's click-to-adjust-opacity on the image). */ .case-card__dim{ position:absolute; inset:0; background:rgba(6,6,8,.15); pointer-events:none; } .case-card__scrim{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(100deg, rgba(6,6,8,.9) 0%, rgba(6,6,8,.74) 32%, rgba(6,6,8,.2) 58%, rgba(6,6,8,0) 76%), linear-gradient(0deg, rgba(6,6,8,.95) 0%, rgba(6,6,8,.8) 20%, rgba(6,6,8,0) 44%); } .case-card__tag{ position:absolute; display:inline-flex; padding:7px 16px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); font-family:'Manrope',sans-serif; font-size:11px; color:#fff; white-space:nowrap; } .case-card__headline{ position:absolute; margin:0; font-family:'Manrope',sans-serif; font-weight:700; font-size:20px; line-height:1.25; color:#fff; } .case-card__desc{ position:absolute; margin:0; font-family:'Manrope',sans-serif; font-size:11px; line-height:1.5; color:rgba(255,255,255,.68); } .case-card__stat{ position:absolute; } .case-card__stat b{ display:block; font-family:'Manrope',sans-serif; font-weight:800; font-size:14px; color:#f00b0f; white-space:nowrap; } .case-card__stat span{ display:block; margin-top:4px; font-family:'Manrope',sans-serif; font-weight:500; font-size:10px; color:rgba(255,255,255,.72); white-space:nowrap; } /* Shapes are `` defs near the top of index.html, so they auto-scale to whatever box they're applied to (fixed px on desktop, fluid % width on mobile) without a second path. */ .case-card--shape-a{ clip-path:url(#case-clip-a); } .case-card--shape-b{ clip-path:url(#case-clip-b); } /* ---------- Buttons: no new visual treatment, just usable affordance ---------- */ a[href],button{ transition:opacity .15s ease; } a[href]:hover,button:hover{ opacity:.88; } a[href]:active,button:active{ opacity:.96; } /* ---------- Hero headline, line 1 ("Системний"/"Systematic"/"Systemowy") ---------- The mini-admin's font-size control writes ONE shared value for this line because desktop and mobile both carry the same `data-text="hero-h1-l1"` (the CMS syncs an edit made on either one to both, by design, for every other text field on the page - see admin.js). That's fine for text that's the same size everywhere; it broke here specifically because the desktop canvas needs ~48-52px and the mobile build needs 14px, and there's no way to store two different values under one key. A past desktop-only edit (bumped to 52px, to keep it clear of the hero-bg graphic behind it) got silently replayed onto mobile too, where 52px is over 3x the mobile column's own design size and overran the hero art. Fixed in place instead of leaving it CMS-controlled: `!important` beats the override's plain inline style regardless of what value ever gets saved for this key again, so this one line is permanently pinned to its correct per-breakpoint size - the admin font control still works on every other piece of text on the page, just not this one. */ .figma-canvas p[data-text="hero-h1-l1"]{ font-size:52px !important; } /* ========================================================= Small-viewport fallback (NOT part of the Figma design — the frame only defines a 1440px desktop layout). Below 1440px we scale the whole canvas down uniformly with the browser's own zoom-equivalent transform, so relative layout stays exactly as designed instead of trying to invent a different mobile composition. A container matching the scaled height keeps normal page scroll working. ========================================================= */ .figma-scale-wrap{ width:100%; overflow:hidden; margin:0 auto; } /* ============================================================ MOBILE LAYOUT (<=768px) — a real, independent responsive build of the page, not the desktop canvas scaled down. Above 768px `.mobile-page` stays display:none and the Figma-exact desktop canvas (`.figma-scale-wrap`) renders as before; below it, the desktop canvas is hidden and this renders instead. Content and copy mirror the desktop sections; layout, spacing and type scale are built fresh for a phone screen instead of shrinking 1440px positions down. ============================================================ */ .mobile-page{ display:none; } @media (max-width:768px){ .figma-scale-wrap{ display:none; } .mobile-page{ display:block; background:#fff; color:#060608; overflow-x:hidden; -webkit-font-smoothing:antialiased; } .mobile-page *{ box-sizing:border-box; } .mobile-page img{ display:block; max-width:100%; } .mobile-page a{ color:inherit; text-decoration:none; } .mobile-page h1,.mobile-page h2,.mobile-page h3,.mobile-page p{ margin:0; } .mobile-page ul{ list-style:none; margin:0; padding:0; } /* Spacing scale used throughout the mobile build: 8/12/16/20/24/32/40/56. Section rhythm is a consistent 56px top+bottom; gutters are a consistent 20px; internal element gaps step through the smaller values instead of one-off numbers per section. */ .mobile-page{ --m-space-section:56px; --m-gutter:20px; } .m-section{ padding:var(--m-space-section) var(--m-gutter); } /* Two `.m-section`s back to back (cases->offer, offer->process, process->faq...) each contribute their own top+bottom 56px, so the visible gap between them was a double dose (112px+) with nothing - no color change, no divider - to justify it being twice the normal section rhythm. Dropping the second section's own top padding at that boundary leaves exactly one section's worth of breathing room (the first section's bottom padding), matching the single "standard" gap used everywhere else. */ .m-section + .m-section{ padding-top:0; } .m-eyebrow{ display:block; width:26px; height:3px; background:#f00b0f; border-radius:2px; margin-bottom:16px; } /* `.mobile-page` prefix bumps specificity above the `.mobile-page h2{ margin:0 }` reset above - a bare `.m-h2{...}` rule loses that fight on specificity alone (class+element beats a single class) regardless of source order, which silently zeroed the bottom margin under every section heading on mobile (testimonial, cases, offer, process, FAQ, final CTA - everywhere this class is used). */ .mobile-page .m-h2{ font-family:'Unbounded',sans-serif; font-weight:600; font-size:24px; line-height:1.25; color:#060608; margin-bottom:24px; } .m-h2 .accent{ color:#f00b0f; } /* Buttons reuse the exact same button-face artwork as desktop (a subtly tapered, sheared pill with a soft drop shadow - not a plain rounded rectangle) stretched to full width, instead of a flat CSS rectangle that lost the brand's actual button shape. */ /* border-radius matters even though the visible pill comes from the background-image, not the box: box-shadow always traces the element's own box (rect, or rounded-rect with border-radius) - never the shape painted inside it. Without this the glow rendered as a plain square frame around a round button. 999px always caps at a full stadium regardless of which height variant uses it. */ /* padding-bottom re-centers the label against the artwork's own visible pill (drawn off-center in its canvas, see the height:52px variant's own note below) at the base 60px height too - without it, every non-hero .m-btn (Усі кейси, the CTA form's submit button...) read as slightly bottom-heavy since only the hero's 52px variant carried this compensation. */ .m-btn{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; font-family:'Unbounded',sans-serif; font-weight:500; font-size:13px; width:100%; height:60px; padding-bottom:7px; border-radius:999px; background-repeat:no-repeat; background-size:100% 100%; background-position:center; } /* No box-shadow on any of the 3 variants: the SVG's own drop-shadow filter bleeds past its nominal box, which a CSS background-image clips at the element edge - a plain box-shadow was meant to stand in for that lost bleed, but it only ever showed up in the artwork's own ~3% transparent edge margin as a soft colored (red) or grey halo/fuzz around the button rather than a shadow anchored to its visible pill shape - read as an unwanted "neon" glow, not a shadow. */ .m-btn--red{ background-image:url('/assets/figma/buttonFaceRed.svg'); color:#fff; box-shadow:none; } .m-btn--outline{ background-image:url('/assets/figma/buttonFaceWhite.svg'); color:#060608; box-shadow:none; } .m-btn--dark{ background-image:url('/assets/figma/buttonFaceRed2.svg'); color:#fff; border:none; box-shadow:none; } /* ---------- Header + burger nav ---------- */ .m-header{ position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #eee; } .m-logo-link img{ height:22px; width:auto; } .m-burger{ width:42px; height:42px; border-radius:10px; border:1px solid #e6e5e2; display:flex; align-items:center; justify-content:center; background:#fff; flex:none; } .m-burger-bars{ width:18px; height:13px; position:relative; } .m-burger-bars span{ position:absolute; left:0; width:100%; height:2px; background:#060608; border-radius:2px; transition:transform .25s ease, opacity .2s ease, top .25s ease; } .m-burger-bars span:nth-child(1){ top:0; } .m-burger-bars span:nth-child(2){ top:5.5px; } .m-burger-bars span:nth-child(3){ top:11px; } .m-burger.is-active .m-burger-bars span:nth-child(1){ top:5.5px; transform:rotate(45deg); } .m-burger.is-active .m-burger-bars span:nth-child(2){ opacity:0; } .m-burger.is-active .m-burger-bars span:nth-child(3){ top:5.5px; transform:rotate(-45deg); } .m-nav-scrim{ position:fixed; inset:0; background:rgba(6,6,8,.55); z-index:199; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; } .m-nav-scrim.is-open{ opacity:1; visibility:visible; } .m-nav-panel{ position:fixed; top:0; right:0; bottom:0; width:82%; max-width:340px; background:#0c0c0d; color:#fff; z-index:200; transform:translateX(100%); transition:transform .35s cubic-bezier(.16,.84,.32,1); padding:22px 24px 32px; display:flex; flex-direction:column; overflow-y:auto; } .m-nav-panel.is-open{ transform:translateX(0); } .m-nav-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; } .m-nav-close{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:none; color:#fff; font-size:16px; line-height:1; flex:none; } .m-nav-links{ display:flex; flex-direction:column; } .m-nav-links a{ padding:15px 2px; font-family:'Manrope',sans-serif; font-size:15px; color:#fff; border-bottom:1px solid rgba(255,255,255,.1); } .m-nav-lang{ display:flex; gap:10px; margin:24px 0; } .m-nav-lang a{ font-family:'Manrope',sans-serif; font-size:11px; color:rgba(255,255,255,.65); padding:6px 12px; border:1px solid rgba(255,255,255,.2); border-radius:8px; } .m-nav-lang a[aria-current="true"]{ color:#fff; border-color:#f00b0f; background:rgba(240,11,15,.15); } .m-nav-panel .m-btn{ margin-top:auto; } /* ---------- Hero ---------- White ground, matching the desktop hero exactly: same heroBg1.png background asset (same left/width crop trick, just resized), the portrait shifted further right so the copy column never sits on top of it, and CTAs moved to the end - after the stat cards and the proof line - per explicit order. */ .m-hero{ position:relative; background:#fff; overflow:hidden; padding-bottom:8px; } .m-header{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:none; border:none; backdrop-filter:none; } /* Same box, same crop, just translated further right (more of its right edge falls off-screen) so the neon circuit line inside it clears the headline text - width/height untouched, this is a pure shift, not a resize. */ .m-hero-bg{ position:absolute; z-index:0; top:0; right:-130px; width:92%; height:300px; overflow:hidden; } .m-hero-bg img{ position:absolute; left:-44.05%; top:0; width:144.05%; height:100%; max-width:none; display:block; } .m-hero-figure-wrap{ position:absolute; z-index:1; right:calc(-4% - 50px); top:52px; width:74%; aspect-ratio:1083/1260; pointer-events:none; } .m-hero-figure{ width:100%; height:100%; object-fit:cover; object-position:68% 40%; display:block; } .m-hero-copy{ position:relative; z-index:2; padding:8px 20px 0; } /* Sized down from 16px: at the old size the top line could reach far enough right to sit over the dark portrait/background art, where its near-black color reads as invisible instead of just low-contrast. */ .m-hero h1{ font-family:'Unbounded',sans-serif; font-weight:600; font-size:14px; line-height:1.3; color:#060608; margin-bottom:12px; max-width:52%; } .m-hero h1 .accent{ color:#f00b0f; } /* Permanently pinned against the shared CMS font-size key - see the `.figma-canvas p[data-text="hero-h1-l1"]` comment above for why this line specifically can't be left to the admin override. */ .m-hero p[data-text="hero-h1-l1"]{ font-size:14px !important; } .m-hero p.m-desc{ font-family:'Manrope',sans-serif; font-size:11px; line-height:1.5; color:#5b5d66; max-width:58%; } .m-hero-stats{ position:relative; z-index:2; display:flex; gap:10px; padding:26px 20px 0; margin-top:10px; } .m-stat-card{ position:relative; overflow:hidden; flex:1; min-width:0; background:#fbfbfa; border:1px solid #eeece8; border-radius:14px; padding:12px 10px 10px; box-shadow:0 4px 12px rgba(0,0,0,.04); } /* Number/label need to sit in their own stacking context (position: relative) so they paint above the absolutely-positioned spark image below, regardless of DOM order. */ .m-stat-card b{ position:relative; z-index:1; display:block; font-family:'Unbounded',sans-serif; font-size:14px; color:#f00b0f; } .m-stat-card span{ position:relative; z-index:1; display:block; font-family:'Manrope',sans-serif; font-size:9px; line-height:1.3; color:#61636b; margin:3px 0 8px; } /* Matches desktop: the same artwork used as a big, faded background element behind the number/label (was a small, fully-opaque illustration sitting below the text instead - a different treatment from desktop's own hero stat cards for no reason). */ .m-stat-spark{ position:absolute; z-index:0; left:50%; bottom:-6%; width:145%; max-width:none; height:auto; transform:translateX(-50%); opacity:.14; object-fit:contain; pointer-events:none; } /* Back to the original side-by-side row (stacking icon-above-text read badly) - moved down instead, past the hero portrait image's own bottom edge (a plain rectangle the same width all the way down, so no amount of "a little lower" clears it short of fully passing it), so the row sits below the image on plain white ground instead of ever crossing it. */ /* padding-top was a flat 148px, measured to land exactly 10px below the portrait image's bottom edge - but only at the one viewport width it was measured at. The image's own height comes from `aspect-ratio` on a width:74% box, so it scales with viewport width while this row's own position above it (header + copy + stat cards) stays fixed px - a flat px gap only ever matched at that one width and opened into a much bigger gap on narrower real phones. padding-top/bottom percentages resolve against the containing block's WIDTH (not height - the one CSS case where a % here tracks a horizontal measurement), so `86.09%` scales the image's own 74% x 1260/1083 height exactly in step with it at any width; `-272px` is the fixed offset (stat row height minus the 10px target gap) measured once and subtracted back out. */ .m-hero-proof{ position:relative; z-index:2; display:flex; align-items:center; width:100%; gap:12px; padding:calc(86.09% - 272px) 20px 0; } .m-hero-proof .avatars{ display:flex; } .m-hero-proof .avatars img{ width:34px; height:34px; border-radius:50%; border:2px solid #fff; margin-left:-10px; object-fit:cover; } .m-hero-proof .avatars img:first-child{ margin-left:0; } .m-hero-proof p{ font-family:'Manrope',sans-serif; font-size:11px; color:#5b5d66; line-height:1.4; } .m-hero-proof p b{ color:#f00b0f; font-weight:800; } /* Full-width again, but lighter than the default desktop button: no red glow shadow, smaller/regular-weight label instead of the bold 14px/500 used elsewhere. */ .m-hero-ctas{ position:relative; z-index:2; display:flex; flex-direction:column; gap:12px; padding:20px 20px 0; } /* padding-bottom without matching padding-top re-centers the label: the button-face artwork's own pill shape sits inside a taller canvas (drawn from y=4 to y=60 of a 72-tall viewBox, i.e. its visual centre is at 44% of the box, not 50%), so centering text at a flat 50% via align-items alone always reads slightly low. */ .m-hero-ctas .m-btn{ width:100%; height:52px; padding-bottom:6px; font-size:11px; font-weight:400; box-shadow:none; } /* ---------- Trust bar ---------- Same panel artwork as desktop (rectangle2.svg), and the same layout: text block + divider + logos side by side on one vertical center (not text-on-top, logos-below) - flush to the left edge of the screen (only a hairline gap on the right), sitting right under the hero CTAs with almost no gap, then only a thin white margin before the next (dark) section, so the black panel's own ragged bottom edge reads as the transition instead of a flat rule. Logos run as an infinite marquee (track duplicated once, animated -50%) since 6 logos can't fit statically in the space to the right of the text. */ .m-trust{ background:#fff; padding:0 0 10px; } /* Background artwork/box untouched (same min-height, same stretch) - only the content's vertical position moves: the shape's actual left edge runs from ~23% to ~93% of the box (not 0-100%), so centering against the full box read as sitting too high against that real left wall. Asymmetric top/bottom padding re-centers against the wall instead of the box. */ .m-trust-panel{ position:relative; margin-right:3px; background-image:url('/assets/figma/rectangle2.svg'); background-size:100% 100%; background-repeat:no-repeat; display:flex; align-items:center; gap:18px; padding:42px 20px 24px; min-height:118px; } .m-trust-text{ flex:none; } .m-trust-text p{ font-family:'Manrope',sans-serif; font-weight:600; font-size:11px; line-height:1.3; color:#fff; margin:0; white-space:nowrap; } .m-trust-text p:last-child{ text-transform:uppercase; } .m-trust-divider{ flex:none; width:1px; align-self:stretch; background:rgba(255,255,255,.3); } .m-trust-marquee{ flex:1; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 85%, transparent); mask-image:linear-gradient(90deg, #000 0%, #000 85%, transparent); } .m-trust-track{ display:flex; align-items:center; gap:34px; width:max-content; animation:mTrustScroll 16s linear infinite; } .m-trust-track img{ height:24px; width:auto; max-width:100px; object-fit:contain; filter:brightness(0) invert(1); opacity:.9; flex:none; } @keyframes mTrustScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* ---------- Testimonial ---------- */ /* Top edge notched to echo the trust panel's own ragged bottom (raised at the corners, dipping down in the middle) instead of meeting it with a flat rule - the two read as one continuous cut with the thin white gap between them, rather than a panel butting into a rectangle. */ .m-testimonial{ background:#0c0c0d; color:#fff; padding:48px 20px; clip-path:polygon(0 8px, 44% 0, 56% 24px, 100% 4px, 100% 100%, 0 100%); } .m-testimonial .m-h2{ color:#fff; } .m-testimonial .m-sub{ font-family:'Manrope',sans-serif; font-size:12px; color:rgba(255,255,255,.65); line-height:1.5; margin-bottom:28px; } .m-testimonial .m-sub mark{ background:#f00b0f; color:#fff; padding:0 4px; } /* `.m-quote-track` holds 3 slides mirroring the desktop carousel's 3 testimonials (was: only the first one, statically, with no way to see the other 2 on mobile at all) - plain display:none/block swap instead of the desktop crossfade since these are real block cards, not `.abs`-positioned layers over a shared background. */ .m-quote-card{ display:none; background:#f00b0f; border-radius:20px; padding:26px 22px; } .m-quote-card.is-active{ display:block; } .m-quote-card q{ display:block; quotes:none; font-family:'Unbounded',sans-serif; font-weight:600; font-size:17px; line-height:1.35; margin-bottom:14px; } .m-quote-card p.body{ font-family:'Manrope',sans-serif; font-size:12px; line-height:1.55; color:rgba(255,255,255,.9); margin-bottom:18px; } /* Prev/next used to sit in their own full-width row below the card, which added a whole extra row of black section background just to hold two small circles. Docked to the right of the author line instead (each of the 3 slides carries its own pair, but only the active slide's is ever visible) - the row's own height already exists for the avatar, nothing new is added below the card. */ .m-quote-author{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .m-quote-who{ display:flex; align-items:center; gap:10px; min-width:0; } .m-quote-who img{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none; } .m-quote-who b{ display:block; font-family:'Manrope',sans-serif; font-size:11px; font-weight:700; } .m-quote-who span{ font-family:'Manrope',sans-serif; font-size:9px; color:rgba(255,255,255,.75); } .m-quote-nav{ display:flex; gap:8px; flex:none; } .m-quote-arrow{ width:30px; height:30px; border-radius:50%; flex:none; border:1px solid rgba(255,255,255,.4); background:none; color:#fff; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; } /* ---------- Cases ---------- */ .m-cases{ background:#fff; } /* `.case-card` (shared with desktop, see base stylesheet) supplies the photo + scrim + clip-path warped-quad shape; aspect-ratio matches each card's own Figma box (475x324 / 479x390) exactly so the shared objectBoundingBox clip-path (and the % positions below, which mirror the same relative offsets used on desktop) land in the same spot. */ .m-case-card{ position:relative; margin-bottom:16px; box-shadow:0 8px 24px rgba(0,0,0,.08); } .m-case-card.case-card--shape-a{ aspect-ratio:475/324; } .m-case-card.case-card--shape-b{ aspect-ratio:479/390; } .m-case-card .case-card__tag{ font-size:10px; padding:6px 14px; } .m-case-card .case-card__headline{ font-size:16px; max-width:60%; } /* Narrower than the headline above it (50% vs 60%): the description is lower-contrast (68% white) body text, and at 60% its right edge ran into the brighter part of card-a's photo where it lost contrast and read as blended into the image instead of legible text over it. */ .m-case-card .case-card__desc{ font-size:9.5px; max-width:50%; } .m-case-card.case-card--shape-b .case-card__headline{ max-width:82%; } /* Card 2's desc kept the headline's wide 82% above - same "runs into the photo" problem as card 1's original 60%, just worse since 82% is wider still. Narrower than card 1's own 50% too: card 2's box is taller but no wider, so the same 50% would wrap to more lines and eat into the vertical room the rebalanced tag/headline/stat gaps just made. */ .m-case-card.case-card--shape-b .case-card__desc{ max-width:55%; } .m-case-card .case-card__stat b{ font-size:13px; } .m-case-card .case-card__stat span{ font-size:8.5px; } .m-niches{ margin-top:28px; display:flex; flex-direction:column; gap:18px; } .m-niche-row{ display:flex; align-items:flex-start; gap:14px; } .m-niche-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:#f00b0f; margin-top:8px; } .m-niche-row h4{ font-family:'Manrope',sans-serif; font-weight:800; font-size:12px; margin-bottom:4px; } .m-niche-row p{ font-family:'Manrope',sans-serif; font-size:11px; color:#61636b; } .m-cases .m-btn{ margin-top:24px; } /* ---------- Offer ---------- */ /* #fbfbfb on the section's own #fff background plus a 5%-opacity shadow was nearly invisible - on a phone screen (vs. the desktop canvas's larger scale and different surrounding contrast) these read as flat, borderless text blocks instead of cards. A visible border (matching .m-stat-card's own #eeece8) plus a stronger shadow gives them a real edge. */ .m-offer-card{ background:#fbfbfb; border:1px solid #eeece8; border-radius:20px; padding:22px; margin-bottom:16px; box-shadow:0 4px 12px rgba(0,0,0,.08); } .m-offer-card .icon{ width:44px; height:44px; margin-bottom:14px; } .m-offer-card h3{ font-family:'Manrope',sans-serif; font-weight:800; font-size:14px; margin-bottom:12px; } .m-offer-card ul{ display:flex; flex-direction:column; gap:9px; } .m-offer-card li{ display:flex; align-items:flex-start; gap:9px; font-family:'Manrope',sans-serif; font-size:11.5px; color:#060608; line-height:1.4; } .m-offer-card li::before{ content:''; width:5px; height:5px; border-radius:50%; background:#f00b0f; margin-top:7px; flex:none; } /* All 4 cards get the same fixed-height visual slot regardless of their source asset's own aspect ratio (one is a wide bar+trend chart, one's a donut+cards graphic, one's an inline SVG, one's a device mockup) - previously each just rendered at its own native ratio at full card width, so some cards ended up visibly taller than others depending on which image happened to be wider. */ .m-offer-card .diagram-wrap{ height:104px; margin-top:16px; display:flex; align-items:center; justify-content:flex-start; } .m-offer-card .diagram-wrap img, .m-offer-card .diagram-wrap svg{ max-height:100%; max-width:100%; width:auto; height:auto; } .m-offer-card .diagram-wrap.center{ justify-content:center; } /* ---------- Process ---------- */ .m-process-step{ display:flex; gap:16px; position:relative; padding-bottom:8px; } .m-process-step:last-child{ padding-bottom:0; } /* Same neon red line used to connect the icons on desktop (processConnector.svg: #ED080B, 2px stroke, 2px gaussian blur), just rotated to a vertical connector between stacked mobile steps instead of a horizontal one between side-by-side desktop steps. */ .m-process-step::before{ content:''; position:absolute; left:23px; top:52px; bottom:-6px; width:2px; background:#f00b0f; filter:blur(1.5px); opacity:.85; } .m-process-step:last-child::before{ display:none; } .m-process-num{ flex:none; width:48px; height:48px; display:flex; align-items:center; justify-content:center; } .m-process-num img{ width:100%; height:100%; object-fit:contain; } .m-process-step h4{ font-family:'Manrope',sans-serif; font-weight:700; font-size:15px; margin-bottom:6px; } .m-process-step p{ font-family:'Manrope',sans-serif; font-size:12px; line-height:1.45; color:#61636b; } /* ---------- FAQ ---------- */ .m-faq-item{ border:1px solid #e4e3e0; border-radius:14px; margin-bottom:12px; overflow:hidden; } .m-faq-item summary{ list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:'Manrope',sans-serif; font-size:12.5px; color:#060608; } .m-faq-item summary::-webkit-details-marker{ display:none; } .m-faq-item .plus{ flex:none; width:28px; height:28px; border-radius:50%; border:1px solid #cfcecb; display:flex; align-items:center; justify-content:center; transition:transform .2s ease; } .m-faq-item[open] .plus{ transform:rotate(45deg); } .m-faq-item .m-faq-a{ padding:0 18px 16px; font-family:'Manrope',sans-serif; font-size:11.5px; line-height:1.55; color:#61636b; } /* ---------- Final CTA ---------- */ /* Overrides the generic `.m-section + .m-section{padding-top:0}` rule (same specificity, wins on source order): that rule assumes the two sections look alike enough that doubling their padding read as empty dead space - true for the white-on-white offer/process/faq run, but this section flips to a dark background, so its "Ексклюзивно/ Exclusive/Ekskluzywnie" eyebrow sat with zero clearance right at the white-to-dark seam instead of breathing room above it. */ .m-section.m-cta{ padding-top:var(--m-space-section); } .m-cta{ background:#0c0c0d; color:#fff; } .m-cta .eyebrow{ font-family:'Unbounded',sans-serif; font-weight:600; font-size:11px; color:#f00b0f; margin-bottom:10px; display:block; } .m-cta .m-h2{ color:#fff; } /* `.mobile-page` prefix needed for the same reason as `.mobile-page .m-h2` above: `.mobile-page ul{margin:0}` (class+element) otherwise beats this bare single-class rule regardless of source order, which was zeroing the gap between the last checklist line and the form right below it. */ .mobile-page .m-cta-checklist{ display:flex; flex-direction:column; gap:12px; margin:22px 0 28px; } .m-cta-checklist li{ display:flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif; font-size:12px; color:#fff; } .m-cta-checklist img{ width:17px; height:17px; flex:none; } .m-cta-form{ display:flex; flex-direction:column; gap:12px; } .m-cta-form input, .m-cta-form select, .m-cta-form textarea{ width:100%; background:rgba(255,255,255,.04); border:1px solid #3a3a3d; border-radius:10px; padding:14px; font-family:'Manrope',sans-serif; font-size:12px; color:#fff; } .m-cta-form textarea{ min-height:88px; resize:vertical; } .m-cta-form select{ -webkit-appearance:none; appearance:none; } .m-cta-form ::placeholder{ color:rgba(255,255,255,.5); } /* ---------- Footer ---------- */ .m-footer{ background:#0c0c0d; color:#fff; padding:40px 20px 28px; } .m-footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; } .m-footer-brand img.mark{ width:26px; height:26px; } .m-footer-brand img.word{ height:17px; width:auto; } .m-footer p.desc{ font-family:'Manrope',sans-serif; font-size:11.5px; color:#bfc2c9; line-height:1.5; margin-bottom:24px; } .m-footer-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px; } .m-footer-cols h5{ font-family:'Manrope',sans-serif; font-weight:600; font-size:11px; margin-bottom:12px; } .m-footer-cols a, .m-footer-cols li{ display:block; font-family:'Manrope',sans-serif; font-size:11px; color:#bfc2c9; padding:5px 0; } .m-footer-social{ display:flex; gap:12px; margin-bottom:24px; } .m-footer-social img{ height:34px; width:auto; } .m-footer-bottom{ display:flex; flex-direction:column; gap:8px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-family:'Manrope',sans-serif; font-size:10px; color:#8b8d94; } } /* ---------- Thank-you modal: shown in-page after the audit form submits via AJAX, instead of navigating to FormSubmit's own confirmation page. ---------- */ .thank-modal{ position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; } .thank-modal.is-open{ opacity:1; visibility:visible; } .thank-modal__backdrop{ position:absolute; inset:0; background:rgba(6,6,8,.72); backdrop-filter:blur(4px); } .thank-modal__card{ position:relative; width:100%; max-width:420px; background:#0c0c0d; border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:40px 32px 32px; text-align:center; color:#fff; box-shadow:0 24px 60px rgba(0,0,0,.5); transform:translateY(16px) scale(.97); transition:transform .25s ease; } .thank-modal.is-open .thank-modal__card{ transform:translateY(0) scale(1); } .thank-modal__close{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:none; background:rgba(255,255,255,.06); color:#fff; font-size:18px; line-height:1; cursor:pointer; } .thank-modal__icon{ margin:0 auto 18px; width:52px; height:52px; } .thank-modal__title{ font-family:'Unbounded',sans-serif; font-weight:600; font-size:19px; margin-bottom:10px; } .thank-modal__text{ font-family:'Manrope',sans-serif; font-size:13px; line-height:1.6; color:#bfc2c9; margin-bottom:26px; } .thank-modal__btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; background:#f00b0f; border:none; border-radius:12px; color:#fff; font-family:'Unbounded',sans-serif; font-weight:600; font-size:13px; padding:14px; cursor:pointer; box-shadow:0 8px 8px rgba(0,0,0,.22); } body.modal-open{ overflow:hidden; }