/* ===========================================================
Argentics — theme skin (header, footer, ACF blocks)
=========================================================== */
:root {
--ag-green: #3ba34c;
--ag-green-d: #33903f;
--ag-green3: #4AC882;
--ag-dark: #0c1a2c;
--ag-lgray: #F1F0EB;
--ag-dark-2: #0a1626;
--ag-black: #070b11;
--ag-black2: #040d21;
--ag-card: #142338;
--ag-line: rgba(255, 255, 255, .12);
--ag-text: #ffffff;
--ag-muted: #8b97a8;
--ag-header-h: 90px;
--ag-maxw: 1248px; /* border-box: 1248 - 2*24 padding = 1200 content (Figma) */
--ag-font-ui: "PT Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
/* base font — Inter (Google Fonts) */
body,
.ag-header,
.ag-footer,
input,
textarea,
button,
select {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
/* dark canvas for ACF landing pages */
body.has-hero-banner {
background-color: var(--ag-dark);
}
body.has-hero-banner .main-content,
body.has-hero-banner .wrapper-content {
background-color: var(--ag-dark);
}
.ag-container,
.ag-header__inner,
.ag-footer__inner {
max-width: var(--ag-maxw);
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
/* Усі ag-секції — один контейнер (1200 + бічні 24px). Блоки сторінок послуг (linkcards,
benefits, models, whatwedo…) брали легасі .container з main.css (1140 → 940 → 700, без
padding) — на ~541–718px контент упирався в край екрана й не вирівнювався з іншими
секціями. :where() тримає специфічність 0,1,0, тож поблокові правила нижче не ламаються. */
:where(section[class^="ag-"], section[class*=" ag-"]) .container {
max-width: var(--ag-maxw);
padding-left: 24px;
padding-right: 24px;
}
/* override theme container for argentics sections */
.ag-hero .container,
.ag-brands .container,
.ag-services .container,
.ag-portfolio .container,
.ag-feature .container,
.ag-cta .container,
.ag-about .container,
.ag-contact .container,
.ag-blog .container,
.ag-faq .container,
.ag-article .container,
.ag-related .container,
.ag-newsletter .container,
.ag-pagehero .container,
.ag-contacthero .container {
max-width: var(--ag-maxw);
padding-left: 24px;
padding-right: 24px;
}
/* ---------- Buttons ---------- */
.ag-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
min-height: 40px;
border-radius: 4px;
font-family: var(--ag-font-ui);
font-weight: 700;
font-size: 14px;
line-height: 20px;
text-decoration: none;
border: 0;
cursor: pointer;
transition: background .25s, transform .2s, color .25s;
min-width: 122px;
text-transform: capitalize; /* кожне слово з великої (Contact Us, See More) — незалежно від тексту в ACF */
}
/* те саме для кнопок відправки форм (значення «Contact us» приходить з опцій/CF7) */
.ag-contact__form input[type="submit"],
.ag-newsletter__form input[type="submit"] { text-transform: capitalize; }
.ag-btn--green {
background: var(--ag-green);
color: #fff;
}
.ag-btn--green:hover {
background: var(--ag-green-d);
color: #fff;
transform: translateY(-2px);
}
/* ---------- Section titles ---------- */
.ag-section-title {
text-align: center;
color: var(--ag-lgray);
font-weight: 900;
font-size: 38px;
line-height: 1.25;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 14px;
}
.ag-section-subtitle {
text-align: center;
color: #fff;
font-size: 18px;
line-height: 1.5;
margin: 0 0 36px;
}
/* ===========================================================
HEADER
=========================================================== */
.ag-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background: #fff;
box-shadow: 0 2px 18px rgba(0, 0, 0, .08);
transition: background .3s, box-shadow .3s;
}
.ag-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--ag-header-h);
gap: 24px;
}
/* transparent over hero until scrolled */
body.has-hero-banner .ag-header {
background: transparent;
box-shadow: none;
}
body.has-hero-banner .ag-header.is-scrolled {
background: rgba(10, 18, 30, .92);
backdrop-filter: blur(8px);
box-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
/* logo */
.ag-header__logo {
display: flex;
flex-direction: column;
text-decoration: none;
line-height: 1.05;
}
.ag-header__logo img { max-height: 32px; width: auto; }
.ag-header__logo-text {
font-weight: 800;
font-size: 24px;
letter-spacing: .06em;
color: #11253c;
}
.ag-header__logo-tagline {
font-size: 10px;
letter-spacing: .04em;
color: var(--ag-muted);
margin-top: 3px;
}
body.has-hero-banner .ag-header:not(.is-scrolled) .ag-header__logo-text { color: #fff; }
.ag-header.is-scrolled .ag-header__logo-text,
body.has-hero-banner .ag-header.is-scrolled .ag-header__logo-text { color: #fff; }
/* nav */
.ag-header__nav { display: flex; }
.ag-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 53px;
}
.ag-menu li { position: relative; }
.ag-menu a {
text-decoration: none;
color: #4a5568;
font-size: 18px;
line-height: 1.5;
font-weight: 400;
transition: color .25s;
white-space: nowrap;
}
.ag-menu a:hover { color: var(--ag-green); }
.ag-menu .menu-item-has-children > a::after {
content: "";
display: inline-block;
width: 7px;
height: 7px;
margin-left: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
vertical-align: middle;
}
/* white text over hero */
body.has-hero-banner .ag-header:not(.is-scrolled) .ag-menu a { color: var(--ag-lgray) }
body.has-hero-banner .ag-header:not(.is-scrolled) .ag-menu a:hover { color: #fff; }
.ag-header.is-scrolled .ag-menu a { color: var(--ag-lgray); }
.ag-header.is-scrolled .ag-menu a:hover { color: #fff; }
/* dropdown */
.ag-menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background: #fff;
border-radius: 8px;
box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
padding: 10px 0;
list-style: none;
margin: 12px 0 0;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .22s, transform .22s, visibility .22s;
z-index: 10;
/* legacy main.css на ≤1024 робить .sub-menu height:0 + overflow:hidden — дропдаун зникав */
width: auto;
height: auto;
overflow: visible;
}
.ag-menu li:hover > .sub-menu,
.ag-menu li:focus-within > .sub-menu,
.ag-menu li.is-sub-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ag-menu .sub-menu li { display: block; }
.ag-menu .sub-menu a { display: block; padding: 9px 20px; color: #4a5568 !important; }
.ag-menu .sub-menu a:hover { background: #f3f6f9; color: var(--ag-green) !important; }
/* actions */
.ag-header__actions { display: flex; align-items: center; gap: 16px; }
.ag-header__cta { padding: 10px 29px; }
/* burger */
.ag-header__burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
background: transparent;
border: 0;
cursor: pointer;
padding: 8px;
}
.ag-header__burger span {
display: block;
height: 2px;
width: 100%;
background: #11253c;
transition: transform .3s, opacity .3s;
}
body.has-hero-banner .ag-header:not(.is-scrolled) .ag-header__burger span,
.ag-header.is-scrolled .ag-header__burger span { background: #fff; }
body.ag-menu-open .ag-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.ag-menu-open .ag-header__burger span:nth-child(2) { opacity: 0; }
body.ag-menu-open .ag-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* mobile menu */
.ag-header__mobile {
display: none;
flex-direction: column;
gap: 6px;
background: rgba(10, 18, 30, .98);
padding: 18px 24px 28px;
border-top: 1px solid var(--ag-line);
}
body.ag-menu-open .ag-header__mobile {
display: flex;
max-height: calc(100vh - var(--ag-header-h));
max-height: calc(100dvh - var(--ag-header-h));
overflow-y: auto;
}
.ag-mobile-menu { list-style: none; margin: 0 0 14px; padding: 0; }
.ag-mobile-menu li { border-bottom: 1px solid var(--ag-line); }
.ag-mobile-menu a {
display: block;
padding: 14px 4px;
color: #fff;
text-decoration: none;
font-size: 17px;
}
/* підменю послуг — акордеон (legacy main.css ховає .sub-menu через opacity/height) */
.ag-mobile-menu .menu-item-has-children > a {
display: flex;
align-items: center;
justify-content: space-between;
}
.ag-mobile-menu .menu-item-has-children > a::after {
content: "";
width: 8px;
height: 8px;
margin: 0 6px 4px 12px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform .25s;
}
.ag-mobile-menu .menu-item-has-children.is-sub-open > a::after { transform: rotate(-135deg); margin-bottom: -4px; }
.ag-mobile-menu .sub-menu {
display: none;
position: static;
width: auto;
height: auto;
overflow: visible;
opacity: 1;
transform: none !important;
background: transparent;
border: 0;
box-shadow: none;
z-index: auto;
list-style: none;
margin: 0;
padding: 0 0 8px 16px;
}
.ag-mobile-menu .is-sub-open > .sub-menu { display: block; }
.ag-mobile-menu .sub-menu li { border-bottom: 0; }
.ag-mobile-menu .sub-menu a { padding: 10px 4px; font-size: 16px; color: var(--ag-lgray); }
.ag-mobile-menu .sub-menu a:hover { color: var(--ag-green); }
.ag-header__mobile-cta { align-self: flex-start; }
/* Відкрите меню: шапка — того ж кольору, що й випадаюче меню; кнопку Contact Us біля
хрестика ховаємо (вона є всередині меню) */
body.ag-menu-open .ag-header,
body.ag-menu-open .ag-header.is-scrolled,
body.has-hero-banner.ag-menu-open .ag-header,
body.has-hero-banner.ag-menu-open .ag-header.is-scrolled {
background: rgba(10, 18, 30, .98);
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
}
body.ag-menu-open .ag-header__burger span { background: #fff; }
body.ag-menu-open .ag-header__logo-text { color: #fff; }
body.ag-menu-open .ag-header__cta { display: none; }
/* push non-hero pages below fixed header */
body:not(.has-hero-banner) .main-content { padding-top: var(--ag-header-h); }
/* ===========================================================
HERO
=========================================================== */
.ag-hero {
position: relative;
background-size: cover;
background-position: center;
background-color: var(--ag-dark-2);
color: #fff;
padding: 78px 0 0;
min-height: 553px;
overflow: hidden;
}
.ag-hero__inner { width: 100%; }
.ag-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(8, 14, 24, .9) 0%, rgba(8, 14, 24, .55) 45%, rgba(8, 14, 24, .15) 100%),
linear-gradient(180deg, rgba(8, 14, 24, .2) 0%, rgba(8, 14, 24, .7) 100%);
}
.ag-hero__inner { position: relative; z-index: 2; text-align: left; }
.ag-hero__title {
font-size: 50px;
line-height: 60px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0;
color: var(--ag-lgray);
max-width: 636px;
margin: 0;
padding: 64px 0;
}
.ag-hero__platforms {
list-style: none;
margin: 0;
padding: 64px 0;
display: flex;
flex-wrap: wrap;
gap: 55px 86px;
}
.ag-hero__platform {
display: flex;
align-items: center;
gap: 12px; /* Figma 122:16523: іконка 48×48 — 12px — підпис */
font-family: var(--ag-font-ui);
font-size: 16px;
line-height: 25px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
color: #fff;
}
.ag-hero__platform-icon svg,
.ag-hero__platform-icon img { display: block; flex: none; }
/* Figma 122:16523: іконки 48×48 у натуральному розмірі SVG; прозорість 80% зашита в самі SVG */
.ag-hero__platform-icon img { height: 48px; width: auto; }
.ag-hero__platform-icon { color: #fff; }
/* ===========================================================
BRANDS strip
=========================================================== */
.ag-brands {
background: #020816;
padding: 44px 0;
}
.ag-brands__subtitle {
text-align: center;
color: var(--ag-muted);
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
margin: 0 0 18px;
}
.ag-brands__marquee {
overflow: hidden;
width: 100%;
/* fade out at both edges (into the section background) */
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.ag-brands__track {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
width: max-content;
animation: ag-brands-scroll 40s linear infinite;
will-change: transform;
}
.ag-brands__marquee:hover .ag-brands__track { animation-play-state: paused; }
.ag-brands__item {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 21px;
flex: 0 0 auto;
text-decoration: none;
/* per-item trailing space (not flex `gap`) so each half is an exact
period → translateX(-50%) loops without a one-gap jump */
margin-right: 37px;
transition: opacity .25s;
width: 120px;
}
/* normalize any logo to a flat tone; muted over the dark bg */
.ag-brands__item img {
width: auto;
max-width: 100%;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: .5;
transition: opacity .25s;
}
.ag-brands__item:hover img { opacity: 1; }
.ag-brands__item:hover .ag-brands__label { color: #fff; }
.ag-brands__label {
color: rgba(255, 255, 255, .5);
font-size: 18px;
line-height: 1.5;
letter-spacing: 0;
white-space: nowrap;
transition: color .25s;
padding: 3px;
}
/* Move left by exactly one of the two identical halves → seamless loop */
@keyframes ag-brands-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ag-brands__track { animation: none; }
}
/* ===========================================================
SERVICES
=========================================================== */
.ag-services {
position: relative;
overflow: hidden;
background-color: var(--ag-black2);
padding: 110px 0;
}
/* decorative glow, top-left */
.ag-services::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/ellipse-2.png) no-repeat left top;
background-size: contain;
pointer-events: none;
z-index: 2;
}
/* ACF background photo: anchored to the left, not stretched full width */
.ag-services.has-bg {
background-repeat: no-repeat;
background-position: left top;
background-size: auto 100%;
}
.ag-services__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(4, 13, 33, .55) 0%, rgba(4, 13, 33, .9) 45%, rgba(4, 13, 33, 1) 70%);
}
.ag-services .container { position: relative; z-index: 3; }
/* decorative silhouette, anchored to container's left edge (Figma girl_image 399x733) */
.ag-services__figure {
position: absolute;
top: 52px;
left: calc(50% - 600px);
width: 399px;
height: 733px;
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
opacity: .62;
mix-blend-mode: luminosity;
pointer-events: none;
z-index: 1;
}
.ag-services .ag-section-title { margin-bottom: 90px; }
.ag-services__grid { position: relative; }
/* desktop/tablet: static grid (swiper is destroyed ≥541) */
@media (min-width: 541px) {
.ag-services__grid > .swiper-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
transform: none !important;
}
.ag-services__grid .ag-services__card { width: auto; }
}
/* mobile slider nav (Figma "01 / 04" + arrows) */
.ag-services__nav { display: none; }
.ag-services__nav-btn {
width: 48px;
height: 48px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--ag-line);
border-radius: 50%;
background: transparent;
color: var(--ag-lgray);
cursor: pointer;
transition: background .25s, color .25s, opacity .25s;
}
.ag-services__nav-btn:hover { background: var(--ag-green); border-color: var(--ag-green); color: #fff; }
.ag-services__nav-btn.swiper-button-disabled { opacity: .35; cursor: default; }
.ag-services__nav-counter {
min-width: 64px;
text-align: center;
font-family: var(--ag-font-ui);
font-size: 16px;
color: var(--ag-lgray);
}
@media (max-width: 540px) {
.ag-services__nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 24px; }
}
.ag-services__card {
position: relative;
display: block;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 291 / 408;
text-decoration: none;
background: linear-gradient(180.00deg, rgba(5, 14, 34, 0.1) 50%,rgba(7, 15, 37, 1) 99.913%);
}
.ag-services__card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s;
}
.ag-services__card:hover .ag-services__card-img { transform: scale(1.05); }
/* diagonal "open" arrow, bottom-right of card (Figma icon_load_more) */
.ag-services__card::after {
content: "";
position: absolute;
right: 24px;
bottom: 28px;
width: 19px;
height: 19px;
z-index: 5;
background: url('data:image/svg+xml,') no-repeat center / contain;
pointer-events: none;
}
.ag-services__card-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
/*max-width: 221px;*/
padding: 80px 24px 24px;
color: var(--ag-lgray);
font-weight: 900;
font-size: 24px;
line-height: 1.25;
letter-spacing: 0;
text-transform: uppercase;
background: linear-gradient(180deg, transparent 0%, rgba(7, 15, 37, .55) 45%, rgba(7, 15, 37, .95) 100%);
}
/* ===========================================================
LINK CARDS — manual image+title+link grid (s1.png)
=========================================================== */
.ag-linkcards { padding: 110px 0; background: #060f20; }
.ag-linkcards .ag-section-title { margin-bottom: 40px; }
.ag-linkcards .ag-section-title span { color: var(--ag-green); }
.ag-linkcards .ag-section-subtitle { max-width: 1198px; margin: 0 auto 90px; }
.ag-linkcards__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.ag-linkcards__card {
position: relative;
display: block;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 291 / 408;
text-decoration: none;
background: var(--ag-dark-2);
}
.ag-linkcards__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s;
}
a.ag-linkcards__card:hover .ag-linkcards__img { transform: scale(1.05); }
/* diagonal "open" arrow, bottom-right (Figma icon_load_more) */
a.ag-linkcards__card::after {
content: "";
position: absolute;
right: 24px;
bottom: 28px;
width: 19px;
height: 19px;
z-index: 5;
background: url('data:image/svg+xml,') no-repeat center / contain;
pointer-events: none;
}
.ag-linkcards__title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 80px 24px 24px;
color: var(--ag-lgray);
font-weight: 900;
font-size: 24px;
line-height: 1.25;
text-transform: uppercase;
background: linear-gradient(180deg, transparent 0%, rgba(7, 15, 37, .55) 45%, rgba(7, 15, 37, .95) 100%);
}
@media (max-width: 1024px) {
.ag-linkcards__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.ag-linkcards { padding: 64px 0; }
.ag-linkcards__title { padding: 56px 18px 18px; }
a.ag-linkcards__card::after { right: 18px; bottom: 20px; }
}
/* Figma game dev 375 (1:9018): слайдер, картка 355×408, стрілки + "01 / 08" */
@media (max-width: 540px) {
.ag-linkcards__card { aspect-ratio: 355 / 408; }
.ag-linkcards__title { font-size: 24px; padding: 80px 24px 24px; }
}
/* ===========================================================
PORTFOLIO grid
=========================================================== */
.ag-portfolio { background: var(--ag-black2); padding: 110px 0 } /* Figma WORKS fill #040D21 */
.ag-portfolio .ag-section-title { margin-bottom: 40px; }
.ag-portfolio .ag-section-subtitle { margin-bottom: 90px; }
.ag-portfolio__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 330px;
grid-auto-flow: dense;
gap: 12px;
}
.ag-portfolio__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ag-portfolio__item {
display: block;
border-radius: 8px;
overflow: hidden;
}
.ag-portfolio__item img {
width: 100%;
height: 100%;
/* Плитка (1:2 у --tall) і прев'ю (~3:4) різних пропорцій, тож cover ріже
по боках. Прив'язка до лівого краю: логотипи робіт стоять зліва внизу,
і при симетричній обрізці по центру їм зрізало перші літери. */
object-fit: cover;
object-position: left center;
transition: transform .4s;
}
.ag-portfolio__item:hover img { transform: scale(1.05); }
/* tile sizes — column span + row span (dense packing fills the gaps) */
.ag-portfolio__item--quarter { grid-column: span 1; grid-row: span 1; }
.ag-portfolio__item--tall { grid-column: span 1; grid-row: span 2; }
.ag-portfolio__item--half { grid-column: span 2; grid-row: span 1; }
.ag-portfolio__item--big { grid-column: span 2; grid-row: span 2; }
.ag-portfolio__item--full { grid-column: 1 / -1; grid-row: span 1; }
.ag-portfolio__more { display: flex; justify-content: center; margin-top: 40px; }
/* ===========================================================
FEATURE rows
=========================================================== */
.ag-feature { background: var(--ag-black2); padding: 45px 0; }
/* Остання плашка закриває секцію WORKS — нижній відступ як у секції (Figma 110) */
.ag-feature:has(+ :not(.ag-feature)),
.ag-feature:last-child { padding-bottom: 110px; }
.ag-feature__inner {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
align-items: stretch;
gap: 0;
background: #182032;
border-radius: 8px;
overflow: visible;
min-height: 530px;
}
.ag-feature--reverse .ag-feature__media { order: 2; }
.ag-feature__media {
position: relative;
min-height: 530px;
}
/* character bleeds slightly past the card edges (top / left), Figma look */
.ag-feature__media img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: left bottom;
display: block;
}
.ag-feature__content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 24px;
padding: 40px 48px;
}
.ag-feature__label {
display: block;
color: #5f6571;
font-family: var(--ag-font-ui);
font-weight: 400;
font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
}
.ag-feature__logo { max-height: 130px; width: auto; max-width: 220px; margin: 0; }
.ag-feature__title {
color: #fff;
font-size: 38px;
font-weight: 900;
text-transform: uppercase;
line-height: 1.21;
letter-spacing: 0;
margin: 0;
}
.ag-feature__text { color: #fff; font-size: 18px; line-height: 1.5; margin: 0; }
.ag-feature__text p { margin: 0 0 12px; }
.ag-feature__text p:last-child { margin-bottom: 0; }
/* ===========================================================
CTA "Share your idea"
=========================================================== */
.ag-cta {
position: relative;
background-color: var(--ag-black2);
background-image: linear-gradient(180deg, #040d21 0%, #121833 100%);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 110px 0;
text-align: center;
overflow: hidden;
}
.ag-cta:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(/wp-content/uploads/2026/07/Ellipse-5.png) no-repeat left top;
background-size: contain;
pointer-events: none;
z-index: 2;
}
.ag-cta__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(4, 13, 33, .82) 0%, rgba(18, 24, 51, .9) 100%);
}
/* decorative dino, left side within container (Figma 843x704) — not full width */
.ag-cta__figure {
position: absolute;
top: 0;
bottom: 0;
left: calc(50% - 834px);
width: 843px;
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
opacity: .37;
mix-blend-mode: luminosity;
pointer-events: none;
z-index: 1;
}
.ag-cta__inner { position: relative; z-index: 2; max-width: 759px; margin: 0 auto; }
.ag-cta__label { color: #fff; font-size: 18px; line-height: 1.5; margin: 0 0 6px; }
.ag-cta__title {
color: #fff;
font-size: 38px;
font-weight: 900;
line-height: 1.25;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 12px;
}
.ag-cta__text { color: #fff; font-size: 18px; line-height: 1.5; margin-bottom: 24px; }
.ag-cta__text p { margin: 0 0 8px; }
.ag-cta__text p:last-child { margin-bottom: 0; }
.ag-cta__logos {
margin-top: 90px;
padding-top: 24px;
}
/* ≥768 — статичний ряд; на мобільному (≤767) swiper-слайдер, див. js/argentics.js */
.ag-cta__logos > .swiper-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 24px;
}
@media (min-width: 768px) {
.ag-cta__logos > .swiper-wrapper { transform: none !important; }
}
/* Прозорість 50% — на самих логотипах. На контейнері вона не працювала: він має anim-up,
а scroll-animate.css (підключений після argentics.css) ставить .anim-up.is-visible{opacity:1}. */
.ag-cta__logo { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-width: 120px; width: auto; height: auto; }
.ag-cta__logo img {
opacity: .5;
transition: opacity .25s;
height: 60px;
width: auto;
max-width: 100%;
object-fit: contain;
}
.ag-cta__logo:hover img { opacity: 1; }
@media (max-width: 767px) {
.ag-cta__logos > .swiper-wrapper { flex-wrap: nowrap; gap: 0; justify-content: flex-start; }
.ag-cta__logos .ag-cta__logo { flex: 0 0 auto; min-width: 0; }
}
/* ===========================================================
ABOUT
=========================================================== */
.ag-about {
position: relative;
background-size: cover;
background-position: center;
background-color: var(--ag-black2);
padding: 110px 0;
min-height: 700px;
display: flex;
align-items: center;
}
.ag-about__overlay {
position: absolute;
inset: 0;
background: rgba(4, 13, 33, .35);
}
.ag-about__inner { padding: 59px 0;position: relative; z-index: 2; width: 100%; display: flex; justify-content: flex-end; }
.ag-about__panel {
width: 633px;
max-width: 100%;
text-align: left;
padding: 38px 40px;
border-radius: 8px;
/*border: 2px solid rgba(85, 97, 176, 1);*/
/* Матове скло: розмиваємо фон секції позаду панелі.
ВАЖЛИВО: ні на панелі, ні на її предках не має бути transform / will-change / opacity,
інакше backdrop-filter вимикається. Тому анімацію винесено на .ag-about__panel-inner. */
-webkit-backdrop-filter: blur(36px);
backdrop-filter: blur(36px);
background: radial-gradient(75.31% 59.03% at 125% 272%,rgba(7.97, 0, 10.63, 0.2) 0%,rgba(255, 0, 199.75, 0) 100%),radial-gradient(227.02% 118.73% at 138% 164%,rgba(91.14, 111.4, 155.13, 0.2) 0%,rgba(70.22, 99.8, 163.63, 0) 100%),rgba(2, 11, 26, 0.05);
}
.ag-about__panel-inner {
display: flex;
flex-direction: column;
gap: 40px;
}
.ag-about__title {
color: #fff;
font-size: 38px;
font-weight: 900;
line-height: 1.25;
letter-spacing: 0;
text-transform: uppercase;
margin: 0;
}
.ag-about__text {
color: #fff;
font-size: 18px;
line-height: 1.5;
}
.ag-about__text p { margin: 0 0 18px; }
.ag-about__text p:last-child { margin-bottom: 0; }
.ag-about__arrow {
display: inline-block;
color: #fff;
line-height: 0;
transition: transform .3s, color .3s;
}
.ag-about__arrow:hover { color: var(--ag-green); transform: translate(3px, -3px); }
/* ===========================================================
CONTACT (white)
=========================================================== */
.ag-contact { background: #f5f5f5; color: var(--ag-black2); padding: 110px 0; }
.ag-contact__title {
text-align: center;
color: #000;
font-size: 38px;
font-weight: 900;
line-height: 1.25;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 40px;
}
.ag-contact__inner {
display: grid;
grid-template-columns: 1fr 630px;
align-items: end;
gap: 50px;
}
.wpcf7-list-item-label {
color: #A5A5A5;
font-family: var(--ag-font-ui);
font-size: 14px;
font-weight: 400;
line-height: 1.2;
}
.wpcf7-list-item {
display: flex;
align-items: center;
gap: 10px;
}
.wrapper-btn {
display: flex;
align-items: center;
}
.mt-90{
margin-top: 90px
}
.mt-24{
margin-top: 24px
}
.mb-40{
margin-bottom: 40px;
}
.ag-contact__media {
min-width: 0; /* щоб натуральний розмір картинки не розпирав грид-колонку */
display: flex;
justify-content: center; /* картинка по центру зони й може трохи виходити за межі колонки */
}
.ag-contact__media img {
width: auto; /* натуральний розмір, а не по ширині внутрішнього контейнера */
max-width: 120%; /* трохи більше за колонку; захист від надто великого файлу (1920px) */
height: auto;
display: block;
}
.ag-contact__form { padding: 32px; }
.ag-contact__form input[type="text"],
.ag-contact__form input[type="email"],
.ag-contact__form textarea {
width: 100%;
border: 0;
border-bottom: 1px solid #a5a5a5;
background: transparent;
padding: 12px 8px;
font-size: 14px;
line-height: 25px;
color: var(--ag-black2);
margin-bottom: 24px;
font-family: "Inter", inherit;
font-weight: 500;
}
.ag-contact__form input::placeholder,
.ag-contact__form textarea::placeholder { color: var(--ag-black2); opacity: 1; }
.ag-contact__form textarea { height: 158px; resize: vertical; }
.ag-contact__form input:focus,
.ag-contact__form textarea:focus { outline: none; border-color: var(--ag-green); }
.ag-contact__form input[type="submit"] {
background: var(--ag-green);
color: #fff;
border: 0;
border-radius: 5px;
min-height: 40px;
padding: 10px 24px;
font-family: var(--ag-font-ui);
font-weight: 700;
font-size: 14px;
line-height: 20px;
cursor: pointer;
transition: background .25s;
}
.ag-contact__form input[type="submit"]:hover { background: var(--ag-green-d); }
/* Кастомний чекбокс згоди: білий квадрат із сірою рамкою + зелена галочка */
.ag-contact__form input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 0;
border: 1px solid rgba(131, 130, 130, 1);
border-radius: 2px;
background: #fff;
cursor: pointer;
position: relative;
transition: border-color .2s;
}
.ag-contact__form input[type="checkbox"]:hover { border-color: var(--ag-green); }
.ag-contact__form input[type="checkbox"]:focus-visible {
outline: 2px solid var(--ag-green);
outline-offset: 1px;
}
.ag-contact__form input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid var(--ag-green); /* зелена галочка */
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Згода (acceptance): чекбокс + текст + посилання в один рядок */
.ag-contact__form .wpcf7-acceptance label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.ag-contact__form .wpcf7-acceptance .wpcf7-list-item-label {
display: inline; /* текст і посилання йдуть одним рядком */
}
.ag-contact__form .wpcf7-acceptance a {
color: var(--ag-black2); /* колір посилання Privacy Policy */
white-space: nowrap; /* «Privacy Policy» не переноситься навпіл */
}
.ag-contact__form .wpcf7-acceptance a:hover { color: var(--ag-green-d); }
/* ===========================================================
BLOG / Recent publications
=========================================================== */
.ag-blog { background: var(--ag-black2); padding: 110px 0; }
.ag-blog .ag-section-title { margin-bottom: 40px; }
.ag-blog__intro {
max-width: 900px;
margin: 0 auto 90px;
text-align: center;
color: #fff;
font-size: 18px;
line-height: 1.5;
}
.ag-blog__list { display: flex; flex-direction: column; gap: 18px; }
.ag-blog__row {
display: grid;
grid-template-columns: 431px 1fr;
gap: 24px;
align-items: stretch;
background: #182032;
border-radius: 8px;
overflow: hidden;
padding: 15px;
min-height: 285px;
}
.backarticle-empty .ag-blog__row {
padding: 0;
background: none;
}
.ag-blog__thumb { display: block; position: relative; border-radius: 8px; overflow: hidden; }
.ag-blog__thumb-link { position: absolute; inset: 0; display: block;z-index: 1 }
/* Картинка абсолютна → не задає висоту рядка сама, а розтягується під висоту контенту справа */
.ag-blog__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-blog__body {
display: flex;
flex-direction: column;
gap: 8px;
justify-content: flex-start;
padding: 24px 24px 24px 0;
}
.ag-blog__date {
color: #5f6571;
font-family: var(--ag-font-ui);
font-size: 18px;
line-height: 1.5;
letter-spacing: 1px;
margin-bottom: 16px;
}
.ag-blog__sep { color: var(--ag-green); } /* зелена крапка-роздільник */
.ag-blog__read { text-transform: uppercase; } /* «5 MIN READ» */
.ag-blog__post-title { margin: 0; font-size: 38px; font-weight: 900; text-transform: uppercase; line-height: 1.21; letter-spacing: 0; }
.ag-blog__post-title a { color: #fff; text-decoration: none; }
.ag-blog__post-title a:hover { color: var(--ag-green); }
.ag-blog__excerpt { color: #fff; font-size: 18px; line-height: 1.5; margin: 0; }
.ag-blog__more { display: flex; justify-content: center; margin-top: 90px; }
/* ---- Blog archive (ag_posts) additions ---- */
.ag-blog__thumb { position: relative; }
.ag-blog__cat {
position: absolute;
top: 16px;
left: 16px;
background:
radial-gradient(60% 120% at 120% 200%, rgba(91, 111, 155, .2) 0%, rgba(70, 100, 164, 0) 100%),
rgba(2, 11, 26, .25);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
color: #fff;
font-size: 15px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
padding: 7px 14px;
border-radius: 4px;
z-index: 2; /* поверх посилання-картинки, щоб рубрика клікалась */
text-decoration: none;
transition: color .2s;
}
.ag-blog__cat:hover { color: var(--ag-green); }
.ag-posts__pager { margin-top: 40px; display: flex; justify-content: center; }
.ag-posts__pager ul { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; }
.ag-posts__pager a.ag-page,
.ag-posts__pager span.ag-page {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 6px;
background: var(--ag-card);
color: #e7ebf0;
text-decoration: none;
font-size: 14px;
transition: background .25s, color .25s;
}
.ag-posts__pager a.ag-page:hover,
.ag-posts__pager span.ag-page.current { background: var(--ag-green); color: #fff; }
.ag-posts__empty { text-align: center; color: var(--ag-muted); }
/* ===========================================================
NEWSLETTER subscribe
=========================================================== */
.ag-newsletter {
position: relative;
background: linear-gradient(180deg, #040d21 0%, #121833 100%); /* Figma bg */
padding: 110px 0;
text-align: center;
overflow: hidden;
}
/* Свічення (Figma Ellipse 5: розмитий еліпс #433A6D) */
.ag-newsletter__glow {
position: absolute;
bottom: -50px;
left: 0;
z-index: 0;
pointer-events: none;
filter: blur(484px);
background: rgba(67, 58, 109, 1);
opacity: 0.8;
width: 604px;
height: 298px;
}
/* Дино зліва — блідий декоративний шар (Figma: opacity .7, blend luminosity) */
.ag-newsletter__figure {
position: absolute;
left: 200px;
bottom: 0;
width: clamp(280px, 34vw, 642px);
opacity: .7;
mix-blend-mode: luminosity;
z-index: 1;
pointer-events: none;
}
.ag-newsletter__figure img { width: 100%; height: auto; display: block; }
.ag-newsletter__inner { position: relative; z-index: 2; }
.ag-newsletter__title {
color: #fff;
font-size: 38px;
font-weight: 900;
text-transform: uppercase;
line-height: 1.25;
margin: 0 0 24px;
}
.ag-newsletter__text {
max-width: 1141px;
margin: 0 auto 24px;
color: #fff;
font-size: 18px;
line-height: 1.5;
}
.ag-newsletter__text p { margin: 0; }
/* Форма-картка (Figma 1:11926): поле + кнопка одна під одною, по центру */
.ag-newsletter__form form,
.ag-newsletter__form .wpcf7-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
max-width: 630px;
margin: 0 auto;
padding: 32px 32px 24px 32px;
}
.ag-newsletter__form .wpcf7-form p {
margin: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.ag-newsletter__form .wpcf7-form br { display: none; }
.ag-newsletter__form .hidden-fields-container { display: none; }
.ag-newsletter__form .wpcf7-response-output { width: 100%; margin: 8px 0 0; }
.ag-newsletter__form .wpcf7-form-control-wrap { display: block; width: 100%; }
.ag-newsletter__form input[type="email"],
.ag-newsletter__form input[type="text"] {
width: 100%;
min-height: 46px;
background: transparent;
border: 0;
border-bottom: 1px solid #fff;
color: #fff;
padding: 10px 8px;
font-size: 14px;
font-weight: 500;
font-family: inherit;
}
.ag-newsletter__form input::placeholder { color: #fff; opacity: 1; }
.ag-newsletter__form input:focus { outline: none; border-bottom-color: var(--ag-green); }
.ag-newsletter__form input[type="submit"],
.ag-newsletter__form button[type="submit"],
.ag-newsletter__form .wpcf7-submit {
padding: 10px 26px;
background: var(--ag-green);
color: #fff;
border: 0;
border-radius: 5px;
font-family: var(--ag-font-ui);
font-weight: 700;
font-size: 14px;
line-height: 1.4;
cursor: pointer;
transition: background .2s;
}
.ag-newsletter__form .wpcf7-spinner { margin: 0; }
.ag-newsletter__form input[type="submit"]:hover,
.ag-newsletter__form button[type="submit"]:hover,
.ag-newsletter__form .wpcf7-submit:hover { background: var(--ag-green-d); }
/* White newsletter on a single post (Figma) — only when no bg image is set */
.single-post .ag-newsletter:not(.ag-newsletter--bg) { background: #fff; }
.single-post .ag-newsletter:not(.ag-newsletter--bg) .ag-newsletter__glow { display: none; }
.single-post .ag-newsletter:not(.ag-newsletter--bg) .ag-newsletter__title,
.single-post .ag-newsletter:not(.ag-newsletter--bg) .ag-newsletter__text,
.single-post .ag-newsletter:not(.ag-newsletter--bg) .ag-newsletter__text p { color: var(--ag-black2); }
.single-post .ag-newsletter:not(.ag-newsletter--bg) .ag-newsletter__form input[type="email"],
.single-post .ag-newsletter:not(.ag-newsletter--bg) .ag-newsletter__form input[type="text"] {
color: var(--ag-black2);
border-bottom-color: rgba(4, 13, 33, .25);
}
.single-post .ag-newsletter:not(.ag-newsletter--bg) .ag-newsletter__form input::placeholder { color: rgba(4, 13, 33, .5); }
.single-post .ag-newsletter:not(.ag-newsletter--bg) .ag-newsletter__form input:focus { border-color: var(--ag-green); }
/* blog "load more" */
.ag-posts__loadmore { display: flex; justify-content: center; margin-top: 90px; }
.ag-loadmore-btn.is-loading { opacity: .7; pointer-events: none; }
/* ===========================================================
FAQ
=========================================================== */
.ag-faq {
position: relative;
background-color: var(--ag-dark-2);
padding: 110px 0 0 0;
overflow: hidden;
}
/* Світіння як у Figma (QA 1:7363: Ellipse 2 582×548, #0e1d3d, layer blur 484 ≈ CSS blur 242).
PNG з обрізаними краями давав видимий горизонтальний стик — CSS-розмиття його не має. */
.ag-faq::before {
content: "";
position: absolute;
top: 245px;
left: calc(50% - 25px);
width: 582px;
height: 548px;
transform: translateX(-50%);
z-index: 0;
pointer-events: none;
border-radius: 50%;
background: #0e1d3d;
filter: blur(242px);
}
.ag-faq > .container { position: relative; z-index: 1; }
.ag-faq .ag-section-title { margin-bottom: 40px; }
.ag-faq__inner {
display: grid;
grid-template-columns: 460px 1fr;
align-items: center;
gap: 50px;
}
/* Картинка притиснута до низу секції (padding-bottom у .ag-faq = 0). */
.ag-faq__media { align-self: end; }
.ag-faq__media img {
width: 100%; height: auto; display: block; border-radius: 8px;
}
/* Відступи саме у списку, а не в секції: низ секції тримає притиснуту картинку. */
.ag-faq__list {
display: flex;
flex-direction: column;
width: 100%;
max-width: 631px;
margin-left: auto;
padding-right: 40px;
padding-bottom: 60px;
}
.ag-faq__item { border-bottom: 1px solid var(--ag-line); }
.ag-faq__item.is-open { border-bottom-color: transparent; }
.ag-faq__question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
color: var(--ag-lgray);
font-size: 18px;
font-weight: 900;
line-height: 1.25;
text-transform: uppercase;
letter-spacing: 0;
padding: 16.5px 0;
}
.ag-faq__arrow {
flex: 0 0 auto;
transition: transform .3s;
padding: 8px 6px;
}
.ag-faq__item.is-open .ag-faq__arrow { transform: rotate(-180deg)}
.ag-faq__answer {
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
}
.ag-faq__item.is-open .ag-faq__answer { max-height: 600px; }
.ag-faq__answer-inner {
padding: 24px 0;
color: #fff;
font-family: var(--ag-font-ui);
font-size: 14px;
line-height: 1.5;
}
/* ===========================================================
PRODUCTION SERVICES — intro + grouped accordions (AR / VR)
Figma ar-vr 1:10470: Inter (не PT Sans), группы — стеклянные панели,
акордеон слева, заголовки #4AC882 24px.
=========================================================== */
.ag-prod {
position: relative;
background-color: var(--ag-dark-2);
background-size: cover;
background-position: center;
padding: 110px 0;
color: var(--ag-text);
text-align: center;
}
.ag-prod__groups{
display: flex;
flex-direction: column;
gap: 90px;
margin-top: 90px;
}
.ag-prod__overlay {
position: absolute;
inset: 0;
background: rgba(10, 22, 38, .82);
z-index: -1;
}
.ag-prod .container { position: relative; z-index: 1; }
.ag-prod .ag-prod__title span { color: #0ac882; }
.ag-prod__intro {
max-width: 1114px;
margin: 0 auto;
color: var(--ag-text);
font-size: 18px;
line-height: 1.5;
}
.ag-prod__intro p { margin: 0; }
.ag-prod__group {
max-width: 1114px;
width: 100%;
margin: 0 auto;
padding: 40px;
border: 2px solid #55858d;
border-radius: 8px;
background:
radial-gradient(60% 120% at 120% 200%, rgba(91, 111, 155, .2) 0%, rgba(70, 100, 164, 0) 100%),
rgba(2, 11, 26, .05);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.ag-prod__group-title {
text-align: center;
color: var(--ag-text);
font-weight: 900;
font-size: 38px;
line-height: 1.25;
text-transform: uppercase;
margin: 0 0 40px;
}
.ag-prod__group-text {
max-width: 904px;
margin: 0 auto 42px;
text-align: center;
color: var(--ag-text);
font-size: 18px;
line-height: 1.5;
}
.ag-prod__group-text p { margin: 0; }
.ag-prod__list {
display: flex;
flex-direction: column;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 16px 0;
}
.ag-prod__item { border-bottom: 1px solid var(--ag-line); }
.ag-prod__q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
color: var(--ag-green3);
font-size: 24px;
font-weight: 900;
line-height: 1.25;
text-transform: uppercase;
letter-spacing: 0;
padding: 16px 0;
}
.ag-prod__arrow {
flex: 0 0 auto;
width: 10px;
height: 10px;
margin: 0 7px 4px 0;
border-right: 2px solid var(--ag-text);
border-bottom: 2px solid var(--ag-text);
transform: rotate(45deg);
transition: transform .3s;
}
.ag-prod__item.is-open .ag-prod__arrow { transform: rotate(-135deg); margin-bottom: -4px; }
.ag-prod__answer {
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
}
.ag-prod__item.is-open .ag-prod__answer { max-height: 900px; }
.ag-prod__answer-inner {
padding: 8px 0 24px;
text-align: left;
color: var(--ag-text);
font-size: 18px;
line-height: 1.5;
}
.ag-prod__answer-inner p { margin: 0 0 16px; }
.ag-prod__answer-inner p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
.ag-prod { padding: 64px 0; }
.ag-prod__groups { gap: 40px; margin-top: 48px; }
.ag-prod__group { padding: 24px 16px; }
.ag-prod__group-title { margin-bottom: 20px; }
.ag-prod__group-text { margin-bottom: 24px; }
}
/* ===========================================================
PAGE HERO — breadcrumb + title + subtitle + side image
=========================================================== */
.ag-pagehero {
position: relative;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
background-color: var(--ag-black2);
color: #fff;
padding: 142px 0 64px;
display: flex;
overflow: hidden;
/* Висота секції = пропорції завантаженого зображення (--ag-hero-ar задає PHP
з width/height картинки). Тому на десктопі фон показується ПОВНІСТЮ, на
всю ширину, без обрізки. min-height — «підлога» під текст: на вузьких
екранах, де пропорційна висота стала б меншою за текст, секція тримає цю
мінімальну висоту, а фон кадрується (cover). */
/* Висота за пропорціями як min-height, а не aspect-ratio: з явним min-height
aspect-ratio не дає блоку рости під контент (на 834–1100 текст залазив у нижній відступ). */
min-height: max(480px, calc(100vw / (var(--ag-hero-ar, 1920 / 778))));
/* Явна ширина обов'язкова: інакше min-height через aspect-ratio переноситься
на мінімальну ширину (480 × 1920/778 ≈ 1180px) і на планшеті/мобільному
секція розпирає сторінку — обрізаний заголовок, бургер за екраном. */
width: 100%;
}
/* Планшет/телефон: фон кадрується (cover) — точку кадру по X задає ACF bg_focus_mobile */
@media (max-width: 1024px) {
.ag-pagehero { background-position: var(--ag-hero-fx, 50%) top; }
}
/* Планшет: у макетах hero вищий (about us 834, 1:11265 — 551px), інакше cover зменшує й
обрізає персонажів */
@media (min-width: 768px) and (max-width: 1024px) {
.ag-pagehero { min-height: 551px; }
}
.ag-pagehero__overlay {
position: absolute;
inset: 0;
/* Верхній шар фону з Figma: темний градієнт зверху, що зникає до ~28% висоти.
Знизу лежить картинка (background-image секції) і базовий колір #040d21. */
background: linear-gradient(180deg, rgba(8, 13, 33, 1) 0.597%, rgba(0, 0, 0, 0) 27.648%);
}
/* Телефон (Figma 3D art 375, 1:28258): картинка — смуга ~400px зверху на всю ширину
(персонаж видно цілком, а не збільшений cover на всю висоту блоку), нижче — темний фон
під підзаголовком. Низ смуги плавно переходить у фон. Лише телефон: на 541–767 блок лише ~420px
заввишки — смуга + затемнення давали темну «підкладку» під текстом. */
@media (min-width: 541px) and (max-width: 767px) {
/* section.… — щоб перебити загальний блок ≤768 нижче у файлі (min-height 420, content 100%) */
section.ag-pagehero { min-height: 480px; }
/* текст не на всю ширину — інакше заголовок в один рядок іде поверх персонажа */
.ag-pagehero .ag-pagehero__content { max-width: 520px; }
}
@media (max-width: 540px) {
.ag-pagehero { background-size: auto 400px; }
.ag-pagehero__overlay {
background: linear-gradient(180deg, rgba(4, 13, 33, .55) 0, rgba(4, 13, 33, 0) 120px,
rgba(4, 13, 33, 0) 290px, #040d21 400px);
}
}
.ag-pagehero__inner { position: relative; z-index: 2; width: 100%; }
.ag-pagehero__content { max-width: 636px; }
.ag-pagehero__crumb { font-family: var(--ag-font-ui); font-size: 14px; line-height: 25px; color: #fff; margin-bottom: 24px; }
.ag-pagehero__crumb a { color: #fff; text-decoration: none; }
.ag-pagehero__crumb a:hover { color: var(--ag-green); }
.ag-pagehero__title {
font-size: 50px;
line-height: 60px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 16px;
}
.ag-pagehero__subtitle { color: #fff; font-size: 18px; line-height: 1.5; }
.ag-pagehero__subtitle p { margin: 0 0 12px; }
.ag-pagehero__subtitle p:last-child { margin-bottom: 0; }
.ag-pagehero__image {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 58%;
max-width: 920px;
z-index: 1;
pointer-events: none;
}
.ag-pagehero__image img { width: 100%; height: auto; display: block; }
/* ===========================================================
CONTACT HERO — banner + promo columns on one bg (Contact page)
=========================================================== */
.ag-contacthero {
position: relative;
background-color: #020816;
background-size: cover;
background-position: center;
color: #fff;
padding: 150px 0 110px;
overflow: hidden;
}
.ag-contacthero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, #040d21 0%, rgba(4, 13, 33, .15) 42%, rgba(4, 13, 33, .5) 100%),
linear-gradient(90deg, rgba(4, 13, 33, .7) 0%, rgba(4, 13, 33, .2) 70%, rgba(4, 13, 33, 0) 100%);
}
.ag-contacthero__image {
position: absolute;
right: max(24px, calc(50% - 700px));
top: 17%;
width: 680px;
max-width: 42%;
z-index: 1;
pointer-events: none;
}
.ag-contacthero__image img { width: 100%; height: auto; display: block; }
.ag-contacthero__inner { position: relative; z-index: 2; }
.ag-contacthero__head { max-width: 636px; padding: 15px 0 64px; }
.ag-contacthero__crumb { font-family: var(--ag-font-ui); font-size: 14px; line-height: 25px; color: #fff; margin-bottom: 21px; }
.ag-contacthero__crumb a { color: #fff; text-decoration: none; }
.ag-contacthero__crumb a:hover { color: var(--ag-green); }
.ag-contacthero__title {
font-size: 50px;
line-height: 60px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 30px;
}
.ag-contacthero__subtitle { color: #fff; font-size: 18px; line-height: 1.5; }
.ag-contacthero__subtitle p { margin: 0 0 12px; }
.ag-contacthero__subtitle p:last-child { margin-bottom: 0; }
.ag-contacthero__grid {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 90px;
margin-top: 170px;
margin-bottom: 33px;
padding: 17px 50px;
border-radius: 8px;
background: radial-gradient(75.31% 59.03% at 125% 272%,rgba(7.97, 0, 10.63, 0.2) 0%,rgba(255, 0, 199.75, 0) 100%)/* Warning: The gradient rotation method is not CSS-compliant and may lead to inconsistent rendering. */,radial-gradient(227.02% 118.73% at 138% 164%,rgba(91.14, 111.4, 155.13, 0.2) 0%,rgba(70.22, 99.8, 163.63, 0) 100%)/* Warning: The gradient rotation method is not CSS-compliant and may lead to inconsistent rendering. */,rgba(2, 11, 26, 0.05);
opacity: 0.88;
-webkit-backdrop-filter: blur(36px);
backdrop-filter: blur(36px);
}
.ag-contacthero__card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ag-contacthero__card-title {
color: #fff;
font-size: 38px;
line-height: 1.2;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
margin: 0;
min-height: 125px;
display: flex;
align-items: center;
}
.ag-contacthero__card-text { color: #fcf9f9; font-size: 18px; line-height: 1.5; margin: 0; }
.ag-contacthero__card-text p { margin: 0 0 10px; }
.ag-contacthero__card-text p:last-child { margin-bottom: 0; }
.ag-contacthero__btn {
margin-top: 20px;
}
/* ===========================================================
PROMOS — two cards (Have a project / Want a job)
=========================================================== */
.ag-promos { background: var(--ag-black2); padding: 0 0 90px; }
.ag-promos .ag-section-title { margin-bottom: 40px; }
.ag-promos__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 90px;
padding: 38px 50px;
border-radius: 8px;
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(255, 255, 255, .08);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.ag-promos__card { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ag-promos__card-title {
color: #fff;
font-size: 38px;
line-height: 1.2;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
margin: 0;
}
.ag-promos__card-text { color: #fcf9f9; font-size: 18px; line-height: 1.5; margin: 0; }
.ag-promos__card-text p { margin: 0 0 10px; }
.ag-promos__card-text p:last-child { margin-bottom: 0; }
.ag-promos__btn { margin: 0; }
/* ===========================================================
OUR STORY — image + multi-column text
=========================================================== */
.ag-story { background: var(--ag-dark-2); padding: 90px 0; }
.ag-story .ag-section-title { text-align: center; }
.ag-story .ag-section-subtitle { margin-bottom: 40px; text-align: center; }
.ag-story__inner { display: block; }
/* image variant (kept for other pages that supply an image) */
.ag-story__inner:has(.ag-story__media) {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 56px;
align-items: center;
}
.ag-story__media img { width: 100%; height: auto; display: block; border-radius: 12px; }
/* About design: centered frosted-glass panel, no image */
.ag-story__text {
max-width: 820px;
margin: 0 auto;
padding: 40px;
color: #fff;
font-size: 18px;
line-height: 1.5;
text-align: center;
background:
radial-gradient(60% 120% at 120% 200%, rgba(91, 111, 155, .18) 0%, rgba(70, 100, 164, 0) 100%),
rgba(2, 11, 26, .05);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
border-radius: 8px;
}
.ag-story__inner:has(.ag-story__media) .ag-story__text {
max-width: none; margin: 0; padding: 0; text-align: left;
background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
color: var(--ag-muted); font-size: 15px;
}
.ag-story__text p { margin: 0 0 16px; }
.ag-story__text p:last-child { margin-bottom: 0; }
/* ===========================================================
HOW WE WORK — image + numbered steps
=========================================================== */
.ag-steps { background: var(--ag-dark-2); padding: 80px 0; }
.ag-steps .ag-section-subtitle { margin-bottom: 44px; }
.ag-steps__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.ag-steps__media img { width: 100%; height: auto; display: block; }
.ag-steps__list { display: flex; flex-direction: column; gap: 26px; }
.ag-steps__item {
position: relative;
padding-left: 22px;
border-left: 2px solid var(--ag-green);
}
.ag-steps__num {
display: block;
color: var(--ag-green);
font-size: 13px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 6px;
}
.ag-steps__title {
color: #fff;
font-size: 19px;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 8px;
}
.ag-steps__text { color: var(--ag-muted); font-size: 14px; }
.ag-steps__text p { margin: 0; }
/* ===========================================================
MERGED: OUR STORY + HOW WE WORK (ag_story + ag_steps → Section.png)
=========================================================== */
.ag-storysteps {
position: relative;
background: #070c1f; /* Figma section bg */
color: #fff;
padding: 110px 0;
overflow: hidden; /* обрізає світіння, персонажа та fade */
}
/* Верхнє світіння — картинка з Figma (Ellipse-2.webp, розмиття вже впечене) */
.ag-storysteps__glow {
position: absolute;
top: -420px; /* підіймаємо, щоб світіння лягло у верхню частину секції */
left: 50%;
transform: translateX(-50%);
width: min(1500px, 120%);
aspect-ratio: 1681 / 1380; /* пропорції вихідного зображення */
background: url(/wp-content/uploads/2026/07/Ellipse-2.webp) no-repeat center / contain;
z-index: 0;
pointer-events: none;
}
/* Персонаж зліва (Figma: opacity .54, зверху секції, іде донизу) */
.ag-storysteps__figure {
position: absolute;
left: 0;
top: 200px;
width: clamp(320px, 46vw, 900px);
opacity: .54;
z-index: 1;
pointer-events: none;
}
.ag-storysteps__figure img { width: 100%; height: auto; display: block; }
/* Затемнення низу секції (Figma layer "blur": прозоро зверху → #060B1F знизу) */
.ag-storysteps__fade {
background: linear-gradient(180.00deg, rgba(8, 13, 32, 0) 36.842%,rgba(6, 11, 31, 0.97) 100%);
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
/* Контент */
.ag-storysteps__inner {
position: relative;
z-index: 3;
max-width: var(--ag-maxw);
margin: 0 auto;
padding: 0 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 90px;
}
.ag-storysteps__title {
margin: 0;
color: #fff;
font-size: 38px;
font-weight: 900;
line-height: 1.25;
text-transform: uppercase;
text-align: center;
}
.ag-storysteps__head {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.ag-storysteps__subtitle {
margin: 0;
max-width: 759px;
color: #fff;
font-size: 18px;
line-height: 1.5;
text-align: center;
}
/* Панель Story — матове скло на всю ширину (Figma 1:10741) */
.ag-storysteps__panel {
width: 100%;
padding: 40px;
border-radius: 8px;
background: radial-gradient(75.31% 59.03% at 125% 272%, rgba(7.97, 0, 10.63, 0.2) 0%, rgba(255, 0, 199.75, 0) 100%) /* Warning: The gradient rotation method is not CSS-compliant and may lead to inconsistent rendering. */, radial-gradient(227.02% 118.73% at 138% 164%, rgba(91.14, 111.4, 155.13, 0.2) 0%, rgba(70.22, 99.8, 163.63, 0) 100%) /* Warning: The gradient rotation method is not CSS-compliant and may lead to inconsistent rendering. */, rgba(2, 11, 26, 0.05);
}
.ag-storysteps__panel-text {
max-width: 740px;
margin: 0 auto;
color: #fff;
font-size: 18px;
line-height: 1.5;
text-align: center;
}
.ag-storysteps__panel-text p { margin: 0 0 27px; }
.ag-storysteps__panel-text p:last-child { margin: 0; }
/* Кроки (Figma 1:10747): іконка 62px + Step N (біле) / назва (зелена) + білий текст */
.ag-storysteps__list {
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
width: 100%;
}
.ag-storysteps__item {
display: flex;
align-items: flex-start;
gap: 30px;
width: 788px;
max-width: 100%;
}
.ag-storysteps__check { flex: 0 0 auto; width: 62px; height: 62px; }
.ag-storysteps__check img { width: 100%; height: 100%; display: block; }
.ag-storysteps__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.ag-storysteps__step-title {
margin: 0;
font-size: 24px;
font-weight: 900;
line-height: 1.25;
text-transform: uppercase;
}
.ag-storysteps__num { color: #fff; }
.ag-storysteps__name { color: #4ac782; }
.ag-storysteps__text { color: #fff; font-size: 18px; line-height: 1.5; }
.ag-storysteps__text p { margin: 0; }
@media (max-width: 768px) {
.ag-storysteps { padding: 64px 0; }
.ag-storysteps__inner { gap: 56px; }
.ag-storysteps__figure { width: 72%; opacity: .32; top: 200px; }
.ag-storysteps__panel { padding: 28px 20px; }
.ag-storysteps__item { gap: 16px; width: 100%; }
.ag-storysteps__check { width: 48px; height: 48px; }
.ag-storysteps__step-title { font-size: 20px; }
}
/* ===========================================================
WHAT WE DO — services grid
=========================================================== */
.ag-whatwedo {
position: relative;
background: var(--ag-dark);
background-size: cover;
background-position: center;
padding: 110px 0;
}
.ag-whatwedo__inner { position: relative; z-index: 2; }
/* ACF bg_fit = width (Figma ar-vr 1:10388): фон — неонова лінія на темному тлі; cover збільшував
картинку, коли секція вища за неї, і рожевий підйом лінії праворуч зрізався. Тепер картинка
завжди на всю ширину, решта — колір країв картинки (#050d21) без видимого шва. */
@media (min-width: 768px) {
/* no-repeat: інакше над/під картинкою виднівся шматок її сусідньої копії. Прив'язка до низу
(32px від низу): секція вища за макет (948 vs 854), а панель стоїть від низу — так лінія
лягає відносно панелі як у Figma 1:10388 (дуга ≈ на середині панелі, «галочка» біля її низу).
Вгорі в картинці лінії немає, тож зверху нічого не обривається. */
.ag-whatwedo--bg-width {
background-size: 100% auto;
background-position: center bottom 32px;
background-repeat: no-repeat;
background-color: #090e21;
}
}
.ag-whatwedo .ag-section-title { text-align: center; }
.ag-whatwedo .ag-section-subtitle { padding-bottom: 24px; text-align: center; }
/* About design: grid sits on a frosted-glass panel */
.ag-whatwedo__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 60px 42px;
max-width: 1036px;
margin: 0 auto;
padding: 40px;
background:
radial-gradient(60% 120% at 120% 200%, rgba(91, 111, 155, .18) 0%, rgba(70, 100, 164, 0) 100%),
rgba(2, 11, 26, .05);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
border-radius: 8px;
margin-top: 90px;
}
/* Column-count variants (desktop) — collapse on smaller screens below */
.ag-whatwedo__grid--cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.ag-whatwedo__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ag-whatwedo__grid--cols-4 { grid-template-columns: repeat(4, 1fr); max-width: none; gap: 48px 32px; }
/* swiper.css ставить .swiper-wrapper { box-sizing: content-box } → сітка = 100% + 2×40px padding
і виходила за контейнер, а .swiper має overflow:hidden — права колонка й скляна панель
обрізались (AR-VR, 4 колонки; 3 колонки — на ~1100px). border-box + max-width з урахуванням
padding (1036+80, 760+80) — десктопні розміри ті самі. */
.ag-whatwedo__slider:not(.is-slider) > .ag-whatwedo__grid { box-sizing: border-box; max-width: 1116px; }
.ag-whatwedo__slider:not(.is-slider) > .ag-whatwedo__grid--cols-2 { max-width: 840px; }
.ag-whatwedo__slider:not(.is-slider) > .ag-whatwedo__grid--cols-4 { max-width: none; }
.ag-whatwedo__title {
line-height: 1.25;
font-size: 24px;
font-weight: 900;
text-transform: uppercase;
margin: 0 0 30px;
min-height: 56px;
color: var(--ag-text);
}
.ag-whatwedo__marker { display: inline; font-weight: 900;color: var(--ag-green3);margin-right: 10px; }
.ag-whatwedo__marker::before { content: "#"; }
.ag-whatwedo__text {
color: var(--ag-text);
font-size: 14px;
font-weight: 500;
line-height: 25px;
}
.ag-whatwedo__text p { margin: 0; }
/* ===========================================================
OUR WORKS — full-width project banners
=========================================================== */
.ag-works { background: var(--ag-dark); padding: 80px 0 40px }
.ag-works .ag-section-subtitle { margin-bottom: 40px; }
/* first dark block sits under the transparent fixed header — reserve its height */
body.has-hero-banner .wrapper-content > .ag-works:first-child,
body.has-hero-banner .wrapper-content > .ag-gallery:first-child {
padding-top: calc(var(--ag-header-h) + 46px);
}
.ag-works__list { display: flex; flex-direction: column; gap: 26px; }
.ag-works__item {
position: relative;
border-radius: 8px;
min-height: 397px;
background-size: cover;
background-position: center;
background-color: var(--ag-card);
padding: 20px;
}
.ag-works__overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(8, 14, 24, .85) 0%, rgba(8, 14, 24, .45) 50%, rgba(8, 14, 24, .15) 100%);
}
.ag-works__item--right .ag-works__overlay {
background: linear-gradient(270deg, rgba(8, 14, 24, .85) 0%, rgba(8, 14, 24, .45) 50%, rgba(8, 14, 24, .15) 100%);
}
.ag-works__content {
position: relative;
z-index: 2;
max-width: 48%;
}
.ag-works__item--left .ag-works__content {
text-align: right;
}
.ag-works__item--right .ag-works__content { margin-left: auto; text-align: left; }
.ag-works__label {
display: block;
color: var(--ag-text);
font-size: 16px;
letter-spacing: .18em;
text-transform: uppercase;
margin-bottom: 24px;
padding: 10px 0;
font-family: var(--ag-font-ui);
}
.ag-works__logo {
max-height: 200px;
width: auto;
margin-bottom: 24px;
display: block;
}
.ag-works__item--left .ag-works__logo{
margin-left: auto;
}
.ag-works__title {
color: #fff;
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
line-height: 1.15;
margin: 0 0 14px;
}
.ag-works__text {
color: var(--ag-text);
font-size: 18px;
margin-bottom: 16px;
}
.ag-works__text p { margin: 0 0 8px; }
/* foreground character (PNG cutout), opposite the content side */
.ag-works__figure {
position: absolute;
z-index: 1;
inset: 0 auto 0 0;
width: 54%;
display: flex;
align-items: flex-end;
justify-content: flex-start;
pointer-events: none;
}
.ag-works__item--left .ag-works__figure { inset: 0 0 0 auto; justify-content: flex-end; }
/* Figma portfolio 1:3604: персонаж може виходити вгору над банером, але знизу й зі свого
краю банера обрізаний урівень (зсуви з ACF виносили його за низ/бік банера) */
.ag-works__item--right .ag-works__figure { clip-path: inset(-100vh -100vw 0 0 round 0 0 0 8px); }
.ag-works__item--left .ag-works__figure { clip-path: inset(-100vh 0 0 -100vw round 0 0 8px 0); }
.ag-works__figure img {
display: block; /* inline-картинка лишала під собою ~6px (базова лінія) — персонаж «висів» над низом */
max-height: 130%;
max-width: 100%;
width: auto;
object-fit: contain;
object-position: bottom center;
filter: drop-shadow(12px -6px 22px rgba(0, 0, 0, .42));
}
/* ===========================================================
FEATURED ART WORKS — bento mosaic gallery
=========================================================== */
.ag-gallery { background: var(--ag-dark);padding: 50px 0 110px }
.ag-gallery .ag-section-subtitle { margin-bottom: 40px; }
/* first image = full-width banner, natural height (not cropped) */
.ag-gallery__banner {
display: block;
border-radius: 8px;
overflow: hidden;
margin-bottom: 12px;
}
.ag-gallery__banner img { width: 100%; height: auto; display: block; }
/* the rest = fixed bento mosaic (explicit placement per the design) */
.ag-gallery__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 260px;
gap: 12px;
grid-template-areas:
"t2 t3 t3"
"t2 t4 t4"
"t5 t4 t4"
"t6 t7 t7"
"t8 t8 t9"
"t8 t8 t10"
"t11 t11 t10"
"t12 t13 t13";
}
.ag-gallery__item { display: block; position: relative; border-radius: 8px; overflow: hidden; }
.ag-gallery__item:nth-child(1) { grid-area: t2; }
.ag-gallery__item:nth-child(2) { grid-area: t3; }
.ag-gallery__item:nth-child(3) { grid-area: t4; }
.ag-gallery__item:nth-child(4) { grid-area: t5; }
.ag-gallery__item:nth-child(5) { grid-area: t6; }
.ag-gallery__item:nth-child(6) { grid-area: t7; }
.ag-gallery__item:nth-child(7) { grid-area: t8; }
.ag-gallery__item:nth-child(8) { grid-area: t9; }
.ag-gallery__item:nth-child(9) { grid-area: t10; }
.ag-gallery__item:nth-child(10) { grid-area: t11; }
.ag-gallery__item:nth-child(11) { grid-area: t12; }
.ag-gallery__item:nth-child(12) { grid-area: t13; }
.ag-gallery__item.is-hidden { display: none; }
.ag-gallery__banner picture { display: block; width: 100%; }
.ag-gallery__item picture { display: block; width: 100%; height: 100%; }
.ag-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s;
}
.ag-gallery__item:hover img { transform: scale(1.04); }
.ag-gallery__more { text-align: center; margin-top: 34px; }
/* ===========================================================
404
=========================================================== */
.ag-404 {
position: relative;
background-color: var(--ag-black2);
background-size: cover;
background-position: center;
color: #fff;
min-height: 80vh;
text-align: center;
padding: 145px 0 70px;
overflow: hidden;
background-position-y: top;
}
.ag-404__overlay {
position: absolute;
inset: 0;
background: rgba(4, 13, 33, .36);
}
.ag-404__inner {
position: relative;
z-index: 2;
max-width: 636px;
margin: 0 auto;
padding: 20px 24px;
}
.ag-404__label {
font-size: 50px;
line-height: 60px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
color: #fff;
margin: 0;
overflow-wrap: break-word;
}
.ag-404__code {
font-size: 250px;
line-height: .8;
font-weight: 300;
color: rgba(255, 255, 255, .44);
letter-spacing: 0;
text-transform: uppercase;
margin: 38px 0 0;
}
.ag-404__text { color: #fff; font-size: 18px; line-height: 1.5; margin: 38px auto 0; max-width: 636px; }
.ag-404__btn { margin: 48px 0 0; }
/* ===========================================================
SERVICE CARDS — image + title + text + link
=========================================================== */
.ag-cards { background: var(--ag-dark); padding: 80px 0; }
.ag-cards .ag-section-subtitle { max-width: 760px; margin-left: auto; margin-right: auto; margin-bottom: 46px; }
:is(h1, h2, h3, h4, h5, h6) :is(span, b, strong),
.ag-section-title :is(span, b, strong) { color: var(--ag-green); font-weight: inherit; }
.ag-cards__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 464px));
justify-content: center;
gap: 12px;
margin-top: 90px;
}
.ag-cards__card {
border-radius: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ag-pagehero+.ag-cards{
padding-top: 0
}
.ag-cards__media { aspect-ratio: 16 / 10; overflow: hidden;margin-bottom: -10px; }
.ag-cards__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; object-position: top; }
.ag-cards__card:hover .ag-cards__media img { transform: scale(1.05); }
.ag-cards__body { padding: 24px;border-radius:16px;background: var(--ag-lgray); display: flex; flex-direction: column; flex: 1; }
.ag-cards__title {
color: var(--ag-black2);
font-size: 24px;
font-weight: 900;
text-transform: uppercase;
margin: 0 0 12px;
}
.ag-cards__text {
color: var(--ag-black2);
font-size: 18px;
line-height: 1.5;
margin-bottom: 16px;
}
.ag-cards__text p { margin: 0 0 8px; }
.ag-cards__link {
margin-top: auto;
align-self: center;
color: var(--ag-green);
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
.ag-cards__link:hover { color: var(--ag-dark); }
/* ===========================================================
SERVICE MODELS — stacked items
=========================================================== */
.ag-models { position: relative; background: var(--ag-dark-2); padding: 80px 0; }
.ag-section-title{
margin-bottom: 40px;
}
.ag-models--bg { background-size: cover; background-position: center; }
.ag-models__overlay {
position: absolute;
background: linear-gradient(180deg, rgba(10, 22, 38, .82) 0%, rgba(10, 22, 38, .92) 100%);
z-index: 3;
background: linear-gradient(0.00deg, rgba(4, 13, 33, 0.97) 7.27%, rgba(36, 33, 50, 0) 67.988%);
height: 35%;
bottom: 0;
width: 100%;
pointer-events: none;
}
/* Затемнення — лише фон: під контентом (.container z-index 2), інакше нижні пункти
акордеона «тонули» в градієнті (game art, Our Engagement Models) */
.ag-models--bg .ag-models__overlay { z-index: 1; }
.ag-models .container { position: relative; z-index: 2; }
.ag-models .ag-section-subtitle { margin-bottom: 44px; }
.ag-models__layout { max-width: 900px; margin: 90px auto 0; }
.ag-models__list { display: flex; flex-direction: column; gap: 0; width: 100%; }
/* two-column variant: image + models list (e.g. game-art "engagement models") */
/* Bundled scene background (extracted from Figma). Dark overlay mutes the scene while
keeping it readable, matching Section.png. ACF bg_image, when set, overrides this
via the inline style on the section. */
.ag-models--split {
background-color: #070c1f;
background-image: linear-gradient(rgba(7, 12, 31, .6), rgba(7, 12, 31, .6)), url(../img/ag-models-bg.webp);
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
overflow: hidden;
}
.ag-models--split .ag-models__layout {
max-width: 1140px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.ag-models--split .ag-models__list { gap: 36px; align-self: start; }
.ag-models--split .ag-models__item { padding-bottom: 0; border-bottom: 0; }
.ag-models--split .ag-models__title { font-size: 26px; }
.ag-models__media img { width: 100%; height: auto; display: block; }
.ag-models--reverse .ag-models__media { order: 2; }
/* Character: larger and anchored to the bottom edge of the section (per design).
Bleeds left into the section padding; negative bottom margin eats the section's
bottom padding so the character touches the block's bottom. z-index keeps it
above the red bottom glow (--wave). */
.ag-models--split .ag-models__media {
align-self: end;
position: relative;
z-index: 2;
margin-bottom: -80px;
}
.ag-models--split .ag-models__media img {
width: 125%;
max-width: none;
margin-left: -25%;
}
.ag-models--split.ag-models--reverse .ag-models__media img {
margin-left: 0;
margin-right: -25%;
}
/* Game art «Our engagement models» (Figma 162:16524 «Character» = персонаж + червоне світіння):
світіння тепер у PNG персонажа (1301×1172, персонаж x 280–1002 / y 232–1008), а не на фоні —
на планшеті/телефоні, де персонажа немає, плями не видно. Поля PNG ширші, ніж у старого webp
(911×858, персонаж 164 / 24, знизу 58) — компенсуємо, щоб персонаж стояв там само, тим самим
масштабом (125% колонки на 911px), а висота блоку не змінилась. */
@media (min-width: 861px) {
body.slug-game-art-outsourcing .ag-models--split .ag-models__media img {
width: 178.51%; /* 125% × 1301/911 */
margin: -28.54% 0 -14.54% -40.92%; /* (232−24), (164−58), 25% + (280−164) — у частках 911/125% */
}
}
/* optional glowing wavy bottom (red energy glow, like the game-art "engagement models" section) */
.ag-models--wave { overflow: hidden; }
.ag-models--wave::after {
content: "";
position: absolute;
left: -5%;
right: -5%;
bottom: 0;
height: 220px;
background: linear-gradient(to top, rgba(255, 53, 45, .9) 0%, rgba(255, 53, 45, 0) 100%);
-webkit-mask: url(../img/pagehero-bottom.svg) no-repeat center bottom / 110% 100%;
mask: url(../img/pagehero-bottom.svg) no-repeat center bottom / 110% 100%;
filter: blur(6px);
pointer-events: none;
z-index: 1;
}
/* accordion items (same mechanic as FAQ: initAccordion + .is-open) */
.ag-models__item { border-bottom: 1px solid var(--ag-line); }
.ag-models__question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
padding: 20px 0;
}
.ag-models__title {
color: var(--ag-green3);
font-size: 24px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .03em;
margin: 0;
}
.ag-models__arrow {
flex: 0 0 auto;
width: 10px;
height: 10px;
margin: 0 6px 4px 0;
border-right: 2px solid var(--ag-muted);
border-bottom: 2px solid var(--ag-muted);
transform: rotate(45deg);
transition: transform .3s;
}
.ag-models__item.is-open .ag-models__arrow { transform: rotate(-135deg); margin-bottom: -4px; }
.ag-models__answer {
max-height: 0;
overflow: hidden;
transition: max-height .4s ease;
}
.ag-models__item.is-open .ag-models__answer { max-height: 400px; }
.ag-models__answer-inner {
padding: 20px 0;
color: var(--ag-text);
font-size: 16px;
line-height: 1.7;
}
.ag-models__answer-inner p { margin: 0 0 12px; }
.ag-models__answer-inner p:last-child { margin-bottom: 0; }
/* ===========================================================
TECHNICAL EXPERTISE — labeled tool grid
=========================================================== */
.ag-tools { background: var(--ag-dark-2); padding: 80px 0; }
.ag-tools .ag-section-subtitle { margin-bottom: 90px; }
.ag-tools__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 44px 37px;
max-width: calc(var(--tools-cols, 6) * 147px);
margin: 0 auto;
}
.ag-tools__item {
/* Ширина ячейки совпадает с сеткой repeat(cols, 1fr): полные строки заполняют
ряд, неполная последняя строка центрируется за счёт justify-content: center. */
flex: 0 0 calc((100% - (var(--tools-cols, 6) - 1) * 37px) / var(--tools-cols, 6));
display: flex;
flex-direction: column;
align-items: center;
gap: 23px;
text-align: center;
}
.ag-newsletter.ag-newsletter--bg .wpcf7-response-output {
color: #fff;
}
.ag-tools__icon { height: 50px; display: flex; align-items: center; }
.ag-tools__icon img { max-height: 50px; width: auto; height: auto; }
.ag-tools__label {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
color: var(--ag-muted);
font-size: 18px;
}
/* ===========================================================
JOB OPENINGS — accordion
=========================================================== */
.ag-jobs { background: var(--ag-black2); padding: 0 0 110px }
.ag-jobs .ag-section-title { margin-bottom: 100px; }
.ag-jobs__inner {
display: grid;
grid-template-columns: 0.8fr 1fr; /* Figma: image 529 : accordion 663 */
gap: 18px;
align-items: start; /* картинка вирівняна по верху з першою вакансією */
}
/* Сцена «job openings» зі слоями з ACF: персонаж (головний) + стіл + реквізит + зелене світіння.
Персонаж — у потоці й задає розмір сцени; решта позиціонується відносно нього (пропорції Figma). */
.ag-jobs__scene { position: relative; }
.ag-jobs__glow {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 92%;
height: 82%;
z-index: 0;
pointer-events: none;
background: radial-gradient(closest-side, rgba(59, 163, 76, .34), rgba(59, 163, 76, 0));
filter: blur(55px);
}
.ag-jobs__char {
position: relative; /* у потоці — задає розмір сцени */
z-index: 2;
width: 100%;
height: auto;
display: block;
}
.ag-jobs__table {
position: absolute;
left: -17%;
bottom: -8%;
width: 138%;
aspect-ratio: 897.6 / 282.6;
background: center / contain no-repeat;
z-index: 1;
pointer-events: none;
}
.ag-jobs__shotgun {
position: absolute;
left: 5%;
bottom: -4%;
width: 87%;
aspect-ratio: 756 / 156;
background: center / contain no-repeat;
opacity: .84;
z-index: 3;
pointer-events: none;
}
.ag-jobs__list { display: flex; flex-direction: column; }
/* Показуємо 5 вакансій; решта — за кнопкою "See More" */
.ag-jobs__item--more { display: none; }
.ag-jobs__list.is-expanded .ag-jobs__item--more { display: block; }
.ag-jobs__more { display: flex; justify-content: center; margin-top: 40px; }
.ag-jobs__item { border-bottom: 1px solid rgba(255, 255, 255, .17); }
.ag-jobs__q {
width: 100%;
display: grid;
grid-template-columns: 44% 140px auto 24px;
align-items: center;
gap: 16px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
padding: 40px 0;
}
.ag-jobs__role {
color: var(--ag-green3);
font-size: 18px;
line-height: 30px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0;
}
.ag-jobs__loc { color: #fff; font-size: 18px; line-height: 1.5; font-weight: 700; white-space: nowrap; }
.ag-jobs__dep { color: #fff; font-size: 18px; line-height: 1.5; font-weight: 400; white-space: nowrap; }
.ag-jobs__q .ag-faq__arrow { justify-self: end; }
.ag-jobs__answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.ag-jobs__item.is-open .ag-jobs__answer { max-height: 1000px; }
.ag-jobs__answer-inner { padding: 36px 0 40px; }
.ag-jobs__desc { color: #ffefef; font-family: var(--ag-font-ui); font-size: 16px; line-height: 25px;padding-bottom: 36px; margin-bottom: 24px; }
.ag-jobs__desc p {
margin: 0 0 24px;
}
.ag-jobs__desc ul,
.ag-jobs__desc ol { margin: 0; padding-left: 18px; } /* ol — як ul (без браузерних 40px) */
.ag-jobs__desc li { margin-bottom: 4px; }
/* ===========================================================
BENEFITS — bg image + checkmark list
=========================================================== */
.ag-benefits {
position: relative;
background-color: var(--ag-black2);
background-image: url(../img/ag-benefits-bg.webp), linear-gradient(180deg, #040d21 0%, #121833 100%);
background-size: cover, cover;
background-position: left center, center;
background-repeat: no-repeat, no-repeat;
padding: 110px 0;
overflow: hidden;
}
.ag-benefits__overlay {
position: absolute;
inset: 0;
/*background: linear-gradient(90deg, rgba(4, 13, 33, .45) 0%, rgba(4, 13, 33, .85) 55%, rgba(4, 13, 33, .96) 100%);*/
}
.ag-benefits__inner { position: relative; z-index: 2; }
.ag-benefits .ag-section-subtitle { margin-bottom: 60px; max-width: 760px; margin-left: auto; margin-right: auto; }
.ag-benefits__list {
display: flex;
flex-direction: column;
gap: 48px;
max-width: 788px;
margin-left: auto;
margin-right: auto;
}
.ag-benefits__item { display: flex; gap: 30px; align-items: flex-start; }
.ag-benefits__icon {
flex: 0 0 auto;
width: 62px;
height: 62px;
background: url(../img/ag-step-check.png) center / contain no-repeat;
}
.ag-benefits__title {
color: #4ac882;
font-size: 24px;
line-height: 1.25;
font-weight: 900;
text-transform: uppercase;
margin: 0 0 10px;
}
.ag-benefits__title--green { color: #4ac882; }
.ag-benefits__title--white { color: #fcf9f9; }
.ag-benefits__text { color: #fcf9f9; font-size: 18px; line-height: 1.5; }
.ag-benefits__text p { margin: 0; }
/* ===========================================================
SINGLE POST (article)
=========================================================== */
.ag-article { background: var(--ag-black2); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.ag-article__hero {
position: relative;
background-size: cover;
background-position: center;
background-color: var(--ag-dark-2);
color: #fff;
padding: 100px 0 88px;
min-height: 420px;
display: flex;
align-items: flex-end;
overflow: hidden;
}
/* Сторінка поста: тёмна суцільна шапка + hero починається ПІД шапкою (не заходить під неї) */
body.single-post .ag-header,
body.single-post .ag-header.is-scrolled {
background: var(--ag-dark-2);
box-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
body.single-post .main-content { padding-top: var(--ag-header-h); }
.ag-article__hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(8, 14, 24, .35) 0%, rgba(8, 14, 24, .55) 45%, rgba(8, 14, 24, .92) 100%);
}
.ag-article__hero-inner { position: relative; z-index: 2; width: 100%; }
.ag-article__crumb { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .85); margin-bottom: 29px }
.ag-article__crumb a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.ag-article__crumb a:hover { color: var(--ag-green); }
.ag-article__title {
font-size: 38px;
line-height: 1.21;
font-weight: 900;
text-transform: uppercase;
max-width: 900px;
margin: 0 0 28px;
}
.ag-article__meta {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
margin-bottom: 28px
}
.ag-article__author { display: inline-flex; align-items: center; gap: 15px; font-size: 18px; color: #fff; }
.ag-article__author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ag-article__share { display: flex; align-items: center; gap: 12px; }
.ag-article__share a,
.ag-article__share .ag-article__copy {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .12);
color: #fff;
transition: background .25s, color .25s, border-color .25s;
}
.ag-article__share a:hover,
.ag-article__share .ag-article__copy:hover { background: var(--ag-green); color: #fff; }
.ag-article__copy { padding: 0; border: 0; cursor: pointer; font: inherit; }
.ag-article__copy.is-copied { background: var(--ag-green); border-color: var(--ag-green); color: #fff; }
/* layout */
.ag-article__layout {
display: grid;
grid-template-columns: 330px 1fr;
gap: 24px;
padding-top: 40px;
padding-bottom: 40px;
align-items: start;
}
.ag-article__sidebar { position: sticky; top: calc(var(--ag-header-h) + 20px); display: flex; flex-direction: column; gap: 48px; }
.ag-article__toc-title {
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
margin: 0 0 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--ag-line);
}
.ag-article__toc a {
color: var(--ag-muted);
text-decoration: none;
font-size: 14px;
line-height: 1.4;
border-left: 2px solid transparent;
padding-left: 12px;
display: block;
transition: color .25s, border-color .25s;
}
.ag-article__toc a:hover,
.ag-article__toc a.is-active { color: var(--ag-green); border-color: var(--ag-green); }
.ag-article__toc .toc-h3 { padding-left: 24px; font-size: 13px; }
/* sidebar related card */
.ag-article__aside-card { display: block; text-decoration: none; }
.ag-article__aside-label { color: var(--ag-green); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 12px; }
.ag-article__aside-thumb { display: block; border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.ag-article__aside-thumb img { width: 100%; height: auto; display: block; }
.ag-article__aside-title { color: #fff; font-size: 16px; font-weight: 700; text-transform: uppercase; line-height: 1.25; margin: 0; }
.ag-article__aside-card:hover .ag-article__aside-title { color: var(--ag-green); }
/* content typography */
.ag-article__content { color: #fff; font-size: 18px; line-height: 1.5; }
.ag-article__content > *:first-child { margin-top: 0; }
.ag-article__content p { margin: 0 0 16px; }
.ag-article__content h2 {
color: #fff;
font-size: 38px;
font-weight: 900;
text-transform: uppercase;
line-height: 1.21;
margin: 40px 0 16px;
scroll-margin-top: calc(var(--ag-header-h) + 20px);
}
.ag-article__content h3 {
color: #fff;
font-size: 24px;
font-weight: 900;
text-transform: uppercase;
line-height: 1.25;
margin: 32px 0 14px;
scroll-margin-top: calc(var(--ag-header-h) + 20px);
}
.ag-article__content a { color: var(--ag-green); }
.ag-article__content img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0 24px; }
.ag-article__content ul,
.ag-article__content ol { margin: 0 0 20px; padding-left: 22px; }
.ag-article__content li { margin-bottom: 8px; }
.ag-article__content blockquote {
margin: 0 0 24px;
padding: 16px 22px;
border-left: 3px solid var(--ag-green);
background: var(--ag-card);
border-radius: 0 8px 8px 0;
color: #e7ebf0;
}
.ag-article__content strong { color: #fff; }
/* category chip (frosted glass) — hero + cards */
.ag-chip {
display: inline-flex;
align-items: center;
height: 40px;
padding:6.5px 14px;
border-radius: 4px;
color: #fff;
font-size: 16px;
line-height: 1;
background:
radial-gradient(147% 172% at 138% 164%, rgba(91, 111, 155, .2) 0%, rgba(70, 100, 164, 0) 100%),
rgba(2, 11, 26, .05);
-webkit-backdrop-filter: blur(36px);
backdrop-filter: blur(36px);
border: 1px solid rgba(255, 255, 255, .08);
}
.ag-article__chip {
margin-bottom: 28px;
font-size: 18px;
text-decoration: none;
transition: border-color .2s, color .2s;
}
.ag-article__chip:hover { border-color: var(--ag-green); }
/* meta: author (link) then date • read on its own row */
.ag-article__author { text-transform: none; text-decoration: none; }
.ag-article__author:hover { color: var(--ag-green); }
.ag-article__author-arrow { display: inline-flex; color: var(--ag-green); }
.ag-article__author-arrow svg { display: block; }
.ag-article__dateline { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.ag-article__dot { color: var(--ag-green); }
.ag-article__read { color: #fff; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
.ag-article__date { color: #fff; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
/* TOC as frosted card (Figma #161E30) */
.ag-article__toc-box {
padding: 24px 21px;
border-radius: 8px;
background:
radial-gradient(75.31% 59.03% at 125% 272%, rgba(8, 0, 11, 0.2) 0%, rgba(255, 0, 200, 0) 100%),
radial-gradient(227.02% 118.73% at 138% 164%, rgba(91, 111, 155, 0.2) 0%, rgba(70, 100, 164, 0) 100%),
rgba(22, 30, 48, 1);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.ag-article__toc-title { text-align: center; font-size: 24px; font-weight: 900; letter-spacing: 0; border-bottom: 0; padding-bottom: 0; margin-bottom: 28px; }
.ag-article__toc {
list-style: disc;
display: flex;
padding-left: 22px;
color: #fff;
gap: 24px;
flex-direction: column;
margin: 0 8px;
}
.ag-article__toc li {
padding: 10.5px 0;
}
.ag-article__toc li:has(a.is-active) { color: var(--ag-green); }
.ag-article__toc a { border-left: 0; padding: 0; border-radius: 0; font-weight: 700; font-size: 18px; display: inline; color: inherit; }
.ag-article__toc a:hover { color: var(--ag-green); }
.ag-article__toc .toc-h3 { font-size: 16px; }
/* article footer: rating + share — sits in the content column, under the text */
.ag-article__footer { grid-column: 2; padding-top: 8px; padding-bottom: 8px; }
.ag-article__rate { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 16px; }
.ag-article__stars {
position: relative;
display: inline-block;
width: 120px; /* 5 × 24px cell (18px зірка + 6px зазор) */
height: 17px;
background: url(../img/ag-star-empty.svg) repeat-x left center / 24px 17px;
}
.ag-article__stars::before {
content: "";
position: absolute;
left: 0; top: 0;
height: 100%;
overflow: hidden;
width: calc(var(--rate, 0) / 5 * 120px);
background: url(../img/ag-star-full.svg) repeat-x left center / 24px 17px;
pointer-events: none;
}
/* interactive click layer (visitor voting) */
.ag-article__stars-hit { position: absolute; inset: 0; display: flex; z-index: 2; }
.ag-article__star { flex: 1 1 0; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; font: inherit; }
.ag-article__rate.is-votable .ag-article__star { cursor: pointer; }
.ag-article__rate:not(.is-votable) .ag-article__stars-hit { pointer-events: none; }
.ag-article__divider { height: 1px; background: #a5a5a5; opacity: .5; margin: 12.5px 0; }
.ag-article__share-bottom {
display: flex;
align-items: center;
gap: 22px;
color: #fff;
font-size: 16px;
}
.ag-article__share-label { letter-spacing: .03em; }
.ag-article__share--round { gap: 8px; }
.ag-article__share--round a,
.ag-article__share--round .ag-article__copy {
width: auto;
height: auto;
background: transparent;
border: 0;
border-radius: 0;
color: #fff;
padding: 12px
}
.ag-article__share--round .ag-article__copy:hover path{
fill: var(--ag-green);
}
.ag-article__share--round a:hover,
.ag-article__share--round .ag-article__copy:hover { background: transparent; color: var(--ag-green); }
.ag-article__share--round .ag-article__copy.is-copied { background: transparent; color: var(--ag-green); }
/* SVG соц-іконок мають жорсткий fill=white — перекриваємо на зелений при наведенні */
.ag-article__share--round a svg path { transition: fill .2s; }
.ag-article__share--round a:hover svg path { fill: var(--ag-green); }
/* ===========================================================
SINGLE VACANCY (CPT vacancy) — reuses .ag-article shell
=========================================================== */
.ag-vacancy__chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
/* Hero fallback when the vacancy has no featured image — a branded gradient instead of an empty dark void.
When a featured image IS set the inline `style="background-image:url(...)"` (higher priority) takes over. */
.ag-vacancy .ag-article__hero {
background-image:
radial-gradient(120% 140% at 85% 0%, rgba(59, 163, 76, .18) 0%, rgba(59, 163, 76, 0) 45%),
linear-gradient(135deg, #0c1a2c 0%, #13243b 55%, #0a1626 100%);
}
/* content on the left, sticky facts card on the right */
.ag-vacancy__layout { grid-template-columns: 1fr 330px; }
.ag-vacancy__content { order: 0; }
.ag-vacancy__aside { order: 1; }
.ag-vacancy__facts-list { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ag-vacancy__facts-list li {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.ag-vacancy__facts-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ag-vacancy__facts-list span { color: var(--ag-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.ag-vacancy__facts-list b { color: #fff; font-size: 15px; text-align: right; }
.ag-vacancy__apply-btn { width: 100%; justify-content: center; }
.ag-vacancy__apply { background: var(--ag-dark-2); padding: 90px 0; }
.ag-vacancy__apply .ag-contact__inner { max-width: 630px; margin: 0 auto; grid-template-columns: 1fr; }
/* Apply form sits on a dark background → adapt the light-theme contact form so text/inputs stay readable */
.ag-vacancy__apply .ag-contact__title { color: #fff; }
.ag-vacancy__apply .ag-contact__form { color: rgba(255, 255, 255, .85); }
.ag-vacancy__apply .ag-contact__form input[type="text"],
.ag-vacancy__apply .ag-contact__form input[type="email"],
.ag-vacancy__apply .ag-contact__form textarea { color: #fff; border-bottom-color: rgba(255, 255, 255, .3); }
.ag-vacancy__apply .ag-contact__form input::placeholder,
.ag-vacancy__apply .ag-contact__form textarea::placeholder { color: rgba(255, 255, 255, .6); }
.ag-vacancy__apply .wpcf7-list-item-label { color: rgba(255, 255, 255, .85); }
/* Other openings reuse .ag-blog__row but carry no thumbnail → collapse the 431px/1fr grid to one column */
.ag-vacancy__others .ag-blog__row { grid-template-columns: 1fr; min-height: 0; }
.ag-vacancy__others .ag-blog__body { padding: 12px 8px; gap: 16px; }
.ag-vacancy__others .ag-blog__post-title { font-size: 26px; }
.ag-vacancy__others .ag-blog__excerpt { font-size: 16px; }
.ag-vacancy__others .ag-blog__btn { align-self: flex-start; margin-top: 4px; }
@media (max-width: 980px) {
.ag-vacancy__layout { grid-template-columns: 1fr; }
.ag-vacancy__aside { order: -1; position: static; }
}
/* ===========================================================
RELATED POST CARD (.ag-relcard) — sidebar + "Also Read" slider
=========================================================== */
.ag-relcard { display: flex; flex-direction: column; gap: 18px; text-decoration: none; padding: 15px }
.ag-relcard__media {
position: relative;
display: block;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--ag-card) center/cover no-repeat;
}
.ag-relcard__chip { position: absolute; left: 15px; top: 15px; }
.ag-relcard__body { display: flex; flex-direction: column; gap: 26px; }
.ag-relcard__meta {
display: flex; align-items: center; gap: 6px;
font-family: var(--ag-font-ui); font-size: 18px;
text-transform: uppercase; letter-spacing: .04em; color: #5f6571;
}
.ag-relcard__meta em { color: var(--ag-green); font-style: normal; }
.ag-relcard__title {
color: #fff; margin: 0;
font-size: 24px; font-weight: 900; line-height: 1.25; text-transform: uppercase;
transition: color .25s;
}
/* white wins over legacy main.css `h3{color:#3BA34C}` regardless of load order */
.ag-relcard .ag-relcard__title { color: #fff; }
.ag-relcard:hover .ag-relcard__title { color: var(--ag-green); }
.ag-relcard__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ag-relcard__excerpt {
color: rgba(255, 255, 255, .9);
font-family: var(--ag-font-ui);
font-size: 18px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ag-relcard__arrow {
display: flex;
align-items: center;
justify-content: flex-end;
}
/* sidebar variant */
.ag-article__aside-heading { color: #fff; font-size: 38px; font-weight: 900; line-height: 1.25; text-transform: uppercase; text-align: center; margin: 10px 0 0; }
.ag-relcard--side { gap: 26px; }
.ag-relcard--side .ag-relcard__media { aspect-ratio: 4 / 3; }
.ag-relcard--side .ag-relcard__title {
font-size: 38px;
line-height: 1.2;
font-weight: 900;
}
/* wide variant (bottom slider): media left, text right.
Scoped under .ag-related so it beats swiper.css `.swiper-slide{display:block}`
(swiper.css is enqueued AFTER argentics.css → equal specificity would lose). */
.ag-related .ag-relcard--wide { display: flex; flex-direction: row; align-items: stretch; gap: 26px; padding: 15px; }
.ag-relcard--wide .ag-relcard__media { flex: 0 0 430px; aspect-ratio: auto; min-height: 400px; align-self: stretch; }
.ag-relcard--wide .ag-relcard__body { flex: 1; min-width: 0; justify-content: center; gap: 24px; }
.ag-relcard--wide .ag-relcard__meta { font-size: 16px; }
.ag-relcard--wide .ag-relcard__title { font-size: 38px; line-height: 1.2; -webkit-line-clamp: 3; }
.ag-relcard--wide .ag-relcard__excerpt { font-size: 18px; }
/* 2 картки на слайд, стеком */
.ag-related .swiper-slide { display: flex; flex-direction: column; gap: 40px; height: auto; }
/* "Also Read" slider section */
.ag-related { background: var(--ag-dark); padding: 90px 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.ag-related .ag-section-title { margin-bottom: 40px; }
.ag-related__slider { position: relative; }
.ag-related__nav { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: -moz-fit-content; width: fit-content; margin: 90px auto 0; }
.ag-related__nav-btn {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid var(--ag-green);
background: transparent;
color: var(--ag-green);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .25s, color .25s;
}
.ag-related__nav-btn:hover { background: var(--ag-green); color: #fff; }
.ag-related__nav-btn.swiper-button-disabled { cursor: default; }
.ag-related__nav-btn.swiper-button-disabled svg path{
fill: #fff
}
body .swiper-pagination-fraction {
color: #fff;
}
/* Swiper вішає на кнопки .swiper-button-prev/next і робить їх position:absolute (розносить до країв).
Повертаємо в потік і центруємо разом із лічильником. */
.ag-related__nav .ag-related__nav-btn,
.ag-related__nav .ag-related__nav-counter {
position: static !important;
inset: auto !important;
margin: 0 !important;
flex: 0 0 auto;
}
.ag-related__nav .ag-related__nav-btn { width: 48px !important; height: 48px !important; }
.ag-related__nav .ag-related__nav-counter { width: auto !important; }
.ag-related__nav-btn::after { content: none; }
.ag-related__nav-counter { min-width: 56px; text-align: center; color: rgba(255, 255, 255, .55); font-size: 18px; }
.ag-related__nav-counter .swiper-pagination-current { color: var(--ag-green); }
@media (max-width: 768px) {
.ag-related { padding: 60px 0; }
.ag-related .ag-relcard--wide { flex-direction: column; gap: 18px; padding: 0; }
.ag-relcard--wide .ag-relcard__media { flex: 0 0 auto; width: 100%; min-height: 0; aspect-ratio: 16 / 10; }
.ag-relcard--wide .ag-relcard__body { gap: 16px; }
.ag-relcard--wide .ag-relcard__title { font-size: 26px; }
.ag-relcard--wide .ag-relcard__excerpt { font-size: 15px; }
}
/* ===========================================================
FOOTER
=========================================================== */
.ag-footer { position: relative; background: #000; padding: 64px 0; }
/* 404 короче окна на высоких экранах — без полосы фона body под футером */
body.error404 { background-color: #000; }
/* wavy black transition into the footer — only on the 404 page (Figma footer_404.svg, 1920x250) */
.error404 .ag-footer::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 52%;
height: 13.02vw;
max-height: 250px;
background: url(../img/footer_404.svg) no-repeat center bottom;
background-size: 100% 100%;
pointer-events: none;
/* Декорація нижче контенту футера: з z-index:1 вона перекривала логотип,
меню й копірайт, бо сам .container не спозиційований. */
z-index: 0;
}
.ag-footer__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1.4fr auto;
gap: 40px;
align-items: start;
}
.ag-footer__logo { text-decoration: none; display: inline-block; margin-bottom: 50px; }
.ag-footer__logo img { max-height: 32px; width: auto; }
.ag-footer__logo-text {
color: #fff;
font-weight: 800;
font-size: 28px;
letter-spacing: .04em;
}
.ag-footer__email {
display: block;
color: #fff;
text-decoration: none;
font-family: var(--ag-font-ui);
font-size: 14px;
line-height: 1.5;
}
.ag-footer__email:hover { color: var(--ag-green); }
.ag-footer__menu {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 9px 16px;
}
/* Роздільник «|» — у кінці пункту, а не на початку наступного: при переносі рядка
він лишається в попередньому рядку, а не відкриває новий */
.ag-footer__menu li { position: relative; padding-right: 17px; }
.ag-footer__menu li::before {
content: "|";
position: absolute;
right: 0;
color: #fff;
opacity: .6;
}
.ag-footer__menu li:last-child { padding-right: 0; }
.ag-footer__menu li:last-child::before { display: none; }
.ag-footer__menu a {
color: #fff;
text-decoration: none;
font-family: var(--ag-font-ui);
font-size: 16px;
line-height: 25px;
}
.ag-footer__menu a:hover { color: var(--ag-green); }
.ag-footer__copy {
color: #888b92;
font-family: var(--ag-font-ui);
font-size: 16px;
line-height: 25px;
margin: 13px 0 0;
}
.ag-footer__social { display: flex; gap: 8px; }
.ag-footer__social a {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
transition: color .25s, background .25s;
}
.ag-footer__social a:hover { color: var(--ag-green); background: rgba(255, 255, 255, .08); }
/* ===========================================================
SUCCESS POPUP (after form submit)
=========================================================== */
.ag-popup {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.ag-popup[hidden] { display: none; }
.ag-popup__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 10, 18, .72);
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity .3s;
}
.ag-popup.is-open .ag-popup__backdrop { opacity: 1; }
.ag-popup__dialog {
position: relative;
z-index: 2;
display: grid;
align-items: stretch;
width: 100%;
max-width: 1200px;
min-height: 420px;
border-radius: 18px;
overflow: hidden;
background: linear-gradient(120deg, #0f3d2e 0%, #0d2438 48%, #0a1626 100%);
box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
transform: translateY(24px) scale(.97);
opacity: 0;
transition: transform .35s, opacity .35s;
}
.ag-popup.is-open .ag-popup__dialog { transform: none; opacity: 1; }
/* optional background image for the popup dialog */
.ag-popup__dialog--bg { background-size: cover; background-position: center; }
.ag-popup__overlay {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(120deg, rgba(15, 61, 46, .88) 0%, rgba(13, 36, 56, .82) 48%, rgba(10, 22, 38, .9) 100%);
}
.ag-popup__dialog--bg .ag-popup__media,
.ag-popup__dialog--bg .ag-popup__content { position: relative; z-index: 1; }
.ag-popup__close {
position: absolute;
top: 14px;
right: 18px;
z-index: 3;
background: none;
border: 0;
color: rgba(255, 255, 255, .7);
font-size: 30px;
line-height: 1;
cursor: pointer;
transition: color .2s;
}
.ag-popup__close:hover { color: #fff; }
.ag-popup__media { position: relative; min-height: 100%; }
.ag-popup__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: left bottom;
}
.ag-popup__content {
gap: 42px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 48px 52px;
}
.ag-popup__label {
color: var(--ag-green);
font-size: 38px;
font-weight: 900;
text-transform: uppercase;
line-height: 1.21;
}
.ag-popup__title {
color: #fff;
font-size: 38px;
font-weight: 900;
text-transform: uppercase;
line-height: 1.21;
margin: 0
}
.ag-popup__text {
max-width: 360px;
color: rgba(255, 255, 255, 1);
font-size: 18px;
font-weight: 700;
line-height: 1.5;
padding: 33px 0;
margin: 0;
}
.ag-popup__btn { align-self: center; }
.ag-popup__follow {
color: var(--ag-text);
font-size: 14px;
font-family: var(--ag-font-ui);
}
.ag-popup__social { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.ag-popup__social a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
width: 32px;
height: 32px;
border-radius: 50%;
color: #e7ebf0;
transition: color .2s, border-color .2s;
}
.ag-popup__social a:hover { color: var(--ag-green); border-color: var(--ag-green); }
body.ag-popup-open { overflow: hidden; }
/* ===========================================================
RESPONSIVE
=========================================================== */
/* nav collapses to burger only below tablet (Figma 1024 shows full nav) */
@media (max-width: 860px) {
.ag-header__nav { display: none; }
.ag-header__burger { display: flex; }
/* anim-right зсуває блок на 60px за правий край — на вузькому екрані він
повністю поза в'юпортом, IntersectionObserver не спрацьовує і бургер
так і лишається невидимим. Тут тільки fade. */
.ag-header__actions.anim-right { transform: none; }
}
@media (max-width: 1024px) {
.ag-services__grid > .swiper-wrapper { grid-template-columns: repeat(2, 1fr); }
.ag-services__figure { display: none; }
/* Figma iPad 1024 (1:7715): та ж сітка 4 колонки, картка 225×330 — висота ряду
пропорційна ширині колонки (4 колонки + 3 gap по 12px + падінги контейнера 2×24px) */
.ag-portfolio__grid { grid-auto-rows: min(330px, calc((100vw - 84px) / 4 * 1.4667)); }
.ag-gallery__grid { grid-auto-rows: 200px; }
.ag-whatwedo__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
:root { --ag-header-h: 70px; }
.ag-header__cta { display: none; }
/* article: single column, smaller heads */
.ag-article__layout,
.ag-vacancy__layout { grid-template-columns: 1fr; gap: 32px; }
.ag-article__sidebar { position: static; top: auto; gap: 24px; }
.ag-article__footer { grid-column: auto; }
.ag-article__title { font-size: 28px; }
.ag-article__content h2 { margin-top: 32px; }
.ag-related { padding: 64px 0; }
.ag-contact { padding: 64px 0; }
.ag-contact__form { padding: 0; }
.ag-contact__inner,
.ag-faq__inner { grid-template-columns: 1fr; gap: 30px; }
.ag-contact__media { justify-content: flex-start; }
.ag-contact__media img { max-width: 100%; }
.ag-faq { padding: 64px 0; }
/* На вузькому екрані відступи дає сама секція — списку вони лише ріжуть ширину. */
.ag-faq__list { max-width: 100%; margin-left: 0; padding-right: 0; padding-bottom: 0; }
.ag-feature__inner { grid-template-columns: 1fr; gap: 0; min-height: 0; overflow: hidden; }
.ag-feature__media { min-height: 320px; }
.ag-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ag-feature__content { padding: 28px 24px; gap: 16px; }
.ag-feature__logo { max-height: 96px; }
.ag-feature--reverse .ag-feature__media { order: 0; }
.ag-cta { padding: 64px 0; }
.ag-cta__figure { display: none; }
.ag-cta__logos { gap: 16px 24px; margin-top: 56px; }
.ag-cta__logo { min-width: 90px; }
.ag-cta__logo img { height: 44px; }
.ag-about { padding: 64px 0; min-height: 0; }
.ag-about__inner { justify-content: flex-start; }
.ag-about__panel { width: 100%; gap: 28px; padding: 28px 24px; }
.ag-popup__dialog { grid-template-columns: 1fr; max-width: 420px; min-height: 0; }
.ag-popup__media { min-height: 200px; }
.ag-popup__content { padding: 32px 26px; }
.ag-hero__title { font-size: 38px; line-height: 46px; }
.ag-services { padding: 64px 0; }
.ag-services .ag-section-title { margin-bottom: 48px; }
.ag-services__card-title { padding: 56px 18px 18px; }
.ag-services__card::after { right: 18px; bottom: 20px; }
.ag-portfolio { padding: 64px 0 32px; }
.ag-portfolio .ag-section-subtitle { margin-bottom: 48px; }
.ag-portfolio__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
.ag-hero { padding: 75px 0 0; min-height: 560px; }
.ag-hero__platforms { gap: 24px 40px; }
.ag-hero__platform { font-size: 14px; }
.ag-brands__item { margin-right: 48px; gap: 16px; }
.ag-brands__item img { height: 34px; }
.ag-blog { padding: 64px 0; }
.ag-blog__intro { margin-bottom: 48px; }
.ag-blog__row { grid-template-columns: 1fr; }
.ag-blog__thumb { min-height: 200px; height: 200px; }
.ag-blog__body { padding: 0; gap: 14px; }
.ag-footer__inner { grid-template-columns: 1fr; gap: 28px; }
.ag-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-template-areas: none; grid-auto-rows: 220px; }
.ag-gallery__item:nth-child(n) { grid-area: auto; }
.ag-works__content { max-width: 100%; padding: 28px 26px; }
.ag-works__item { min-height: 240px; }
.ag-works__figure,
.ag-works__item--left .ag-works__figure { inset: 0; width: 100%; justify-content: center; opacity: .35; }
.ag-story__inner,
.ag-steps__inner { grid-template-columns: 1fr; gap: 30px; }
.ag-story__text { column-count: 1; }
.ag-whatwedo__grid { grid-template-columns: 1fr; }
.ag-promos__grid { grid-template-columns: 1fr; gap: 40px; padding: 28px 22px; }
.ag-promos__card-title { font-size: 28px; }
.ag-contacthero { padding: 110px 0 56px; }
.ag-contacthero__image { display: none; }
.ag-contacthero__head { max-width: 100%; padding: 0 0 32px; }
.ag-contacthero__title { font-size: 36px; line-height: 1.15; }
.ag-contacthero__grid { grid-template-columns: 1fr; gap: 40px; padding: 28px 22px; }
.ag-newsletter { padding: 64px 0; }
.ag-newsletter__figure { opacity: .22; width: 60%; }
.ag-newsletter__form form,
.ag-newsletter__form .wpcf7-form { padding: 8px 0 0; }
.ag-pagehero__image { display: none; }
.ag-pagehero__content { max-width: 100%; }
.ag-pagehero__title { font-size: 38px; line-height: 46px; }
/* на мобільному пропорційна висота стає надто малою — тримаємо мінімум під текст */
.ag-pagehero { min-height: 420px; padding: 110px 0 56px; aspect-ratio: auto; }
.ag-jobs { padding: 64px 0; }
.ag-jobs .ag-section-title { margin-bottom: 48px; }
.ag-benefits { padding: 64px 0; }
.ag-benefits__item { gap: 18px; }
.ag-benefits__icon { width: 48px; height: 48px; }
.ag-404 { padding: 56px 0; }
.ag-404__inner { gap: 24px; }
.ag-404__code { font-size: 150px; }
.ag-404__label { font-size: 34px; line-height: 1.2; }
.ag-404__text { font-size: 16px; }
.ag-jobs__inner { grid-template-columns: 1fr; gap: 30px; }
.ag-jobs__scene { max-width: 360px; margin: 0 auto; }
.ag-jobs__q { grid-template-columns: 1fr 24px; gap: 6px 16px; }
.ag-jobs__loc, .ag-jobs__dep { grid-column: 1; }
.ag-jobs__q .ag-faq__arrow { grid-row: 1; grid-column: 2; }
.ag-benefits__list { max-width: 100%; margin-left: 0; }
.ag-cards__grid { grid-template-columns: repeat(2, 1fr); }
.ag-models--split .ag-models__layout { grid-template-columns: 1fr; gap: 32px; }
/* На мобильном — картинка сверху, обычный размер, без выноса и привязки к низу */
.ag-models--split .ag-models__media { order: -1; align-self: auto; margin-bottom: 0; }
.ag-models--split .ag-models__media img,
.ag-models--split.ag-models--reverse .ag-models__media img { width: 100%; margin-left: 0; margin-right: 0; }
.ag-models__layout { margin-top: 40px; }
.ag-models__question { padding: 16px 0; }
.ag-models__item.is-open .ag-models__answer { max-height: 1600px; }
.ag-tools__grid { max-width: 460px; }
.ag-tools__item { flex-basis: calc((100% - 2 * 37px) / 3); }
}
@media (max-width: 540px) {
/* tighter gutters on phones (Figma 375 ≈ 16px) */
.ag-hero .container, .ag-brands .container, .ag-services .container,
.ag-portfolio .container, .ag-feature .container, .ag-cta .container,
.ag-about .container, .ag-contact .container, .ag-blog .container,
.ag-faq .container, .ag-article .container, .ag-related .container,
.ag-newsletter .container, .ag-pagehero .container, .ag-contacthero .container,
.ag-header__inner, .ag-footer__inner {
padding-left: 16px;
padding-right: 16px;
}
.ag-cards__grid { grid-template-columns: 1fr; }
.ag-portfolio__grid,
.ag-portfolio__grid--cols-3 { grid-template-columns: 1fr; }
.ag-portfolio__item--quarter,
.ag-portfolio__item--tall,
.ag-portfolio__item--half,
.ag-portfolio__item--big,
.ag-portfolio__item--full { grid-column: span 1; grid-row: span 1; }
/* Figma iPhone 375 (1:8261): картки 352×197, зазор 21px, бокові відступи ~12px */
.ag-portfolio__grid { grid-auto-rows: 197px; gap: 21px; }
.ag-portfolio .container { padding-left: 12px; padding-right: 12px; }
/* full-width cards become less tall (Figma mobile 355x408) */
.ag-services__card { aspect-ratio: 355 / 408; }
.ag-404__code { font-size: 104px; }
.ag-404__label { font-size: 28px; }
.ag-gallery__grid { grid-template-columns: 1fr; grid-template-areas: none; grid-auto-rows: 200px; }
}
/* OUR WORKS на телефоні (Figma portfolio 375, 1:4370): картка 397px, лейбл + лого
зліва зверху, персонаж знизу ВСЕРЕДИНІ картки. Десктопні зсуви/масштаб фігури
(inline transform з ACF) тут скидаємо — інакше персонаж вилазить на сусідні блоки.
Діє до 767px (QA): на 541–767 планшетна схема давала персонажа на всю картку поверх тексту. */
@media (max-width: 767px) {
.ag-works__item {
min-height: 397px;
overflow: hidden;
padding: 20px;
}
.ag-works__overlay,
.ag-works__item--right .ag-works__overlay {
background: linear-gradient(180deg, rgba(8, 14, 24, .75) 0%, rgba(8, 14, 24, 0) 45%);
}
.ag-works__content,
.ag-works__item--left .ag-works__content,
.ag-works__item--right .ag-works__content {
max-width: 100%;
margin-left: 0;
padding: 0;
text-align: left;
}
.ag-works__label { font-size: 16px; margin-bottom: 8px; padding: 0; }
.ag-works__logo,
.ag-works__item--left .ag-works__logo { max-height: 60px; max-width: 70%; margin: 0; }
.ag-works__title,
.ag-works__text { display: none; }
.ag-works__figure,
.ag-works__item--left .ag-works__figure {
inset: auto 0 0 0;
width: 100%;
height: 72%;
justify-content: center;
align-items: flex-end;
opacity: 1;
}
.ag-works__figure .ag-works-wrapper-img__figure { height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ag-works__figure img { max-height: 100%; max-width: 100%; transform: none !important; }
}
/* Боковий відступ 16px (Figma 375) і для блоків сторінок послуг/портфоліо,
яких немає в загальному списку вище — без нього картки впираються в край екрана. */
@media (max-width: 540px) {
.ag-cards .container, .ag-works .container, .ag-gallery .container,
.ag-whatwedo .container, .ag-prod .container, .ag-models .container,
.ag-benefits .container, .ag-tools .container, .ag-steps .container,
.ag-story .container, .ag-storysteps .container, .ag-promos .container,
.ag-linkcards .container, .ag-jobs .container {
padding-left: 16px;
padding-right: 16px;
}
}
/* Логотип: на ≤1024 (Figma iPad 1024 / iPhone 375) лишаємо тільки «ARGENTICS» без
підпису. Підпис зашитий у той самий SVG (300×32, словесний знак — перші ~146px),
тому обрізаємо контейнером. */
@media (max-width: 1024px) {
.ag-header__logo { width: 146px; overflow: hidden; flex: 0 0 auto; }
.ag-header__logo img { height: 32px; max-height: none; width: auto; max-width: none; align-self: flex-start; flex: none; }
.ag-header__logo-tagline { display: none; }
}
/* ===========================================================
MOBILE SLIDERS (ag-cards / ag-linkcards / ag-whatwedo)
Розмітка: .X__slider.swiper[data-ag-slider=BP] > .X__grid.swiper-wrapper > .swiper-slide
+ .ag-snav. Вище BP swiper не ініціалізується (js/argentics.js → initMobileSlider),
і .X__grid лишається звичайною сіткою — селектори з вищою специфічністю, бо
swiper.css підключається ПІСЛЯ цього файлу і ставить .swiper-wrapper { display:flex }.
=========================================================== */
.ag-snav { display: none; align-items: center; justify-content: center; gap: 24px; margin-top: 24px; }
.ag-snav__btn {
width: 48px;
height: 48px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--ag-line);
border-radius: 50%;
background: transparent;
color: var(--ag-lgray);
cursor: pointer;
transition: background .25s, color .25s, opacity .25s;
}
.ag-snav__btn:hover { background: var(--ag-green); border-color: var(--ag-green); color: #fff; }
.ag-snav__btn.swiper-button-disabled { opacity: .35; cursor: default; }
.ag-snav__counter {
min-width: 64px;
text-align: center;
font-family: var(--ag-font-ui);
font-size: 16px;
color: var(--ag-lgray);
}
.is-slider + .ag-snav { display: flex; }
/* Мобільні слайдери карток: swiper-wrapper — flex зі stretch, тож height:auto (замість 100% зі swiper.css)
вирівнює всі слайди по найвищому й сам перераховується при зміні контенту. */
.swiper[data-ag-slider].is-slider > .swiper-wrapper { align-items: stretch; }
.swiper[data-ag-slider].is-slider .swiper-slide { height: auto; }
.ag-cards__slider:not(.is-slider) > .ag-cards__grid,
.ag-whatwedo__slider:not(.is-slider) > .ag-whatwedo__grid { display: grid; transform: none !important; }
.ag-linkcards__slider:not(.is-slider) > .ag-linkcards__grid { display: grid; transform: none !important; }
.ag-cards__slider:not(.is-slider) .swiper-slide,
.ag-linkcards__slider:not(.is-slider) .swiper-slide,
.ag-whatwedo__slider:not(.is-slider) .swiper-slide { width: auto; height: auto; }
.ag-cards__slider { overflow: visible; }
.ag-cards__slider.is-slider { overflow: hidden; margin-top: 48px; }
.ag-cards__slider.is-slider > .ag-cards__grid { margin-top: 0; gap: 0; justify-content: flex-start; }
.ag-cards__slider.is-slider .ag-cards__card { height: auto; }
.ag-linkcards__slider.is-slider > .ag-linkcards__grid { gap: 0; justify-content: flex-start; }
/* What we do / Team (Figma 2d art 375, 1:6392): один пункт у скляній панелі */
.ag-whatwedo__slider { overflow: visible; }
.ag-whatwedo__slider.is-slider {
overflow: hidden;
margin-top: 48px;
padding: 40px 0; /* бічні 37px — на слайдах, інакше сусідній слайд видно в падінгу */
background:
radial-gradient(60% 120% at 120% 200%, rgba(91, 111, 155, .18) 0%, rgba(70, 100, 164, 0) 100%),
rgba(2, 11, 26, .05);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
border-radius: 8px;
}
.ag-whatwedo__slider.is-slider > .ag-whatwedo__grid {
margin: 0;
padding: 0;
gap: 0;
max-width: none;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-radius: 0;
}
.ag-whatwedo__slider.is-slider .swiper-slide { padding: 0 37px; box-sizing: border-box; }
.ag-whatwedo__slider.is-slider .ag-whatwedo__title { min-height: 0; margin-bottom: 18px; }
.ag-whatwedo__slider.is-slider + .ag-snav { margin-top: 32px; }
/* ===========================================================
FIGMA SYNC (1024 / 834 / 375) — значення звірені з макетами всіх сторінок.
У макеті мобільна типографіка = десктопна (заголовки 38/48, текст 18/27,
підзаголовки карток 24/30), тому зменшень шрифтів на ≤768 більше немає.
=========================================================== */
.ag-cards__title { line-height: 30px; }
.ag-article__toc-title { line-height: 30px; }
.ag-article__rate-label,
.ag-article__share-label { line-height: 27px; }
.ag-faq__answer-inner { line-height: 25px; }
.ag-models__answer-inner { font-size: 18px; line-height: 27px; }
.ag-snav__counter,
.ag-services__nav-counter { font-size: 18px; line-height: 27px; }
/* Статті: довгі URL/підписи не розпирають колонку (текст обрізався) */
.ag-article__content { min-width: 0; overflow-wrap: anywhere; }
.ag-article__content figure { margin: 0 0 24px; max-width: 100%; }
.ag-article__content figcaption { font-size: 14px; line-height: 1.5; opacity: .7; }
.ag-article__content table { display: block; max-width: 100%; overflow-x: auto; }
.ag-article__content pre { max-width: 100%; overflow-x: auto; }
/* Планшет — Figma iPad 11" 834 */
@media (max-width: 860px) {
.ag-cta, .ag-about, .ag-contact, .ag-blog, .ag-models, .ag-portfolio,
.ag-tools, .ag-whatwedo, .ag-newsletter, .ag-prod, .ag-storysteps { padding-top: 64px; padding-bottom: 64px; }
.ag-benefits { padding-top: 96px; padding-bottom: 96px; }
/* Our Engagement Models: у макеті 834/375 (game art 1:7075) персонажа немає — лише список */
.ag-models--split .ag-models__layout { grid-template-columns: 1fr; }
.ag-models--split .ag-models__media { display: none; }
.ag-faq { padding: 64px 0; }
.ag-faq__list { max-width: 100%; margin-left: 0; padding-right: 0; padding-bottom: 0; }
/* картинки у формі контакту та FAQ у макеті 834/375 відсутні */
.ag-contact__inner,
.ag-faq__inner { grid-template-columns: 1fr; }
.ag-contact__media,
.ag-faq__media { display: none; }
.ag-brands__label { font-size: 14px; }
/* RECENT PUBLICATIONS: заголовок статті 24px (Figma 834/375) */
.ag-blog__post-title { font-size: 24px; line-height: 30px; }
/* Стаття: TOC над текстом, бокового «Also read» немає (він є внизу сторінки) */
.ag-article__layout { grid-template-columns: 1fr; gap: 32px; }
.ag-article__footer { grid-column: auto; }
.ag-article__sidebar { position: static; top: auto; gap: 24px; }
.ag-article__aside-heading,
.ag-article__sidebar .ag-relcard--side { display: none; }
}
/* Телефон — Figma iPhone 375 */
@media (max-width: 540px) {
.ag-portfolio { padding: 64px 0; }
.ag-tools__label { font-size: 14px; }
.ag-models__title { line-height: 30px; }
.ag-contacthero__card-title { line-height: 50px; }
}
/* Підзаголовки секцій — один стиль 18/27 і для вкладених (wpautop) */
.ag-section-subtitle p { font-size: inherit; line-height: inherit; margin: 0 0 12px; }
.ag-section-subtitle p:last-child { margin-bottom: 0; }
/* Акордеони: однакова тривалість і крива для закриття/відкриття — щоб вони йшли синхронно */
.ag-faq__answer,
.ag-jobs__answer,
.ag-models__answer,
.ag-prod__answer { transition: max-height .4s cubic-bezier(.4, 0, .2, 1); }
/* ===========================================================
OUR WORKS (ag-portfolio) — адаптив за Figma
4 колонки (головна): 1024 = 4 кол. ряд 330 | 834 = 2 кол. ряд 330, широкі на всю ширину | 375 = 1 кол. 197, gap 21
3 колонки (послуги): 1024 = 3 кол. ряд 329 | 834 = 2 кол. ряд 329, високі на 2 ряди, широкі на всю ширину
375 = 2 кол. ряд 329: усі на всю ширину, крім пари --m-half (див. шаблон)
=========================================================== */
@media (max-width: 1024px) {
.ag-portfolio__grid--cols-3 { grid-auto-rows: 329px; }
}
@media (max-width: 860px) {
.ag-portfolio__grid,
.ag-portfolio__grid--cols-3 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 330px; gap: 12px; }
.ag-portfolio__grid--cols-3 { grid-auto-rows: 329px; }
.ag-portfolio__item--quarter { grid-column: span 1; grid-row: span 1; }
.ag-portfolio__item--tall { grid-column: span 1; grid-row: span 2; }
.ag-portfolio__item--half,
.ag-portfolio__item--full { grid-column: 1 / -1; grid-row: span 1; }
.ag-portfolio__item--big { grid-column: 1 / -1; grid-row: span 2; }
.ag-portfolio__item--tall.ag-portfolio__item--t-wide,
.ag-portfolio__item--quarter.ag-portfolio__item--q-wide { grid-column: 1 / -1; grid-row: span 1; }
}
@media (max-width: 540px) {
.ag-portfolio__grid { grid-template-columns: 1fr; grid-auto-rows: 197px; gap: 21px; }
.ag-portfolio__grid .ag-portfolio__item { grid-column: 1 / -1; grid-row: span 1; }
.ag-portfolio__grid--cols-3 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 329px; gap: 12px; }
.ag-portfolio__grid--cols-3 .ag-portfolio__item--m-half { grid-column: span 1; }
}
/* ===========================================================
FEATURE (Dota 2 / Last Flag) на планшеті й телефоні — Figma home 834 (Banner DOTA)
і 375 (1:8274 / 1:8286): темна плашка 343px з персонажем (на 834 справа на ній
«WORKING WITH» + лого), під нею без фону — заголовок 38/46 і текст 18/27.
На 375 підпису й лого немає. Десктопні зсуви/масштаб з ACF (inline transform) скидаємо.
=========================================================== */
@media (max-width: 860px) {
/* верхній запас 27 + 48 — персонаж виступає над плашкою (Figma 1:7971 / 1:7995) */
.ag-feature { padding: 75px 0 27px; }
.ag-feature:has(+ :not(.ag-feature)),
.ag-feature:last-child { padding-bottom: 64px; }
.ag-feature__inner {
grid-template-columns: 1fr 285px;
background: none;
border-radius: 0;
min-height: 0;
overflow: visible;
gap: 0;
}
/* плашка 343px завжди; персонаж НЕ обрізається: contain, лівий нижній кут, виступає вгору над плашкою */
.ag-feature__media,
.ag-feature--reverse .ag-feature__media {
grid-column: 1 / -1;
grid-row: 1;
order: 0;
height: 343px;
min-height: 0;
background: #182032;
border-radius: 8px;
overflow: visible;
transform: none !important;
}
.ag-feature__media img {
position: absolute;
left: 20px;
bottom: 0;
top: auto;
/* бокс фіксований: висота = плашка + виступ, ширина = плашка − 40. contain масштабує
персонажа плавно й пропорційно (без стрибків між ширинами), якір — лівий низ */
width: calc(100% - 40px);
height: calc(100% + 48px);
max-width: none;
max-height: none;
object-fit: contain;
object-position: left bottom !important;
}
.ag-feature__content { display: contents; }
.ag-feature__label,
.ag-feature__logo {
grid-column: 2;
grid-row: 1;
align-self: start;
justify-self: center;
position: relative;
z-index: 1;
}
.ag-feature__label { margin-top: 77px; }
.ag-feature__logo { margin-top: 132px; max-height: 142px; max-width: 220px; }
.ag-feature__title { grid-column: 1 / -1; margin-top: 22px; font-size: 38px; line-height: 46px; }
.ag-feature__text { grid-column: 1 / -1; margin-top: 24px; }
}
@media (max-width: 540px) {
.ag-feature__inner { grid-template-columns: 1fr; }
.ag-feature__label,
.ag-feature__logo { display: none; }
}
/* Команда / What we do на телефоні: кольорова частина заголовка секції — окремим рядком, біла —
наступним (
після неї тоді зайвий — дав би порожній рядок); назви пунктів — в один рядок */
@media (max-width: 540px) {
.ag-whatwedo .ag-section-title span { display: block; }
.ag-whatwedo .ag-section-title span + br { display: none; }
}
/*
в назвах пунктів — у всьому діапазоні мобільного слайдера (≤575), а не лише ≤540 */
@media (max-width: 575px) {
.ag-whatwedo__title br { display: none; }
}
/* Навігація мобільних слайдерів (Figma Slider Nav, game dev 375 1:9024): кнопка 48 — 12 — "01 / 08" (59) — 12 — кнопка 48,
по центру. swiper.css робить .swiper-pagination-fraction { width:100% } — лічильник розтягувався і розводив стрілки по краях. */
.ag-snav,
.ag-services__nav { gap: 12px; }
.ag-snav__counter.swiper-pagination-fraction,
.ag-services__nav-counter.swiper-pagination-fraction {
position: static;
width: auto;
min-width: 59px;
flex: 0 0 auto;
transform: none;
}
/* Картки послуг: swiper.css (підключається пізніше) ставить .swiper-slide { display:block } і перебиває
flex картки — біла частина не тягнулася на висоту ряду і «скакала». Повертаємо flex. */
.ag-cards__slider .ag-cards__card.swiper-slide { display: flex; flex-direction: column; }
.ag-cards__slider .ag-cards__body { flex: 1 1 auto; }
/* При hover картинка масштабується (transform → окремий шар поверх сусідів) і перекривала
скруглений верх білого блоку, який заходить на неї на 10px. Білий блок — завжди зверху. */
.ag-cards__body { position: relative; z-index: 1; }
/* Команда / What we do — мобільний слайдер за Figma game art 375 (1:7231):
скляна панель 350×380 з обводкою 2px, під нею навігація через 68px. Фон — на всю висоту
секції (Figma game dev 375, 1:9062): фіксована висота 786px зі зсувом 132px лишала
порожні смуги згори й знизу. Кадруємо ліву третину картинки, де стоять персонажі.
Лише <576 (мобільний брейкпоінт макетів): від 576 слайдера немає — див. блок «Team на планшеті». */
@media (max-width: 575px) {
.ag-whatwedo--bg {
background-size: cover;
background-position: 8% top;
background-repeat: no-repeat;
}
/* ACF bg_mobile = figure (Figma game art 375, 1:7231): персонаж із лівої частини фону
(дівчина 353×629, центр ≈ 66% ширини екрана, верх ≈ 222px) стоїть за панеллю */
.ag-whatwedo--bg-figure {
background-size: auto 786px;
background-position: calc(65.6vw - 269px) 132px;
background-repeat: no-repeat;
/* колір країв Section-3.png: смуги, які картинка не покриває (зверху/зліва/знизу), без шва */
background-color: #040d21;
}
/* Game art: окреме мобільне зображення з Figma (1:7242 «girl2 2», 305×629 на #040d21, експорт ×3)
на псевдоелементі, прив'язаному до НИЗУ секції (низ −45px, як у макеті 375: верх 222 при висоті
896). Висота — 629px, але не більше за «секція − 130px»: на 560px секція нижча за макет і
дівчину зменшуємо, щоб її не обрізало знизу. Центр дівчини (58% ширини картинки) — на 65.9%
ширини секції. Вікно секції власний фон не показує (колір лишається). */
body.slug-game-art-outsourcing .ag-whatwedo--bg-figure {
background-image: none !important;
}
body.slug-game-art-outsourcing .ag-whatwedo--bg-figure::before {
content: "";
position: absolute;
z-index: 0;
bottom: 45px;
left: 65.9%;
height: min(629px, calc(100% - 130px));
aspect-ratio: 305 / 629;
transform: translateX(-58%);
background: url(../img/game-art-girl-mobile.png) center / 100% 100% no-repeat;
pointer-events: none;
}
.ag-whatwedo__slider.is-slider {
margin-left: -6px;
margin-right: -6px;
border: 2px solid rgba(148, 170, 214, .28);
}
.ag-whatwedo__slider.is-slider + .ag-snav { margin-top: 68px; }
}
/* ===========================================================
LEGAL PAGE (tpl-legal.php: Privacy Policy / Terms) — reuses .ag-article shell
=========================================================== */
body.page-template-tpl-legal .ag-header,
body.page-template-tpl-legal .ag-header.is-scrolled {
background: var(--ag-dark-2);
box-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
body.page-template-tpl-legal .main-content { padding-top: var(--ag-header-h); background: var(--ag-black2); }
.ag-legal__head { padding-top: 60px; color: #fff; }
.ag-legal__title {
color: var(--ag-green);
font-size: 38px;
line-height: 1.21;
font-weight: 900;
text-transform: uppercase;
margin: 0 0 24px;
}
.ag-legal__updated { margin: 0; color: #fff; font-size: 16px; line-height: 1.5; text-transform: uppercase; }
.ag-article__layout.ag-legal__layout { padding-top: 120px; padding-bottom: 120px; }
.ag-legal .ag-article__content h2:first-child { margin-top: 0; }
@media (max-width: 860px) {
.ag-legal__head { padding-top: 40px; }
.ag-article__layout.ag-legal__layout { padding-top: 48px; padding-bottom: 64px; }
}
/* ===========================================================
QA 2026-11-01
=========================================================== */
/* Article → «Also Read»: стрілка зникала при наведенні (Safari не перемальовує
fill:currentColor під час transition кольору кнопки). Задаємо fill явно. */
.ag-related__nav-btn svg,
.ag-snav__btn svg { flex: none; display: block; }
.ag-related__nav-btn svg path { transition: fill .25s; }
.ag-related__nav-btn:hover svg path,
.ag-related__nav-btn:focus-visible svg path { fill: #fff; }
.ag-snav__btn:hover svg path,
.ag-snav__btn:focus-visible svg path { stroke: #fff; }
/* Team / What we do — кольори навігації слайдера за Figma game art 375 (1:7238 Slider Nav):
обидва кола з обводкою #3ba34c, стрілка «назад» біла, «вперед» зелена #3ba34c,
у лічильнику поточний номер зелений, «/ 04» білий. */
.ag-whatwedo__slider + .ag-snav .ag-snav__btn { border-color: #3ba34c; }
.ag-whatwedo__slider + .ag-snav .ag-snav__prev { color: #fff; }
.ag-whatwedo__slider + .ag-snav .ag-snav__next { color: #3ba34c; }
.ag-whatwedo__slider + .ag-snav .ag-snav__btn svg path { stroke: currentColor; }
.ag-whatwedo__slider + .ag-snav .ag-snav__btn:hover { background: #3ba34c; color: #fff; }
.ag-whatwedo__slider + .ag-snav .ag-snav__btn:hover svg path,
.ag-whatwedo__slider + .ag-snav .ag-snav__btn:focus-visible svg path { stroke: #fff; }
.ag-whatwedo__slider + .ag-snav .ag-snav__counter { color: #fff; }
.ag-whatwedo__slider + .ag-snav .swiper-pagination-current { color: #3ba34c; }
/* Перший блок (page hero) на адаптиві — за макетом 5cufqwaUUQRjBnbRyn0D8p.
Брейкпоінт телефона в макеті <576px (було ≤540 → на 541–575 картинка
кадрувалась cover і текст ішов по персонажу). */
@media (min-width: 541px) and (max-width: 575px) {
section.ag-pagehero { min-height: 420px; background-size: auto 400px; }
.ag-pagehero .ag-pagehero__content { max-width: 100%; }
.ag-pagehero__overlay {
background: linear-gradient(180deg, rgba(4, 13, 33, .55) 0, rgba(4, 13, 33, 0) 120px,
rgba(4, 13, 33, 0) 290px, #040d21 400px);
}
}
/* Планшет (Figma 3D art iPad Pro 11" 1:27647): hero 551px, текст лівою колонкою ~400px,
персонаж праворуч — текст не повинен залазити на нього. */
@media (min-width: 576px) and (max-width: 1024px) {
section.ag-pagehero { min-height: 551px; }
.ag-pagehero .ag-pagehero__content { max-width: 420px; }
/* фон кадрується cover → персонаж ширший, ніж у макеті; затемнюємо ліву частину під текстом */
.ag-pagehero__overlay {
background: linear-gradient(90deg, rgba(4, 13, 33, .85) 0, rgba(4, 13, 33, .55) 45%, rgba(4, 13, 33, 0) 70%),
linear-gradient(180deg, rgba(8, 13, 33, 1) 0.6%, rgba(0, 0, 0, 0) 27.6%);
}
}
/* AR/VR (Figma ar-vr iPhone 1:10649): на телефоні картинка на весь блок 609px
(opacity 43% поверх #060F23 + чорний 20%), текст поверх неї, без «смуги». */
@media (max-width: 575px) {
body.slug-ar-vr section.ag-pagehero {
min-height: 609px;
padding-top: 165px;
background-size: cover;
background-position: var(--ag-hero-fx, 50%) 0;
}
body.slug-ar-vr .ag-pagehero__overlay {
background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)),
linear-gradient(rgba(6, 15, 35, .45), rgba(6, 15, 35, .45));
}
}
/* Team / What we do (Figma game art 1:6569 «Flex Block» 1016×757): скляна панель має
обводку 2px радіальним градієнтом (#5561B0 → прозорий, #55858D → #0033FF 0%) і
background blur 36 — на сайті обводки не було, блюр 18 → фон під панеллю виглядав інакше. */
.ag-whatwedo__slider:not(.is-slider) > .ag-whatwedo__grid {
position: relative;
-webkit-backdrop-filter: blur(36px);
backdrop-filter: blur(36px);
}
.ag-whatwedo__slider:not(.is-slider) > .ag-whatwedo__grid::before,
.ag-whatwedo__slider.is-slider::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background:
radial-gradient(80% 120% at 0% 0%, #5561b0 0%, rgba(59, 125, 153, 0) 100%),
radial-gradient(80% 120% at 100% 100%, #55858d 0%, rgba(0, 51, 255, 0) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
pointer-events: none;
z-index: 0;
}
@media (max-width: 767px) {
/* на телефоні вже є суцільна обводка 2px — градієнтна не потрібна */
.ag-whatwedo__slider.is-slider::before { content: none; }
}
/* swiper.css (підключений після argentics.css) ставить .swiper{overflow:hidden} і перебивав
.ag-whatwedo__slider{overflow:visible}: на десктопі, де слайдер не ініціалізований, краї
скляної панелі/блюру й тексту під час анімацій обрізались. */
.ag-whatwedo__slider.swiper:not(.is-slider) { overflow: visible; }
/* About Us (і всі page hero): поведінка фону за макетами 1920 (782px) і MacBook 1280
(1:10832 — 602px). Раніше висота = пропорція картинки (на 1280 ≈ 521px), і вся картинка
зменшувалась — персонажі дрібні. Тепер висота інтерполюється 602→782 між 1280 і 1920,
фон — cover від верху: персонажі на всю висоту блоку, як у макеті. */
@media (min-width: 1025px) {
.ag-pagehero {
min-height: max(calc(100vw / (var(--ag-hero-ar, 1920 / 778))),
clamp(551px, calc(782px - (1920px - 100vw) * 0.28125), 782px));
}
}
@media (min-width: 1025px) {
/* About Us (1:10727 / 1:10832): підзаголовок колонкою ~523px — не заходить на персонажів */
body.slug-about-us .ag-pagehero__content { max-width: 530px; }
}
/* Our Works (Figma portfolio 1:3611): персонажі виступають над банером лише на ~10–35px;
на сайті — 55–107px (Tryhard залазив на сусідній банер). Обмежуємо висоту фігури. */
@media (min-width: 768px) {
/* обгортка мала auto-висоту → max-height у % не працював, персонажі йшли в натуральному розмірі */
.ag-works__figure .ag-works-wrapper-img__figure { height: 100%; display: flex; align-items: flex-end; }
.ag-works__figure img { max-height: 110%; }
}
/* AR/VR — планшет (Figma iPad Pro 11" 1:10557, 834×552): та сама картинка, але кадр по висоті
блоку, космонавт праворуч (~577px з 834), підзаголовок колонкою ~515px, картинка яскрава —
без загального лівого затемнення планшетного hero (воно для сторінок з персонажем під текстом). */
@media (min-width: 576px) and (max-width: 1024px) {
body.slug-ar-vr section.ag-pagehero {
min-height: 552px;
padding-bottom: 24px;
background-size: auto 520px; /* низ картинки (дуга) ≈ 457px, як у макеті */
background-position: 48% 0;
}
body.slug-ar-vr .ag-pagehero .ag-pagehero__content { max-width: 520px; }
body.slug-ar-vr .ag-pagehero__overlay {
background: linear-gradient(180deg, rgba(8, 13, 33, 1) 0.6%, rgba(0, 0, 0, 0) 27.6%);
}
}
/* Production Services (Figma ar-vr): на планшеті 1024/834 — окрема картинка (космос із планетами,
ACF «Background image (tablet)»), на телефоні <576 (iPhone 1:10653) картинки немає — лише колір #060F23. */
@media (min-width: 576px) and (max-width: 1024px) {
.ag-prod.ag-prod--bg-tablet { background-image: var(--ag-prod-bg-tablet) !important; background-position: center top; }
}
@media (max-width: 575px) {
.ag-prod.ag-prod--bg { background-image: none !important; background-color: #060f23 !important; }
}
/* Контакт-форма на планшеті (Figma ar-vr iPad 834, 1:10637 — 834×676): без картинки,
заголовок колонкою ~520px, форма ~450px по центру (була на всю ширину контейнера). */
@media (min-width: 576px) and (max-width: 860px) {
.ag-contact__title { max-width: 560px; margin-left: auto; margin-right: auto; }
.ag-contact__form { max-width: 450px; width: 100%; margin-left: auto; margin-right: auto; }
}
/* Team / What we do на планшеті (Figma ar-vr iPad 834, 1:10573; game art 1:7069): поля секції 67px →
панель ~700px по центру, 2 колонки. Від 576 (а не 768) — макет «≥576px» без слайдера; правило
≤768 «1 колонка» тут перебиваємо. */
@media (min-width: 576px) and (max-width: 860px) {
.ag-whatwedo__slider:not(.is-slider) > .ag-whatwedo__grid,
.ag-whatwedo__slider:not(.is-slider) > .ag-whatwedo__grid--cols-2,
.ag-whatwedo__slider:not(.is-slider) > .ag-whatwedo__grid--cols-4 {
max-width: 700px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Game art — «Game art team» на планшеті (Figma iPad 834, 1:7069): заголовок і підзаголовок
колонкою 474px, панель 700 з полями 40/59, колонки 270 через 42, ряди з кроком ~369 (картка 304),
за панеллю — дівчина з лівої частини фону (girl2, 431×768, верх ≈ 179px) на кольорі #040D21. */
@media (min-width: 576px) and (max-width: 860px) {
body.slug-game-art-outsourcing .ag-whatwedo .ag-section-title,
body.slug-game-art-outsourcing .ag-whatwedo .ag-section-subtitle {
max-width: 474px;
margin-left: auto;
margin-right: auto;
}
body.slug-game-art-outsourcing .ag-whatwedo .ag-section-subtitle { padding-bottom: 15px; }
body.slug-game-art-outsourcing .ag-whatwedo__slider:not(.is-slider) > .ag-whatwedo__grid {
gap: 54px 42px;
padding: 40px min(59px, 8.4%);
}
body.slug-game-art-outsourcing .ag-whatwedo__slider:not(.is-slider) .ag-whatwedo__item { min-height: 304px; }
/* фон Section-3.png 1920×1227: дівчина в ньому x 204–622, y 158–1128 → масштаб 0.76 */
body.slug-game-art-outsourcing .ag-whatwedo--bg-figure {
background-size: 1459px auto;
background-position: -114px 100px;
background-repeat: no-repeat;
background-color: #040d21;
}
}
/* Шапка на планшеті (Figma iPad 834): логотип з підписом «Game Development and Art Outsourcing»
і лише бургер — без кнопки Contact Us (вона є в розкритому меню). */
@media (min-width: 576px) and (max-width: 860px) {
.ag-header__cta { display: none; }
.ag-header__logo { width: auto; overflow: visible; }
}
/* ===========================================================
PAGE HERO — висоти з макетів 5cufqwaUUQRjBnbRyn0D8p для кожної сторінки
(1920 / 1280 / 1024 / 834 / 375). Між кадрами висота інтерполюється лінійно.
Значення без одиниць → *1px. Контент може зробити блок вищим (це min-height).
=========================================================== */
body.slug-game-development { --hh1920: 778; --hh1280: 580; --hh1024: 598; --hh834: 593; --hh375: 697; }
body.slug-game-art-outsourcing { --hh1920: 830; --hh1280: 580; --hh1024: 598; --hh834: 566; --hh375: 697; }
body.slug-2d-game-art-outsourcing { --hh1920: 830; --hh1280: 580; --hh1024: 598; --hh834: 510; --hh375: 697; }
body.slug-2d-character-design-outsourcing { --hh1920: 847; --hh1280: 580; --hh1024: 598; --hh834: 566; --hh375: 697; }
body.slug-3d-game-art-outsourcing { --hh1920: 818; --hh1280: 603; --hh1024: 598; --hh834: 551; --hh375: 548; }
body.slug-about-us { --hh1920: 778; --hh1280: 602; --hh1024: 598; --hh834: 551; --hh375: 654; }
body.slug-careers { --hh1920: 773; --hh1280: 603; --hh1024: 598; --hh834: 535; --hh375: 548; }
body.slug-ar-vr { --hh1920: 879; --hh1280: 700; --hh1024: 596; --hh834: 552; --hh375: 609; }
@media (min-width: 1280px) {
:is(body.slug-game-development, body.slug-game-art-outsourcing, body.slug-2d-game-art-outsourcing,
body.slug-2d-character-design-outsourcing, body.slug-3d-game-art-outsourcing, body.slug-about-us,
body.slug-careers, body.slug-ar-vr) section.ag-pagehero {
min-height: min(calc(var(--hh1920) * 1px),
calc(var(--hh1280) * 1px + (var(--hh1920) - var(--hh1280)) * (100vw - 1280px) / 640));
background-size: cover;
background-position: center top;
}
}
@media (min-width: 1025px) and (max-width: 1279.98px) {
:is(body.slug-game-development, body.slug-game-art-outsourcing, body.slug-2d-game-art-outsourcing,
body.slug-2d-character-design-outsourcing, body.slug-3d-game-art-outsourcing, body.slug-about-us,
body.slug-careers, body.slug-ar-vr) section.ag-pagehero {
min-height: calc(var(--hh1024) * 1px + (var(--hh1280) - var(--hh1024)) * (100vw - 1024px) / 256);
background-size: cover;
background-position: center top;
}
}
@media (min-width: 576px) and (max-width: 1024px) {
:is(body.slug-game-development, body.slug-game-art-outsourcing, body.slug-2d-game-art-outsourcing,
body.slug-2d-character-design-outsourcing, body.slug-3d-game-art-outsourcing, body.slug-about-us,
body.slug-careers, body.slug-ar-vr) section.ag-pagehero {
min-height: max(calc(var(--hh834) * 1px),
calc(var(--hh834) * 1px + (var(--hh1024) - var(--hh834)) * (100vw - 834px) / 190));
}
}
@media (max-width: 575px) {
:is(body.slug-game-development, body.slug-game-art-outsourcing, body.slug-2d-game-art-outsourcing,
body.slug-2d-character-design-outsourcing, body.slug-3d-game-art-outsourcing, body.slug-about-us,
body.slug-careers, body.slug-ar-vr) section.ag-pagehero {
min-height: calc(var(--hh375) * 1px);
}
/* Телефон: картинка на ВЕСЬ блок, текст поверх затемненої картинки (Figma game dev 1:9007,
game art 1:7110, about us iPhone 13 mini - 9). Смуга 400px лишається лише для 3D art і Careers. */
:is(body.slug-game-development, body.slug-game-art-outsourcing, body.slug-2d-game-art-outsourcing,
body.slug-2d-character-design-outsourcing, body.slug-about-us) section.ag-pagehero {
padding-top: 165px;
background-size: cover;
background-position: var(--ag-hero-fx, 50%) 0;
}
:is(body.slug-game-development, body.slug-game-art-outsourcing, body.slug-2d-game-art-outsourcing,
body.slug-2d-character-design-outsourcing, body.slug-about-us) .ag-pagehero__overlay {
background: linear-gradient(180deg, rgba(4, 13, 33, .35) 0%, rgba(4, 13, 33, .55) 55%, rgba(4, 13, 33, .85) 100%);
}
}
/* Окремий фон для телефона (ACF «Background image (phone < 576px)»): на весь блок, від верху по центру */
@media (max-width: 575px) {
section.ag-pagehero.ag-pagehero--bg-mobile {
background-image: var(--ag-hero-bg-m) !important;
background-size: cover !important;
background-position: center top !important;
padding-top: 165px;
}
}
/* 2D game art: у мобільному фоні (uploads/2026/11/hero-mobile-2d-game-art-outsourcing.jpg) нижня
суцільна частина була #070f24, а наступний блок — #040d21, тож на стику було видно шов.
Та сама картинка, перефарбована на -3/-2/-3 по RGB (низ = рівно #040d21), лежить у темі. */
@media (max-width: 575px) {
body.slug-2d-game-art-outsourcing section.ag-pagehero.ag-pagehero--bg-mobile {
background-image: url(../img/hero-mobile-2d-game-art.jpg) !important;
background-color: #040d21;
}
}
@media (max-width: 575px) {
/* мобільний фон експортовано з Figma разом із затемненням макета — власний оверлей не потрібен */
section.ag-pagehero.ag-pagehero--bg-mobile .ag-pagehero__overlay { background: none !important; }
}
/* ===========================================================
BLOG (Figma Blog: iPad 834 1:12388 / 1:12396, iPhone 375)
=========================================================== */
/* Subscribe to our newsletter: у макеті фон суцільний #040D21 (1:11916), без градієнта */
.ag-newsletter { background: #040d21; }
/* Дино на планшеті (Figma 1:12558): 534×446, зліва 47px, притиснутий до низу (6px),
opacity 37% × 85% ≈ .31, luminosity — раніше був дрібний (≈290px) і висів угорі */
@media (min-width: 576px) and (max-width: 860px) {
.ag-newsletter__figure {
top: auto;
bottom: 6px;
left: 47px;
width: 534px;
opacity: .31;
}
}
/* Десктоп / ноутбук / iPad Pro (Figma LETS TALK: 1920 1:11917, 1280 1:12128, 1024 1:12373): дино завжди
натуральних 642×536 (раніше clamp(280, 34vw, 642) — на 1024–1280 був у 1,5–2 рази дрібніший),
притиснутий до ВЕРХУ секції, а не до низу: на сайті секція вища за макет (540), і дино з bottom:0
опускалось на ≈120px нижче за заголовок. Позиція: left 92px (1024) → 102px (1280) → 212px (1920),
top 21px (≤1280) → 0 (1920). */
@media (min-width: 861px) {
.ag-newsletter__figure {
width: 642px;
max-width: none;
bottom: auto;
top: min(21px, max(0px, calc(21px - (100vw - 1280px) * .0328)));
left: max(calc(92px + (100% - 1024px) * .039), calc(102px + (100% - 1280px) * .1719));
}
}
/* Телефон (Figma 1:12754): 375×397 з кадруванням (Crop) — картинка на висоту 397, по центру
зі зсувом −24px, низ — 22px від краю секції; opacity 37% × 49% ≈ .18 */
@media (max-width: 575px) {
.ag-newsletter__figure {
top: auto;
bottom: 22px;
left: calc(50% - 262px);
width: 476px;
opacity: .18;
}
}
/* Список статей сторінки Blog (ag_posts, .backarticle-empty) на планшеті/телефоні — картка
Figma «Column/Card»: прев'ю на всю ширину картки, під ним текст з полями 24, дата → заголовок 24,
заголовок → анонс 8, між картками 26. Висоту прев'ю задає aspect-ratio (16/9 планшет, 4/3 телефон)
замість фіксованих 200px. */
@media (max-width: 860px) {
.backarticle-empty.ag-blog__list { gap: 26px; }
.backarticle-empty .ag-blog__row {
grid-template-columns: 1fr;
gap: 0;
min-height: 0;
}
.backarticle-empty .ag-blog__thumb {
height: auto;
min-height: 0;
aspect-ratio: 16 / 9;
}
.backarticle-empty .ag-blog__body { padding: 24px; gap: 8px; }
.backarticle-empty .ag-blog__date { margin-bottom: 16px; }
}
@media (min-width: 576px) and (max-width: 860px) {
/* у макеті 834 заголовок статті 38/46 (24/30 — лише на телефоні та в «Recent publications») */
.backarticle-empty .ag-blog__post-title { font-size: 38px; line-height: 46px; }
}
@media (max-width: 575px) {
.backarticle-empty .ag-blog__thumb { aspect-ratio: 4 / 3; }
}
/* OUR WORKS на планшеті 768–1024 (QA): контент завжди зліва (лейбл, лого, текст — по лівому краю,
незалежно від ACF align), персонаж менший і праворуч, притиснутий до низу й правого краю банера,
без виступу над банером. Десктопні зсуви/масштаб фігури (inline transform з ACF) скидаємо. */
@media (min-width: 768px) and (max-width: 1024px) {
.ag-works__overlay,
.ag-works__item--right .ag-works__overlay {
background: linear-gradient(90deg, rgba(8, 14, 24, .85) 0%, rgba(8, 14, 24, .45) 50%, rgba(8, 14, 24, .15) 100%);
}
.ag-works__content,
.ag-works__item--left .ag-works__content,
.ag-works__item--right .ag-works__content {
max-width: 50%;
margin-left: 0;
text-align: left;
}
.ag-works__logo,
.ag-works__item--left .ag-works__logo { margin-left: 0; max-width: 100%; }
.ag-works__figure,
.ag-works__item--left .ag-works__figure,
.ag-works__item--right .ag-works__figure {
inset: 0 0 0 auto;
width: 48%;
justify-content: flex-end;
opacity: 1;
clip-path: inset(0 round 0 8px 8px 0);
}
.ag-works__figure .ag-works-wrapper-img__figure { height: 88%; margin-top: auto; justify-content: flex-end; }
.ag-works__figure img { max-height: 100%; max-width: 100%; transform: none !important; object-position: right bottom; }
}
/* QA: .ag-pagehero + .ag-cards { padding-top:0 } (десктоп, картинка hero «перетікає» в блок) на адаптиві
прибирав відступ — заголовок карток прилипав до фону hero (3D / 2D game art, 2D character design,
game art). На ≤1024 повертаємо стандартний відступ секції 64px. */
@media (max-width: 1024px) {
.ag-pagehero + .ag-cards { padding-top: 64px; }
}
/* QA About Us (Our story + How we work, 1024 / 834): у макеті персонаж у натуральному розмірі
(~935px), вершина ірокеза ≈285px від верху секції, ліворуч виходить за край (≈-185px) і стоїть
за кроками; обріз PNG знизу (по стегнах) іде за низ секції під fade. На сайті був 46vw (≈380px)
— дрібний, угорі блоку, з видимим різким низом. На телефоні <576 персонажа в макеті немає. */
@media (min-width: 576px) and (max-width: 1024px) {
.ag-storysteps__figure { width: 935px; max-width: none; left: -185px; top: 225px; opacity: .45; }
}
@media (max-width: 575px) {
.ag-storysteps__figure { display: none; }
}
/* About Us, десктоп (Figma 1920 1:10738 / MacBook 1280 1:10938): персонаж так само натуральних 935px
завширшки, ірокез ≈ 225px+60 від верху секції. Зсув по X: на 1280 — −185px (як на 1024/834),
далі разом зі збільшенням ширини рухається на ¼ приросту (на 1920 — ≈ −25px: голова ≈ 546px
від лівого краю, макет). left = max(−185px, 25% − 505px). Раніше було 46vw зліва без зсуву,
тому на широких екранах персонаж виходив дрібним і надто лівим. */
@media (min-width: 1025px) {
.ag-storysteps__figure {
width: 935px;
max-width: none;
left: max(-185px, calc(25% - 505px));
top: 225px;
}
}
/* QA Home 8: заголовок CTA з ACF містить
(«…Your Game
Change the World?») — на вузьких
екранах перший рядок і так переноситься, і виходило 3 рядки з «висячим» GAME. На ≤860 ховаємо
(у шаблоні після нього додано пробіл) — текст переноситься природно. На десктопі розрив лишається. */
@media (max-width: 860px) {
.ag-contact__title br { display: none; }
.ag-contact__title { text-wrap: balance; }
}
/* QA Home 7: «обрізається зображення на адаптиві» (карточка Dota / Last Flag, ~546px).
Плашка персонажа = ширина − 305px (колонка лого) з object-fit: cover → на 541–700 рамка лише
~190–250px і персонаж різався рівною вертикаллю. 1) Телефонна розкладка (без лого, персонаж на
всю плашку) — з <576, як у макеті (було ≤540). 2) На планшеті правий край персонажа м'яко гасне
під колонку лого замість різкого зрізу. */
/* Оновлено за Figma 834 (1:7971 / 1:7995): маску-градієнт прибрано — персонаж не обрізається,
а виступає над плашкою (див. блок @media ≤860 вище). */
@media (max-width: 575px) {
.ag-feature__inner { grid-template-columns: 1fr; }
.ag-feature__label,
.ag-feature__logo { display: none; }
}