/* ============================================================ GabionX — reusable component classes. Every visual pattern that repeats across pages lives here so pages only carry structure + content, never inline styles. ============================================================ */ /* ================= hero shell ================= */ .gx-hero { position: relative; width: 100%; overflow: hidden; background: var(--dark); } .gx-hero--full { height: 100vh; min-height: 720px; } .gx-hero--tall { min-height: 64vh; display: flex; flex-direction: column; } .gx-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gx-hero__scrim { position: absolute; inset: 0; pointer-events: none; } .gx-hero__scrim--angled { background: linear-gradient(105deg, rgba(10, 15, 22, .95) 0%, rgba(10, 15, 22, .78) 42%, rgba(10, 15, 22, .42) 100%); } .gx-hero__head { position: relative; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 20px var(--section-pad-x); } @media (max-width: 768px) { .gx-hero__head { transition: padding .3s ease, background-color .3s ease; } .gx-hero__head.is-scrolled { padding-top: 10px; padding-bottom: 10px; } } .gx-hero__logo { height: 44px; width: auto; display: block; flex: none; transition: height var(--dur-fast) ease; } .gx-hero__logo-link { display: block; flex: none; } .gx-hero__nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; } .gx-hero__content--flow { position: relative; z-index: 2; padding: clamp(48px, 9vh, 110px) var(--section-pad-x) clamp(56px, 9vh, 100px); max-width: 1040px; } .gx-hero__lead--flow { margin: 28px 0 0; font: 400 18px/1.65 var(--font-sans); color: var(--white-85); max-width: 480px; } .gx-hero__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .gx-hero__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--green); } /* skip link: off-screen until keyboard focus, jumps past the nav to #gx-content ("content" is a favorite target of extension/ad-block cosmetic CSS — keep the id namespaced) */ .gx-skip-link { position: absolute; top: 14px; left: 14px; z-index: 1000; display: inline-flex; align-items: center; min-height: 44px; padding: 13px 22px; border-radius: var(--radius-full); /* white type needs the AA-safe green (plain --green is 3.3:1) */ background: var(--green-cta); color: var(--white); font: 600 13px/1 var(--font-sans); letter-spacing: .04em; text-decoration: none; transform: translateY(calc(-100% - 20px)); } .gx-skip-link:focus { transform: none; } /* ================= page shell ================= */ .gx-page { width: 100%; overflow-x: clip; /* not `hidden` — sticky children must pin to the viewport */ } /* mobile-only elements: the hide is media-scoped to desktop viewports, so the ≤768 page CSS gives each element its real display with no !important battle. .gx-page prefix (0-2-0) outranks any single-class display rule in later files. */ @media (min-width: 769px) { .gx-page .mobile-only { display: none; } } /* ================= page preloader (design: GabionX Preloader v2) ================= Shown once per tab session (js/preloader.js, sync in , sets .gxp-skip / .gxp-lock on ). Pure-CSS timeline: net fades in → logo revealed by a traveling light mask → one metallic sweep → overlay dissolves into the hero. Hidden entirely under prefers-reduced-motion. */ .gxp-lock { overflow: hidden; scrollbar-gutter: stable; } .gxp-skip .gxp { display: none; } /* subsequent same-tab loads (js/preloader.js): BACKGROUND only — no logo, no assembly animation. Dismissed on DOMContentLoaded with a quick fade, so it's just a brief branded backdrop instead of the full 3.8s intro (owner request) */ .gxp-static .gxp { animation: none; transition: opacity .22s ease; } .gxp-static .gxp__mesh { animation: none; opacity: .22; filter: none; } .gxp-static .gxp__logo-wrap { display: none; } .gxp-static-out .gxp { opacity: 0; } .gxp { position: fixed; inset: 0; z-index: var(--z-preloader); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #111111; animation: gxp-out .9s cubic-bezier(.55, 0, .28, 1) 2.85s both; } .gxp__light { position: absolute; inset: 0; background: radial-gradient(100% 65% at 50% 22%, rgba(255, 255, 255, .04) 0%, transparent 62%); } .gxp__mesh { position: absolute; inset: 0; background-image: url('../assets/works/gxw-cell.svg'); background-repeat: repeat; background-position: center center; background-size: 121px 121px; opacity: 0; animation: gxp-mesh-in 1.1s cubic-bezier(.45, 0, .2, 1) .2s both; } .gxp__logo-wrap { position: relative; animation: gxp-logo-out .7s cubic-bezier(.55, 0, .28, 1) 2.75s both; } .gxp__logo { display: block; width: min(62vw, 330px); height: auto; } /* the identity assembles letter by letter (G→A→B→I→O→N→X) starting while the mesh is still drawing (~70%), each glyph rising softly out of a subtle blur. 34 SVG user units ≈ 7px at the rendered logo size. */ .gxp__l { opacity: 0; transform: translateY(34px); filter: blur(6px); animation: gxp-letter .65s cubic-bezier(.16, .7, .3, 1) both; } .gxp__l:nth-of-type(1) { animation-delay: .95s; } .gxp__l:nth-of-type(2) { animation-delay: 1.03s; } .gxp__l:nth-of-type(3) { animation-delay: 1.11s; } .gxp__l:nth-of-type(4) { animation-delay: 1.19s; } .gxp__l:nth-of-type(5) { animation-delay: 1.27s; } .gxp__l:nth-of-type(6) { animation-delay: 1.35s; } .gxp__l:nth-of-type(7) { animation-delay: 1.43s; } .gxp__tag { opacity: 0; animation: gxp-tag .8s ease 1.7s both; } @keyframes gxp-letter { to { opacity: 1; transform: none; filter: blur(0); } } @keyframes gxp-tag { to { opacity: 1; } } @keyframes gxp-mesh-in { from { opacity: 0; filter: blur(4px); } to { opacity: .22; filter: blur(0); } } @keyframes gxp-logo-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.015); } } @keyframes gxp-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .gxp { display: none; } } /* inline form failure note (shown only when the Telegram relay reports a real error) */ .gx-form-error { margin: 10px 0 0; font: 400 13px/1.5 var(--font-sans); color: #b0483a; } /* honeypot: off-screen for humans (and screen readers), reachable for naive bots */ .gx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; } /* ================= layout primitives ================= */ .gx-section { padding: var(--section-pad-y) var(--section-pad-x); } .gx-section--sm { padding: var(--section-pad-y-sm) var(--section-pad-x); } .gx-section--dark { background: var(--dark); color: var(--cream); } .gx-section--bg { background: var(--bg); } .gx-section--tint { background: #E8E2D6; } .gx-narrow { max-width: 680px; } .gx-center { margin-left: auto; margin-right: auto; text-align: center; } .gx-head { margin: 0 auto var(--head-mb); } .gx-head--left { margin: 0 0 clamp(48px, 6vh, 72px); } .gx-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(28px, 4vw, 64px); } .gx-head-split__title { max-width: 620px; } /* ================= typography ================= */ .gx-eyebrow { display: block; font: 500 11px/1 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; /* default context is a light section — plain --green is 3.1:1 there */ color: var(--green-ink); margin-bottom: 26px; } /* on the dark/charcoal sections the brighter brand green is the legible one (5.4:1); --green-ink would sink into the background */ .gx-section--dark .gx-eyebrow { color: var(--green); } .gx-h1--serif { margin: 0; font: 300 clamp(40px, 6vw, 78px)/1.05 var(--font-serif); letter-spacing: -.015em; color: var(--white); } .gx-h1--display { margin: 0; font: 700 clamp(44px, 7vw, 94px)/.98 var(--font-sans); letter-spacing: -.035em; color: var(--white); } .gx-h2 { margin: 0 0 20px; font: 300 clamp(34px, 4.6vw, 58px)/1.06 var(--font-serif); letter-spacing: -.015em; color: var(--ink); } .gx-h2--onDark { color: var(--white); } .gx-h2--sm { font-size: clamp(32px, 4.4vw, 54px); } .gx-h2--flush { margin-bottom: 0; } .gx-lead { margin: 0; font: 400 16px/1.7 var(--font-sans); color: var(--ink-58); } .gx-lead--narrow { max-width: 440px; margin-left: auto; margin-right: auto; } .gx-lead--hero { margin: 30px 0 42px; font: 400 18px/1.65 var(--font-sans); color: var(--white-85); max-width: 470px; } .gx-body { margin: 0; font: 400 15px/1.65 var(--font-sans); color: var(--ink-58); } .gx-body--onDark { color: var(--cream-62); } .gx-italic { font-style: italic; } /* form success states appear via the [hidden] swap — ease them in instead of snapping */ @keyframes gx-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ================= buttons ================= */ .gx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 17px 30px; border-radius: var(--radius-full); font: 600 13px/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; position: relative; transition: background-color var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease, transform .45s var(--ease); } .gx-btn svg { transition: transform var(--dur-base) var(--ease); flex: none; } .gx-btn:hover svg { transform: translateX(4px); } .gx-btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 12px 32px -8px rgba(43, 162, 74, .55); opacity: 0; transition: opacity .45s ease; pointer-events: none; } .gx-btn:hover { transform: translateY(-2px); } .gx-btn:hover::before { opacity: 1; } .gx-btn:active { transform: translateY(0); transition-duration: .15s; } .gx-btn--primary { background: var(--green-cta); color: var(--white); } .gx-btn--primary:hover { background: var(--green-cta-hover); } .gx-btn--block { width: 100%; } .gx-btn--mt { margin-top: 26px; } .gx-btn--sm { padding: 11px 20px; font-size: 12.5px; letter-spacing: .03em; text-transform: none; } .gx-btn--phone { background: var(--white); color: var(--charcoal); gap: 9px; } .gx-btn--phone::before { display: none; } .gx-btn--phone:hover { transform: translateY(-1px); } .gx-btn--outline { background: rgba(12, 17, 24, .25); border: 1px solid var(--white-24); color: var(--white); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .gx-btn--outline::before { display: none; } .gx-btn--outline:hover { background: rgba(12, 17, 24, .4); } .gx-btn__label { display: inline; } /* underline-on-hover nav/footer links */ .gx-link { position: relative; font: 500 12px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--white-85); text-decoration: none; } .gx-link::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .gx-link:hover::after { transform: scaleX(1); } .gx-link--active { color: var(--green); } /* ---- nav submenu: «Головна ▾» → Галерея / Карта (desktop dropdown) ---- */ .gx-nav-item { position: relative; display: inline-flex; align-items: center; gap: 0; } .gx-nav-caret { display: inline-flex; align-items: center; justify-content: center; padding: 4px; /* the label's .18em letter-spacing leaves trailing space after «А»; pull the caret back so it hugs the word instead of floating away from it */ margin-left: -3px; border: none; background: none; /* the caret isn't a .gx-link, so it must set the nav's light colour itself — currentColor here would inherit dark --ink and vanish on the dark hero */ color: var(--white-85); cursor: pointer; opacity: .8; transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease, color var(--dur-fast) ease; } /* optical centre: nudge the down-chevron up a hair against the uppercase caps */ .gx-nav-caret svg { display: block; position: relative; top: -1px; } .gx-nav-caret:hover { opacity: 1; } /* match the active «Головна» (green) so the caret reads as part of it */ .gx-nav-item:has(.gx-link--active) .gx-nav-caret { color: var(--green); opacity: 1; } .gx-nav-item.is-open .gx-nav-caret { transform: rotate(180deg); opacity: 1; } .gx-submenu { position: absolute; top: calc(100% + 12px); left: -14px; min-width: 190px; display: flex; flex-direction: column; padding: 8px; border-radius: var(--radius-md); background: rgba(12, 17, 24, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--white-13); box-shadow: 0 24px 54px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); z-index: 60; } /* hover bridge — moving from the label down to the panel keeps :hover alive */ .gx-submenu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .gx-submenu__link { padding: 10px 12px; border-radius: var(--radius-xs); color: var(--cream); font: 500 14px/1 var(--font-sans); white-space: nowrap; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; } .gx-submenu__link:hover { background: rgba(255, 255, 255, .08); color: var(--white); } .gx-nav-item.is-open .gx-submenu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } @media (pointer: fine) { .gx-nav-item:hover .gx-submenu, .gx-nav-item:focus-within .gx-submenu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } } /* the link box is grown to a 44px touch target; the parent stack drops its gap so the visual rhythm only opens up by the difference, not by 44 + gap */ .gx-link--footer { display: inline-flex; align-items: center; min-height: 44px; font: 400 15px/1 var(--font-sans); letter-spacing: normal; text-transform: none; color: var(--white-74); width: fit-content; } /* the hover underline stays glued to the text, not to the taller hit box */ .gx-link--footer::after { top: calc(50% + 11px); bottom: auto; } .gx-link--footer:hover { color: var(--green); } .gx-contact-link { display: inline-flex; align-items: center; min-height: 44px; font: 400 15px/1.4 var(--font-sans); color: var(--white-74); text-decoration: none; width: fit-content; transition: color var(--dur-fast) ease; } .gx-contact-link:hover { color: var(--green); } /* ================= icon circle (social links, checkmarks) ================= */ .gx-icon-circle { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--white-24); display: flex; align-items: center; justify-content: center; transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease; } /* icon-only socials in one row (labels removed 2026-07; names live in aria-label). gap 0 + a 44px box around the 34px circle keeps the icons exactly 44px apart centre-to-centre — same optical rhythm as the old 34px + 10px gap */ .gx-col-stack.gx-social-row { flex-direction: row; gap: 0; } /* icons flush with the column's left edge: the 44px touch target centered the 34px circle, so the first icon sat ~5px in — left-align the circle instead */ .gx-social-row .gx-social { justify-content: flex-start; } .gx-social { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--white-74); text-decoration: none; width: fit-content; transition: color var(--dur-fast) ease; } .gx-social:hover { color: var(--white); } .gx-social:hover .gx-icon-circle { border-color: var(--green); color: var(--green); } .gx-check { display: flex; align-items: center; gap: 11px; font: 500 14px/1 var(--font-sans); letter-spacing: .02em; color: var(--ink); } .gx-check svg { flex: none; } .gx-check--lead { font: 400 15px/1.4 var(--font-sans); color: var(--white-85); gap: 11px; } /* ================= cards & panels ================= */ .gx-panel { border-radius: var(--radius-md); padding: clamp(28px, 3vw, 42px); } .gx-panel--light { background: var(--panel-light); border: 1px solid var(--ink-10); box-shadow: var(--shadow-sm); } .gx-panel--dark { background: var(--charcoal); color: var(--cream); box-shadow: var(--shadow-lg); border: 1px solid var(--white-13); } .gx-panel--sticky { position: sticky; top: 24px; } .gx-highlight-box { border-radius: var(--radius-xs); padding: 18px 20px; margin-bottom: 30px; background: var(--green-wash); border: 1px solid var(--green-border); } .gx-highlight-box__row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; } .gx-highlight-box__title { font: 400 17px/1.2 var(--font-serif); color: var(--ink); } .gx-highlight-box__note { font: 400 13px/1.55 var(--font-sans); color: var(--ink-58); } /* ---- navbar quick-calculator icon (opens the compact popup) ---- */ .nav-calc { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--white-42); border-radius: 50%; color: var(--white); transition: border-color var(--dur-base) ease, color var(--dur-base) ease, transform .4s var(--ease); } .nav-calc:hover { border-color: var(--green); color: var(--green); transform: translateY(-1px); } /* mobile: the icon joins the fixed header (styled by sections.css) */ /* ---- calculator: construction-type switcher (fence / wall / cladding) ---- */ .calc-modes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .calc-mode { flex: 1 1 auto; padding: 12px 16px; border: 1px solid var(--ink-16); border-radius: var(--radius-full); background: transparent; font: 600 12.5px/1 var(--font-sans); letter-spacing: .04em; color: var(--ink-70); cursor: pointer; transition: background-color var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease; } .calc-mode:hover { border-color: var(--ink-40); color: var(--ink); } .calc-mode.is-active { background: var(--green-cta); border-color: var(--green-cta); color: var(--white); } .calc-mode.is-active:hover { background: var(--green-cta-hover); border-color: var(--green-cta-hover); } .calc-modes__note { margin: 0 0 18px; font: 400 13px/1.55 var(--font-sans); color: var(--ink-58); } .calc-controls__label { font: 500 11px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-58); margin-bottom: 24px; } .gx-thumb { aspect-ratio: 1 / 1; border-radius: var(--radius-xs); overflow: hidden; background: #11161e; } .gx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gx-thumb-cap { margin-top: 8px; font: 500 11px/1.3 var(--font-sans); letter-spacing: .02em; color: var(--ink-70); text-align: center; } /* ================= calculator ================= */ .calc-materials { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .calc-controls__group+.calc-controls__group { margin-top: 24px; } .calc-field-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 11px; } .calc-field-row__label { font: 500 14px/1 var(--font-sans); color: var(--ink-70); } .calc-field-row__value { font: 600 16px/1 var(--font-serif); color: var(--green-ink); } .calc-field { margin-bottom: 24px; } .calc-field:last-child { margin-bottom: 0; } .calc-result__head { display: flex; align-items: center; gap: 7px; } .calc-result__head-label { font: 600 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--white-50); } .calc-total { font: 600 clamp(33px, 4.3vw, 46px)/1 var(--font-serif); margin: 15px 0 4px; color: var(--white); } .calc-usd { font: 500 14px/1.4 var(--font-sans); color: var(--green); } /* area line under the total (replaced the itemised breakdown 2026-07): m² of face for fence/facade, m³ of volume for wall */ .calc-area { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--white-12, rgba(255, 255, 255, .12)); } .calc-area__label { font: 400 13px/1.4 var(--font-sans); color: var(--cream-62); } .calc-area__value { font: 600 15px/1 var(--font-sans); color: var(--cream); white-space: nowrap; } .calc-badge { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 20px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--green-wash-strong); } .calc-badge__label { display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px/1.2 var(--font-sans); color: var(--white-85); } .calc-badge__value { font: 600 18px/1 var(--font-serif); color: var(--green); } .calc-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 0; font: 400 13.5px/1.35 var(--font-sans); } .calc-lines { display: flex; flex-direction: column; gap: 14px; } .calc-line__label { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; color: var(--cream-62); } .calc-line__label--total { font-weight: 600; color: var(--white); } .calc-line__value { text-align: right; white-space: nowrap; } .calc-line__cost { display: block; font: 600 13.5px/1 var(--font-sans); color: var(--white); } .calc-line__cost--muted { color: var(--white-74); } .calc-line__cost--accent { font: 600 14px/1 var(--font-sans); color: var(--green); } .calc-line__qty { display: block; font: 400 11px/1.3 var(--font-sans); color: var(--white-50); margin-top: 3px; } .calc-line--total { padding-top: 14px; border-top: 1px solid var(--white-13); } .calc-disclaimer { margin: 16px 0 0; font: 400 12px/1.5 var(--font-sans); color: var(--white-50); } .calc-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: stretch; } /* ================= footer shell + CTA band + bottom bar (shared across pages) ================= */ .gx-footer-shell { position: relative; padding: clamp(80px, 11vh, 128px) var(--section-pad-x) clamp(34px, 5vh, 48px); overflow: hidden; } .gx-cta-band { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: end; padding-bottom: clamp(48px, 6vh, 72px); border-bottom: 1px solid var(--white-13); } .gx-cta-band__heading { max-width: 600px; } .gx-cta-band__form-col { justify-self: stretch; width: 100%; } .gx-cta-band__intro { font: 400 15px/1.5 var(--font-serif); color: var(--cream-62); margin-bottom: 16px; } .gx-footer-logo { height: 104px; width: auto; display: block; margin-bottom: 26px; } .gx-footer-tagline { max-width: 280px; } .gx-footer-bottom { margin-top: clamp(28px, 4vh, 40px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .gx-footer-bottom__copy { font: 400 12.5px/1.5 var(--font-sans); letter-spacing: .02em; color: var(--white-50); } .gx-footer-bottom__tag { font: 400 12.5px/1.5 var(--font-sans); letter-spacing: .06em; color: var(--white-50); } .gx-grid-footer { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding: clamp(48px, 6vh, 72px) 0; border-bottom: 1px solid var(--white-13); } .gx-col-stack { display: flex; flex-direction: column; gap: 13px; } /* stacks of footer/contact links: the links carry their own 44px hit box, so the stack drops its gap — the type keeps a near-identical vertical rhythm */ .gx-col-stack:has(> .gx-link--footer), .gx-col-stack:has(> .gx-contact-link) { gap: 0; } .gx-divider { height: 1px; background: var(--white-13); margin: 0 0 18px; } .gx-border-top { border-top: 1px solid var(--ink-16); } .gx-col-title { font: 500 11px/1 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--white-50); margin-bottom: 22px; } /* ================= forms ================= */ .gx-field { display: flex; flex-direction: column; gap: 11px; } .gx-field__label { font: 500 11px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-40); } .gx-field__input { width: 100%; padding: 11px 0; border: none; border-bottom: 1px solid var(--white-24); background: transparent; font: 400 19px/1.3 var(--font-serif); color: var(--white); outline: none; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; caret-color: var(--green); } .gx-field__input::placeholder { color: rgba(237, 232, 222, .38); } .gx-field__input:focus { border-bottom-color: var(--green); } .gx-field__input[aria-invalid="true"], .gx-pill-form input[aria-invalid="true"] { border-color: #b0483a; } .gx-field__input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; } .gx-form-stack { display: flex; flex-direction: column; gap: 24px; } .gx-pill-form { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--white-24); border-radius: var(--radius-full); overflow: hidden; max-width: 380px; padding-left: 6px; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } /* focus ring lives on the pill itself — an outline on the clipped input gets chopped by the rounded overflow:hidden container */ .gx-pill-form:focus-within { border-color: rgba(43, 162, 74, .6); box-shadow: 0 0 0 3px rgba(43, 162, 74, .18); } .gx-pill-form input { flex: 1; min-width: 0; padding: 15px 18px; border: none; background: transparent; font: 400 15px/1 var(--font-sans); color: var(--white); outline: none; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; caret-color: var(--green); } .gx-pill-form input::placeholder { color: rgba(237, 232, 222, .38); } /* focus feedback lives entirely on the pill's :focus-within ring — a background fill on the input paints a hard-edged rectangle inside the capsule and reads as broken */ .gx-pill-form input:focus, .gx-pill-form input:focus-visible { outline: none; background: transparent; } /* Chrome autofill: kill the default light-blue fill that clashes with the dark pill */ .gx-pill-form input:-webkit-autofill, .gx-pill-form input:-webkit-autofill:hover, .gx-pill-form input:-webkit-autofill:focus { -webkit-text-fill-color: var(--white); -webkit-box-shadow: 0 0 0 100px var(--dark) inset; /* matches the gx-section--dark footer behind the pill */ caret-color: var(--green); border-radius: var(--radius-full) 0 0 var(--radius-full); } .gx-pill-form button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 26px; background: var(--green-cta); color: var(--white); font: 600 12px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; border-radius: var(--radius-full); transition: background-color var(--dur-base) ease; } .gx-pill-form button svg { transition: transform var(--dur-base) var(--ease); } /* no lift here: the button is a clipped segment of the pill — translating it tears the capsule apart. Hover feedback stays in place: darker green + arrow nudge. */ .gx-pill-form button:hover { background: var(--green-cta-hover); } .gx-pill-form button:hover svg { transform: translateX(3px); } .gx-help-text { margin: 0; font: 400 12px/1.5 var(--font-sans); color: var(--cream-40); } /* success state (form → thank-you swap) — a confident green badge whose check draws in; shared by the calc-lead / contact / footer forms (all on dark). Matches the master-popup .mp__sent language. */ .gx-success { animation: gx-rise .35s var(--ease) both; display: flex; align-items: center; gap: 14px; max-width: 380px; padding: 6px 0; } .gx-success--column { flex-direction: column; align-items: center; text-align: center; gap: 14px; max-width: none; } .gx-success__icon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; /* solid fill + halo ring + shadow — depth, not the flat wash that read grey */ box-shadow: 0 6px 16px rgba(43, 162, 74, .34), 0 0 0 5px rgba(43, 162, 74, .14); animation: mp-badge-pop .5s cubic-bezier(.2, 1.25, .35, 1) both; } /* the check is hard-coded green in the markup — flip it white on the green badge */ .gx-success__icon svg { stroke: #fff; } .gx-success__icon svg path { stroke-dasharray: 26; animation: mp-check-draw .4s ease-out .22s both; } .gx-success__icon--lg { width: 62px; height: 62px; box-shadow: 0 12px 28px rgba(43, 162, 74, .32), 0 0 0 7px rgba(43, 162, 74, .13); } .gx-success__text { font: 400 16px/1.4 var(--font-serif); color: var(--white); } /* ================= tooltip ================= */ .gx-tip { position: relative; display: inline-flex; align-items: center; cursor: help; color: var(--white-50); } .gx-tip-pop { position: absolute; bottom: calc(100% + 11px); left: -10px; width: 252px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--white); color: #131C2A; box-shadow: 0 14px 34px rgba(0, 0, 0, .32); border: 1px solid rgba(19, 28, 42, .08); font: 400 12.5px/1.6 var(--font-sans); text-align: left; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; z-index: 40; pointer-events: none; } .gx-tip-pop b { font: 600 12.5px/1.6 var(--font-serif); color: var(--green-ink); } .gx-tip-pop code { font-family: 'Space Grotesk', var(--font-sans), monospace; background: var(--green-wash); color: #1d7a37; padding: 1px 5px; border-radius: 5px; } .gx-tip:hover .gx-tip-pop { opacity: 1; visibility: visible; transform: translateY(0); } .gx-tip-pop::after { content: ''; position: absolute; top: 100%; left: 18px; border: 7px solid transparent; border-top-color: var(--white); } .gx-tip.is-open .gx-tip-pop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .gx-tip:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; } /* ================= FAQ accordion ================= */ .gx-faq-item { border-bottom: 1px solid var(--ink-16); } .gx-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 4px; background: none; border: none; text-align: left; color: var(--ink); transition: color .3s ease; cursor: pointer; } .gx-faq-q:hover { color: var(--green-ink); } .gx-faq-q__text { font: 400 clamp(18px, 2vw, 23px)/1.35 var(--font-serif); } .faq-plus { flex: none; width: 22px; height: 22px; position: relative; transition: transform var(--dur-base) var(--ease); } .faq-plus span { position: absolute; background: var(--green); } .faq-plus span:first-child { top: 50%; left: 0; width: 22px; height: 1.5px; transform: translateY(-50%); } .faq-plus span:last-child { left: 50%; top: 0; width: 1.5px; height: 22px; transform: translateX(-50%); } .faq-rows { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } .faq-rows__inner { overflow: hidden; } .faq-rows__inner p { margin: 0; padding: 0 60px 28px 4px; font: 400 15.5px/1.7 var(--font-sans); color: var(--ink-70); } /* ================= callback CTA card (contacts page) ================= */ .gx-cta-split { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 0.92fr 1.08fr; background: var(--charcoal); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-xl); } .gx-cta-split__media { position: relative; min-height: 480px; overflow: hidden; } .gx-cta-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gx-cta-split__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 17, 24, .85) 0%, rgba(12, 17, 24, .25) 55%, rgba(12, 17, 24, .35) 100%); } .gx-cta-split__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(28px, 3vw, 40px); } .gx-cta-split__form { padding: clamp(36px, 4vw, 60px); display: flex; flex-direction: column; justify-content: center; } /* ================= nav ================= */ .nav-links { display: contents; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--white); transition: background-color var(--dur-fast) ease; } .nav-toggle:hover { background: rgba(255, 255, 255, .1); } .nav-toggle-bars { position: relative; width: 20px; height: 14px; } .nav-toggle-bars span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), top var(--dur-base) var(--ease); } .nav-toggle-bars span:nth-child(1) { top: 0; } .nav-toggle-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); } .nav-toggle-bars span:nth-child(3) { top: 100%; transform: translateY(-100%); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); } /* ================= mobile call bar ================= */ .gx-callbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-callbar); gap: 1px; background: var(--white-13); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -8px 30px rgba(0, 0, 0, .35); } .gx-callbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 0; background: var(--charcoal); color: var(--cream); font: 600 13px/1 var(--font-sans); letter-spacing: .04em; text-decoration: none; } .gx-callbar a:first-child { background: var(--dark); } .gx-callbar a:last-child { background: var(--green-cta); color: var(--white); } @media (max-width: 768px) { .gx-callbar { display: flex; } /* room for the fixed call bar lives inside the dark footer — body padding would show a light bg strip under it */ .gx-footer-shell { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); } } /* ================= range sliders (calculator) ================= */ /* the control is a 44px-tall touch target; the 4px rail lives on the track pseudo-element and the negative block margins collapse the box back to the rail's original 4px flow footprint — the hit area grows, the layout doesn't. --fill is fed by js/home.js and inherits into the track pseudo. */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin-block: -20px; border-radius: var(--radius-full); background: transparent; outline: none; cursor: pointer; } input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; height: 4px; border-radius: var(--radius-full); background: linear-gradient(to right, var(--green) 0%, var(--green) var(--fill, 50%), rgba(33, 30, 24, .14) var(--fill, 50%), rgba(33, 30, 24, .14) 100%); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--white); border: 3px solid var(--green); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); margin-top: -7px; transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); } input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); box-shadow: 0 2px 14px rgba(43, 162, 74, .45); } input[type="range"]::-moz-range-track { height: 4px; border-radius: var(--radius-full); background: rgba(33, 30, 24, .14); } input[type="range"]::-moz-range-progress { height: 4px; border-radius: var(--radius-full); background: var(--green); } input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--white); border: 3px solid var(--green); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } input[type="range"]:hover::-moz-range-thumb { transform: scale(1.12); } /* the box is now 44px tall — pull the ring back in so it still hugs the rail */ input[type="range"]:focus-visible { outline: 2px solid var(--green); outline-offset: -12px; } @media (pointer: coarse) { input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; } input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; } } /* ================= footer ambient glow ================= */ .gx-footer-glow { isolation: isolate; } /* fixed square: percentage sizing made this a tall skinny rectangle on mobile (footer ≈ 3× viewport height) and the circle gradient got clipped at the box edges — a visible hard-edged green rectangle. closest-side keeps the fade fully inside the box regardless of the footer's aspect ratio. */ .gx-footer-glow::before { content: ''; position: absolute; top: -140px; right: -160px; width: min(640px, 130vw); height: min(640px, 130vw); background: radial-gradient(circle closest-side, rgba(43, 162, 74, .15) 0%, rgba(43, 162, 74, 0) 100%); animation: gx-drift 22s ease-in-out infinite alternate; pointer-events: none; z-index: 0; } .gx-footer-glow>* { position: relative; z-index: 1; } /* ================= misc a11y ================= */ [data-out] { font-variant-numeric: tabular-nums; } nav a[href^="tel:"] { transition: transform var(--dur-fast) ease; } nav a[href^="tel:"]:hover { transform: translateY(-1px); } #gxw-split { overscroll-behavior: contain; } [data-out="nameOrYou"] { overflow-wrap: anywhere; } /* ================= MASTER POPUP (.mp) ================= One shell, two views: the quick phone form and the full calculator. Switching morphs THIS panel (js/master-popup.js measures → tweens), so the dialog is never torn down and rebuilt. Desktop: centred card that grows from 440px to the calculator's 780px. Phone: bottom sheet, height does the morph. */ .mp { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; opacity: 0; visibility: hidden; /* leaves the tab order + a11y tree when closed */ pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; } .mp.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease, visibility 0s; } .mp__scrim { position: absolute; inset: 0; background: rgba(12, 17, 24, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; } .mp.is-open .mp__scrim { opacity: 1; } .mp__panel { position: relative; width: min(440px, 100%); max-height: 100%; border: 1px solid var(--ink-10); border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-md); overflow: hidden; opacity: 0; transform: translateY(14px) scale(.975); transition: transform .4s var(--ease) .08s, opacity .35s ease .08s; } .mp.is-open .mp__panel { opacity: 1; transform: none; } /* the calculator view is the wide state — the width tween runs on the panel */ .mp--calc .mp__panel { width: min(780px, 100%); } .mp__stage { display: block; } .mp__view { display: block; } .mp__view--quick { padding: 38px 38px 30px; } .mp__eyebrow { margin-bottom: 14px; } .mp__title { margin: 0 0 8px; font: 700 clamp(24px, 2.4vw, 30px)/1.15 var(--font-sans); color: var(--ink); letter-spacing: -.01em; } .mp__sub { margin: 0 0 24px; font: 400 14.5px/1.5 var(--font-sans); color: var(--ink-70); max-width: 34ch; } /* the phone field wears the footer pill's language (border, radius, focus ring, invalid state) — one input look across the site, adapted to the light panel */ .mp__form .gx-field { gap: 9px; } .mp__form .gx-field__label { color: var(--ink-58); } .mp__input { width: 100%; padding: 15px 18px; border: 1px solid var(--ink-16); border-radius: var(--radius-full); background: var(--white); font: 400 15px/1 var(--font-sans); color: var(--ink); outline: none; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .mp__input::placeholder { color: var(--ink-40); } .mp__input:focus { border-color: rgba(43, 162, 74, .6); box-shadow: 0 0 0 3px rgba(43, 162, 74, .18); } .mp__input[aria-invalid="true"] { border-color: #b0483a; box-shadow: 0 0 0 3px rgba(176, 72, 58, .14); } .mp__form .gx-btn { margin-top: 4px; } /* delivered state — the confirmation TAKES OVER the panel: the ask-header steps aside (it contradicted «Дякуємо»), so the success stands alone, centred, with a solid green badge whose check draws in. */ .mp__view--quick.is-sent > .mp__eyebrow, .mp__view--quick.is-sent > .mp__title, .mp__view--quick.is-sent > .mp__sub { display: none; } .mp__sent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 16px 0 10px; } .mp__sent-mark { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 12px; border-radius: 50%; background: var(--green); color: #fff; /* halo ring + drop shadow give real depth, not the flat wash that read grey */ box-shadow: 0 10px 26px rgba(43, 162, 74, .3), 0 0 0 7px var(--green-wash); } .mp__sent-mark svg { width: 26px; height: 26px; } .mp__sent b { font: 700 19px/1.25 var(--font-sans); color: var(--ink); letter-spacing: -.01em; } .mp__sent span { font: 400 14.5px/1.55 var(--font-sans); color: var(--ink-70); max-width: 30ch; } /* short, confident success sequence: badge pops → check draws → copy rises. base.css kills all animation under reduced motion, leaving the calm end state. */ .mp__view--quick.is-sent .mp__sent-mark { animation: mp-badge-pop .5s cubic-bezier(.2, 1.25, .35, 1) both; } .mp__view--quick.is-sent .mp__sent-mark svg path { stroke-dasharray: 26; animation: mp-check-draw .4s ease-out .22s both; } .mp__view--quick.is-sent .mp__sent b { animation: mp-sent-rise .5s var(--ease) .1s both; } .mp__view--quick.is-sent .mp__sent span { animation: mp-sent-rise .5s var(--ease) .16s both; } @keyframes mp-badge-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } @keyframes mp-check-draw { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } } @keyframes mp-sent-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } /* the bridge to the calculator */ .mp__alt { display: flex; align-items: center; gap: 14px; margin-top: 22px; } .mp__alt-line { flex: 1; height: 1px; background: var(--ink-10); } .mp__switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--ink-16); border-radius: var(--radius-full); background: transparent; color: var(--ink); font: 600 13.5px/1 var(--font-sans); white-space: nowrap; cursor: pointer; transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease); } .mp__switch:hover { border-color: var(--green); color: var(--green-ink); background: var(--green-wash); } .mp__switch svg { flex: none; } /* --- calculator view --- The view owns its width, NOT the morphing panel: the iframe must lay out at the calculator's real width from its very first frame. (It is loaded while the panel is still 440px wide, and the embed picks its layout from its own viewport — at 440px it would build the phone sheet and keep it after the panel grows.) The panel clips the overflow while the width tween runs. */ .mp__view--calc { display: flex; flex-direction: column; width: min(780px, 100vw); height: 620px; max-height: 100%; } .mp__view--calc iframe { display: block; flex: 1; width: 100%; border: 0; min-height: 0; } .mp__switch--back { flex: none; align-self: flex-start; margin: 0 0 16px 22px; } .mp__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--charcoal); color: var(--cream); border: 1px solid var(--white-24); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .3s ease; } .mp__close:hover { background: var(--green-cta); } .mp__handle { display: none; } /* --- master popup on phones: native bottom sheet, height carries the morph --- */ @media (max-width: 768px) { .mp { align-items: flex-end; padding: 0; } .mp__panel, .mp--calc .mp__panel { width: 100%; max-height: calc(100svh - 26px); border-radius: 18px 18px 0 0; border: none; transform: translateY(100%); transition: transform .42s var(--ease), opacity .3s ease; } .mp.is-open .mp__panel { transform: none; } /* the sheet fits the calculator content — js/master-popup.js fitCalc() measures the same-origin embed and drives the height; this is the pre-JS fallback, capped so it never fills the whole screen */ .mp__view--calc { width: 100%; height: min(640px, calc(100svh - 26px)); max-height: calc(100svh - 26px); } .mp__view--quick { padding: 34px 22px calc(24px + env(safe-area-inset-bottom)); } .mp__title { font-size: 23px; } .mp__handle { position: absolute; top: 0; left: 0; right: 0; height: 30px; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; cursor: pointer; } .mp__handle::after { content: ''; width: 44px; height: 4px; border-radius: 2px; background: var(--ink-16); } .mp__close { top: 30px; right: 12px; width: 40px; height: 40px; } .mp__alt { margin-top: 18px; } .mp__switch--back { margin: 0 16px 14px; align-self: stretch; } } @media (max-width: 768px) { .gx-highlight-box__title { font: 400 15px/1.2 var(--font-serif); } .calc-field { margin-bottom: 5px; } .calc-field input[type="range"] { height: 38px; } .calc-grid .gx-panel { padding: clamp(20px, 3vw, 42px); } }